Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
add comment

3 Answers 3

up vote 3 down vote accepted

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.

share|improve this answer
    
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 Feb 28 '13 at 22:44
    
Sorry I didn't notice your mention of _spBodyOnLoadFunctionNames. I will try this out and get back to you. Thanks –  Alex Feb 28 '13 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 Feb 28 '13 at 23:19
    
@Alex, the answer has been updated. The idea here to override SlideshowObject object in order to provide additional logic. –  Vadim Gremyachev Mar 5 '13 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 Mar 6 '13 at 0:57
add comment

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.

share|improve this answer
    
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 Feb 28 '13 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 Feb 28 '13 at 21:48
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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