Can’t wait to get your own image rotator? Go there!
Last year, when I published a post about displaying a random picture on a SharePoint page, I left some unfinished business. At the end of the post, I was suggesting some improvements, but I didn’t provide the related code.
So I have decided to build an image rotator generator: simply go to this page, choose your settings, and get your own script. You can then add it to a SharePoint page using a Content Editor Web Part, as usual.
One key feature of this image rotator is that it allows you to use pictures optimized for the Web, instead of the original pictures. I’ll provide more details on this in a dedicated post.
Another plus is the option to choose the refresh frequency, using the JavaScript setInterval function. This is something I had already mentioned in a SharePoint forum 3 months ago.
I am already thinking about future enhancements, for example:
- make it work for anonymous users, not just in authenticated environments
- add transition effects
- add a description to each picture
There is still a lot of room for improvement, so your feedback is welcome!
48 comments
Comments feed for this article
June 3, 2009 at 7:36 am
Pls
The script doesn’t work if images are in folders
June 3, 2009 at 10:12 am
Christophe
Thanks for the feedback, Pls. That’s right, to make it work you need to create a flat view of your picture library (select the “view without folders” option), and make it the default view.
June 3, 2009 at 1:15 pm
Paul Grenier
The code has validation problems:
Error:
Implied global: ActiveXObject 5 8, PictureURL 22, XMLHttpRequest 2, alert 10 18, document 22, setInterval 16
Problem at line 13 character 127: ‘StateChange’ was used before it was defined.
}xmlhttp.onreadystatechange=StateChange;xmlhttp.open(“GET”,PictureLibrary…
Problem at line 16 character 13: Implied eval is evil. Pass a function instead of a string.
setInterval ( “DisplayPicture()”,5000);;
Problem at line 16 character 52: Unnecessary semicolon.
setInterval ( “DisplayPicture()”,5000);;
June 5, 2009 at 9:15 am
Christophe
Thanks Paul, very helpful. Hopefully all is clean now.
June 3, 2009 at 8:16 pm
Dwight
This tool is awesome as someone who know very little about web design I was able to add to website I was working on and get it running pretty quickly. Thanks! One minor inconvenience – when you add or subtract a photo from the source library, the coding still pulls in the old _vti_bin/owssvr.dll XML info from pict library. Thus, even though you deleted a photo it was still being pulled leading to the red X no image symbol showing up. I finally figured out how to solve by going to the _vti_bin/owssvr.dll page where the old image files/names were still listed in date and hitting refresh to get new data with new version of picture library file. If there was some programming that could be done to have the page always seek out refreshed _vti_bin/owssvr.dll data that would be great. Any way thanks again and so far so good.
June 5, 2009 at 1:39 am
Links (6/4/2009) « Steve Pietrek – Everything SharePoint and Office
[...] Image rotator: build your own! [...]
June 5, 2009 at 9:19 am
Christophe
Does anybody have advice on how to deal with SharePoint xml caching issues?
Thanks for reporting the issue Dwight.
June 15, 2009 at 9:43 pm
SPbb
Christophe,
This is awsome man! But I’m still wait the caching issues to be fixed.
THANKS ALOT MAN!
KEEP UP THE GOOD WORK!
June 23, 2009 at 2:18 pm
Yasina
excellent. the rotator rocks. But is it possible to display the images in sequential order?
June 24, 2009 at 7:07 pm
Liz
Christophe,
I clicked on this link and made it to the homepage where you have the scrolling news that you have conncected to the “Updates” list. Do you have any documentation for this, or perhaps would you be willing to share the code?
Liz
June 29, 2009 at 6:54 pm
Jephthah
Christopher – Very neat solution indeed. One question in adition to the caching issue is do you think it makes sense to add another column (with info such as Name of the picture) to be added to the script when the image is pulled? So a name is show right underneath the picture.
Thank you!!
June 30, 2009 at 6:39 pm
John
Great Image Rotator! love it! one issue though.
It didn’t work on Chrome. However, it does work normally on IE (8) and Firefox.
July 1, 2009 at 3:05 am
Christophe
Thanks for the feedback John. I confirmed the issue and I’ll work to fix it.
July 8, 2009 at 7:10 pm
Kevin Hughes
This is a wonderful set of code.
So…uh…when do you think you might be able to add the ability for it to pull a description with the image so images can have a caption?
Also, another enhancement would be to be able to add a URL column to the picture library and each image have that url as it’s clickable target.
July 31, 2009 at 5:41 pm
Renee
I having difficulty getting your code generator to work for the image rotator.
I continually get the error message: “The URL of the picture library settings page is incorrect”
This is the URL: http://it/Departments/administration/Team Images/Forms/AllItems.aspx .
Any advice?
July 31, 2009 at 5:43 pm
Kevin Hughes
The URL is incorrect.
The instructions state that the URL you need is from your settings page of the picture library.
Select Settings | Picture Library Settings; you’ll be sent to the settings page of the picture library. Copy the URL in the address bar. Then plug that into the generator.
July 31, 2009 at 10:05 pm
Renee
Thanks. I was using the URL as indicated on the list info.
Works like a charm now!
August 15, 2009 at 8:27 am
Christophe
Thanks for helping out Kevin
I have implemented one of your suggestions (the clickable image), hope you like the result!
August 18, 2009 at 1:55 pm
larry
good day Christophe,
Been some time sine I have had a change to catch up with your work. Today I was looking for a solution and again you have something close to what I need. I was looking for something that could rotate a background image. I would like to keep the functionality you have here pulling from an image library.
I know I can set the background image here, but I want to make this dynamic. Is this possible?
[style]
.ms-bodyareaframe {
background-image: url(‘/Site%20Images/Graphics/back09.jpg’);
background-position: bottom right;
background-repeat: no-repeat;
}
[/style]
August 24, 2009 at 6:13 pm
Dean
If you want to create a filtered subset of the photos in a Picture library, you can create a new view, then go to Modify View page and carefully copy the section of the url that begins with ‘&View=’ and ends with the last value before ‘&Source’. This view parameter can then be pasted into the script immediately after the List parameter.
HTH
Dean
August 24, 2009 at 7:02 pm
Dean
Any progress on adding the title and/or description fields from the photo library? Anything we can do to help or tips on how to do it ourselves?
August 24, 2009 at 7:26 pm
Dean
If I put to CEWPs on the same page, the 2nd one does not display the images, any idea why not?
TIA
Dean
August 26, 2009 at 2:14 am
Christophe
Dean, in the script you’ll see that an id is assigned to the container of the image rotator. If you want a second one, you’ll need to modify the code to assign another id to the second container.
September 21, 2009 at 1:29 pm
Doug
Christope, I am in the same boat Dean is in. I am trying to have two rotators in the same webpart, however, only the second rotator is getting displayed. I changed the element ID in 4 locations but to no avail. Do you have any other advice? Thanks for your help and this is a great script! Keep up the great work!
September 23, 2009 at 3:27 pm
Doug
Hey Christope, I actually figured out what the problem is. Yes you need to have all of the elements have a unique ID but you also have to rename the functions that are called in the script (DisplayPicture and ClickImage), and the xmlhttp object at the end. Hope this helps.
August 24, 2009 at 7:59 pm
Ben
Is there any way to pull a description with the image so images can have a caption below them? That way our users could click on an image and go right to a page.
Thanks – great work.
October 16, 2009 at 1:42 pm
Beth
Christopher. I love this; it is awsome! It works great! I would love some help on two things if you wouldn’t mind.
1. Can we add a caption column that shows with the slideshow so that users can read a caption below the photo?
2. I added a new photo to the library and assumed it would appear in the slideshow; it did not. How do we add new photos and delete the old?
Thanks so much for creating this wonderful tool!
October 17, 2009 at 3:10 am
Christophe
1. This shouldn’t be too difficult, it’s just a matter of pulling another field (and finding the time to work on this…)
2. This could be a caching issue. You may have to close the browser, or wait for 20-30 min, for the changes to take effect.
October 18, 2009 at 10:00 pm
Anonymous
Thanks for your quick response Christophe. You were right about the caching issue, the new picture is showing now.
If you add the caption feature would users need to rebuild their sideshow again? I will be sure to check back for the update from time-to-time. I look forward to it.
Thanks so much for all the time and work you put into building and sharing your site and knowledge!
October 21, 2009 at 11:14 am
Christophe
The caption will modify the current script. If you are using the same script on several pages, a good practice is to store the script in a text file in a central place, and link all CEWPs to it.
October 23, 2009 at 4:54 pm
armyCoder
Great Tool! however I too need the ability to display the images in sequential order, so I thought I’d share my findings….
To make the images display in order, I made to make the following mod to the script:
add the var definition at the top (var SelectedItem = -1;) used -1 so it would start at 0 instead of 1
changed:
var SelectedItem = Math.floor(Math.random()* ListItems.length);
to:
if(SelectedItem <= ListItems.length){SelectedItem++; }else{SelectedItem = 0;}
;
now everything displays in the order it is put into the library. Thanks again for the great tool, hope this helps someone.
armyCoder
October 24, 2009 at 10:57 am
Christophe
Thanks for sharing
October 30, 2009 at 5:05 pm
KP
Hi Christophe, thank you for sharing your excellent work. I’m trying to display a number of image rotators from different picture libraries, one of them is called CORP.
I’ve following the guidlines from Dougs post on 23rd Sept as best I can but when I add a second CEWP both of them display the same picture library.
I’ve appended “_CORP” to the element ID (PicturePlaceholder_CORP) in 5 places within the script, I’ve also appended “_CORP” to each of the functions (DisplayPicture_CORP and ClickImage_CORP) in both places on the script but it still doesn’t work. Am I missing something? My dev skills leave a lot to be desired and any information would be greatly appreciated,
thank you,
KP
October 31, 2009 at 3:22 am
Christophe
Added to my to-do list: include in the formula generator an optional id. This will allow to assign different ids when several rotators are used on the same page.
November 2, 2009 at 5:24 pm
Jane
Awesome script!
Also, thank you armyCoder for the ordering. I really needed them to display in order
November 3, 2009 at 7:13 pm
MY
This is great! I would love use this for my company’s internet site, but the limitations listed prevents me from doing so.
My wish list:
Allow anonymous users to view (since it is a public website)
Add alt tags (for accessibility)
Thank you!
November 12, 2009 at 4:59 pm
jaguar
This is a greate staff. Thanks so lot.
November 13, 2009 at 10:51 am
Sharan
I can’t seem to get links appearing for each picture in the rotator. i have a field called “Link” in the default view it is a single line text field and has the URL address in there but when the images rotate the link is not there. can anyone help?
November 19, 2009 at 1:35 am
Christophe
Sharan, feel free to send me the script you got and I’ll take a look. Also make sure you’re using the correct letter case in your column name.
November 13, 2009 at 8:14 pm
Dan Walker
Strangely enough, about half of the machines in our organization can view the rotating images. For the rest of the machines, the gears graphic goes round and round and they never see the pics. Any thoughts?
November 19, 2009 at 1:36 am
Christophe
Dan, any progress on this? Is the browser the same on all machines?
November 13, 2009 at 8:52 pm
cds
Worked great! I would love to know how to display descriptions or possible other fields in the list.
November 19, 2009 at 1:38 am
Christophe
Thanks
. Descriptions are in my to-do list, stay tuned for an update in the beginning of next year.
November 19, 2009 at 8:43 am
Sharan
Hi Christophe,
this is my script…
[script removed per poster's request]
Please help.
November 20, 2009 at 10:15 am
sharan
Thanks Christophe for your help. the image rotator is now working. i had changed the column name and this had not changed correctly in the script. having viewed the source data in the browser i was able to see the correct “ows_…” column name and copied this into my script and it worked!
November 22, 2009 at 7:55 am
Christophe
You’re welcome Sharan! Changing column names is tricky, as SharePoint modifies the display name but not the encoded one.
November 25, 2009 at 5:36 pm
JD
I put the image rotator on our site and people really seem to like it…I have received a lot of complements.
Feedback:
1. I too would love to be able to display a caption/comment/description along with the pictures.
2. Sometimes the randomness seems to be stuck in a small subset of the pictures within the library. It will show the same group of 5 or 6 pictures several times before moving on to another batch. I don’t want to show the pictures sequentially because people may only stay on the home page long enough to see a few of them.
Is there a way to start on a random picture, but then continue sequentially from that point forward? This way the content would always seem fresh and dynamic and there would be no picture repeats until the list is exhausted.
If these things are do-able that would be fantastic…but if not, Christophe, you still develop great stuff. Keep up the great work!!
November 26, 2009 at 2:48 am
Christophe
Thanks for the feedback! I am working on 1/, and it should be added in the beginning of next year. The behavior you experience in 2/ is weird, I don’t know what’s going on. Adding more display patterns is also on my to-do list for the beginning of next year.