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?

3 Answers 3


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);

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);
       //Call original SlideshowObject constructor 
       return SlideshowObjectOrig.apply(this, arguments);

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

ExecuteOrDelayUntilScriptLoaded(SlideshowObjectInitializer, 'imglib.js');

Please follow my blog post for details.

  • Thank you for the explanation. In my case, I need to "replace" the links that are already assigned (in linkArray) with my own. I have tried this in two ways, one to simply assign linkArray[i] = "newUrl", and another more advanced way using a new array of URLs, "linkArray.length = 0; Array.prototype.push.apply(linkArray, replacementLinks);" Either way, the problem still remained that the links only update after the first image scrolls once, so that my hyperlinks are assigned from the second image onward, thereby messing up the order of the links
    – Alex
    Commented Feb 28, 2013 at 22:44
  • Sorry I didn't notice your mention of _spBodyOnLoadFunctionNames. I will try this out and get back to you. Thanks
    – Alex
    Commented Feb 28, 2013 at 22:49
  • I was able to use the function _spBodyOnLoadFunctionNames to run my code, in tandem with ExecuteOrDelayUntilScriptLoaded. Unfortunately the same problem remains: the links still only change after the first image scrolls, so the second image is assigned the first link in the array, and so on.
    – Alex
    Commented Feb 28, 2013 at 23:19
  • @Alex, the answer has been updated. The idea here to override SlideshowObject object in order to provide additional logic. Commented Mar 5, 2013 at 11:47
  • This looks to be the correct way to solve this problem, although I did find a workaround. Thanks for your well researched answer.
    – Alex
    Commented Mar 6, 2013 at 0:57

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.

  • That's pretty much what I did, force it to overwrite the link manually once on the DOM, and then overwrite linkArray. I suppose this is a valid workaround, but now I am having another problem in getting the link names, which I'll make a new question for.
    – Alex
    Commented Feb 28, 2013 at 17:41
  • The problem with this method is that it treats the symptom but not the source of the problem. This will certainly update the link the first time, but after subsequent scrolling of the pictures on the page, the links remain their original values. I need a way to permanently set all the links in each image. I try to do this all at once but I can't avoid the problem of the first image not getting assigned the first link (via overwriting "linkArray"). It must have something to do with the order of the page loading and the script running
    – Alex
    Commented Feb 28, 2013 at 21:48

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.

  • Alex: I'm looking to do the exact same thing. Can you provide more details on how you accomplished the override of the linkArray?
    – user32675
    Commented Aug 20, 2014 at 22:09
  • Hi Jim, sorry to say that I don't have access to that code anymore (job change). That being said all the info in the question and suggested answers should be enough to get you there. Put your jQuery script into a CEWP on the same page as your slideshow, manipulate the linkArray mentioned above to rotate the links to match up to the images. Overriding the existing array values should be as simple as assigning each new link string to the values at each array index. Then Google-fu to how to rotate an array and you should be on your way. Good luck!
    – Alex
    Commented Aug 21, 2014 at 6:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.