Comments on: Images slideshow in SharePoint 2007 using jQuery

By: Waldek Mastykarz

Waldek Mastykarz — Mon, 16 Jan 2012 08:55:03 +0000

@Martin: I'd suspect that the jQuery selector is picking too much (more than images). I'd suggest you set a breakpoint in the JavaScript and try to find out what's going on.

By: Martin Kliesek

Martin Kliesek — Fri, 13 Jan 2012 20:58:56 +0000

Hi Waldek,

first of all thanks for the great code, really appreciate it.
I'm getting one small issue with the slideshow, it displays pictures just fine, however, after a picture fades, a box with red cross is displayed instead of another picture(you know the usual icon, that is diplayed if you for example disable picture loading in a browser etc.), then again a picture loads propperly, and continues in this pattern.
I pasted your code without any changes, and tried this with multiple sets of pictures, still the same. Do you have any suggestions on how to fix this issue?

By: mark

mark — Thu, 08 Dec 2011 23:54:01 +0000

I've gotten this excellent code to work.

As for the issue that several commenters have mentioned of making each image in the slideshow have a link, since I created a new picture library, I had to add a new column (Link) to hold the link I want for each image.

But the above code is written for a summary view of the list webpart for whatever image library you're using. The table class ms-summarystandardbody applies to summary views, which don't show many columns.

I made a list view of my image library which DOES display both the thumbnail (which I think is needed for this javascript?) and my Link column. However, when I apply my new view to the list webpart of the image library on the slideshow page, the slideshow breaks because the table class ms-summarystandardbody is no longer rendered on the page, so substitutions need to be made in the code.

When I view the source of my changed page, the table in question has two classes (I'm not at my Sharepoint machine now, so I don't recall the names, though I believe one was ms-listviewtable and the other was something like ms-basicwebpart).

In any case, just to see if I could get the slideshow that was working with the summary view to work with my list view of the same library, I tried altering the two instances of "table.ms-summarystandardbody td.ms-vb2 a" to be "table.ms-ms-listviewtable.ms-basicwebpart td.ms-vb2 a”, but that didn’t work (I of course used the real class names).

I tried several variations, but couldn’t get it to work. Yet. I’ll be back at it in a couple of days. And then when I get that to work, I’ll have to somehow grab the urls and then add them to the imagesList (or maybe a different urlList?) and then wrap the urls around the existing this.wrapper.html…

By: Oliver V

Oliver V — Thu, 27 Oct 2011 08:02:18 +0000

Very neat script Waldek, hadn't thought of using the list web part as the slideshow itself! I stumbled into the majority of the issues listed by others though managed to overcome them with the assistance you've so far provided.

There is one that I am vexed at though: I am unable to replicate Libbys random generation of a picture using the example you posted. I have linked the jquery.shuffle.js script into the code however am unable to shuffle imagesList – I suspect I may be in entirely the wrong ballpark?

By: Waldek Mastykarz

Waldek Mastykarz — Sat, 24 Sep 2011 10:26:20 +0000

@Tiffany: you could either use CSS or hard-code the image size in the script in the line where the tag is being rendered:

this.wrapper.html('

By: Tiffany

Tiffany — Fri, 23 Sep 2011 22:30:57 +0000

Hi Waldek,
Thanks for the code. Exactly what I was looking for. I've never used jQuery before. Question: I have images of different size. How do I modify your code to set all images to a fixed size of 150px width and 100px width?

By: Waldek Mastykarz

Waldek Mastykarz — Sat, 03 Sep 2011 08:21:54 +0000

@Mary: You should try some jQuery UI library extensions. It shouldn't be too difficult to add on top of the slideshow.

By: Waldek Mastykarz

Waldek Mastykarz — Sat, 03 Sep 2011 08:19:14 +0000

@Ana: Are you using default branding or something customized? Please note that the jQuery selectors responsible for picking up images depend a lot on branding so if you're using a custom Master Page and/or Page Layout you would have to modify the selectors to support your branding.

By: Mary

Mary — Fri, 02 Sep 2011 20:21:33 +0000

Hi Waldek, thank you for your help, I need to show the slide in the banner, any idea?

By: Ana

Ana — Fri, 02 Sep 2011 16:18:02 +0000

Hi Waldek, thank you for help, I followed your steps but this code isn't working for me. I have a picture library, i have added a List View Web Part, after a Content Editor Web Part and finally past your code at Source Editor and Nothing, where is the wrong?