Add (replace) hyperlink to pictures in a Picture Library Slideshow Web Part

Question

On our team site we have added a web part that is a "Picture Library Slideshow" web part. Currently clicking on the images that scroll in the slideshow directs the browser to just the image's URL. I would like to modify that to point to any other URL of my choice.

I have tried forcing a modification of the javascript that is generated by the slideshow webpart using my own script on the page. Looking at the source, the Picture Library uses a var that actually sets the links, it's called "linkArray":

var pictureArray = ['http://intranet/HomePicture/_w/image1.jpg','http://intranet/HomePicture/_w/image2.jpg'];
var linkArray = ['http://intranet/HomePicture/image1.jpg','http://intranet/HomePicture/image2.jpg'];
var titleArray = ['',''];
var descriptionArray = ['',''];
var heightArray = [268,268];
var widthArray = [383,383];

Using my own script I tried to clear out the array and insert my own links into it, but for some reason the links only update (i.e. my script's function runs) after the first image changes. Even if I manually change the first image's href tag, the script still thinks the "first" image is the second one that the slideshow scrolls to. Is there a way to force the function to overwrite the existing javascript immediately on page load?

Answer 1

After exhausting all the other options in trying to force the page's web part image to start changing the links from the first item that loads, I found a workaround solution which is to simply use a rotate function on my array. Since the behavior offsets the image-to-hyperlink associations by 1 item, rotating the array I assign to the image links by 1 as well matches them up fine.

Answer 2

How Picture Library Slideshow web part works

Picture items are retrieved via SPQuery from Picture Library and results are saved in internal array of ImageInfo entries

public struct ImageInfo
    {
      public int width;
      public int height;
      public string src;
      public string fullImageSrc;
      public string title;
      public string descrption;
    }  

and this information is rendered on the client side and stored in the following arrays:

var pictureArray = [...];
var linkArray = [...];
var titleArray = [...];
var descriptionArray = [...];
var heightArray = [...];
var widthArray = [...];

and after that Slideshow control is initialized on the client side:

 var slideshowObject = new SlideshowObject(slideshowObjectId, pictureArray, linkArray, titleArray, descriptionArray, heightArray, widthArray, transitionTime, mode);
 ChangePic(slideshowObject);    

How to manipulate pictures for Slideshow

It could be achieved with overriding SlideshowObject constructor, in that case it is possible to provide additional logic when SlideshowObject is created.

For example, the following example demonstrates how to exclude pictures with no titles from displaying them in Slideshow :

//Overridden SlideshowObject constructor with method for excluding pictures  
function SlideshowObjectInitializer() {
   SlideshowObject = (function(SlideshowObjectOrig) {

      return function() {

       //Exclude pictures
       if(typeof excludePic != 'undefined') {
          for(i=0,k=0;i<arguments[1].length;i++) {
             var imageInfo = {src: arguments[1][i], fullImageSrc: arguments[2][i], title: arguments[3][i],description: arguments[4][i], height: arguments[5][i], width: arguments[6][i]};
             if(excludePic(imageInfo)) {
                for(j=1;j<7;j++) {
                    arguments[j].splice(i, 1);
                }  
                i--;
             } 
          }
       }
       //Call original SlideshowObject constructor 
       return SlideshowObjectOrig.apply(this, arguments);
     };
  })(SlideshowObject);
}   

//Exclide pictures with no titles
function excludePic(imageInfo) {
    return (imageInfo.title.length == 0);
}

ExecuteOrDelayUntilScriptLoaded(SlideshowObjectInitializer, 'imglib.js');

---

Please follow my blog post for details.

Answer 3

It sounds like the first image is already rendered before your javascript executes. On idea is to "manually" locate and change the href tag for that image directly in the DOM.