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!
91 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!
August 27, 2010 at 6:49 am
ravi
Christopher it’s really wonderful, that too it’s all using JavaScript without one line c# code
Regard Description, when I keep Description option, the description showing very adjacent to the figure,
Could you give some idea on how to show description in next line with Arial Font?
Currently I got solution by adding in front of the Description ,
Like Description any column to display, but I am not happy
I really appreciate if can throw some light on this
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.
January 4, 2010 at 8:07 pm
Bill
Christophe,
Awesome script! Any idea on when you will post the solution to adding captions to the pictures as well?
January 4, 2010 at 11:20 pm
Christophe
Bill, I’ll try to do this next month. I am quite busy this month with new projects and the upcoming SharePoint Saturday EMEA.
January 26, 2010 at 10:09 pm
Krishnan
Thanks Christophe. The script works great.
January 29, 2010 at 9:57 am
sambasivarao
I done this image rotator for my portal but i am facing one issue on this this is the image rotator is unable to rotate the images for every n seconds on IE 6.0 and below IE 6.0 browsers i need the script which should allow for all the browsers can you help me regarding this issue???
January 30, 2010 at 5:18 am
Christophe
Sorry, I’ve just done like the rest of the world – including Microsoft – ditch support for IE 6.
February 1, 2010 at 6:08 pm
phil
Thanks. I to modified it to work sequentailly. But other than that your code rocks. Thanks again!
February 20, 2010 at 10:08 am
manoj
This is superb and pretty simple to implement.
Adding trasition effects will make this implementation more perfect.
I am waiting for implementing trasition effects.
Thanks for all this.
February 20, 2010 at 10:56 am
Christophe
manoj, for transition effects a library like jQuery will work better than plain JavaScript. btw this is what we do in our live online workshops (slider, news ticker and image rotator).
March 5, 2010 at 1:39 pm
Rirhandzu
Hi I tried it and it works like a charm. Now my only problem its that it takes a bit longer to load the images! is the any way that we can fix that
March 8, 2010 at 6:57 am
Srini
Hi,
I want to override the method which is being used for “Save” event in editprofile.aspx in sharepoint 2010. Can any one tell me how to find the event or method which will generate the thumbnail of profile pictures ? please help me out.
March 11, 2010 at 9:04 am
Christophe
I am afraid this post is not the right place for such questions… Try the STP forum for example.
March 10, 2010 at 6:23 am
Caroll
Christophe,
The image rotation seems to work fine for us, but for some reason if we put a URL in the LINK field, it is getting duplicated in the description and when it tries to open the link the URL is added again after a comma. Any idea what might be causing this?
Thanks,
C
March 11, 2010 at 9:06 am
Christophe
No idea Caroll. What do you mean by “duplicated in the description”?
March 11, 2010 at 1:44 pm
Caroll
Christophe,
I figured out what was wrong. It had been setup with the Link column being a hyperlink column. Created a new column as text and everything works as designed.
In case anyone sees this and has the same problem, the hyperlink type of column has two fields (the URL and the Description). So, if you choose that type of field, it concatenates the description field with a comma after the URL.
Thanks for getting back and the good work.
One more question, is it possible to have an image appear as the page loads before the script enumerates the list?
Thanks again,
Caroll
March 16, 2010 at 10:30 am
Christophe
The generator uses a gears picture, you can replace it with an image of your choice. Just keep in mind that your picture won’t load imediately either (which is why I am using a lightweight icon).
March 18, 2010 at 10:57 am
PaulT
Hi Christophe,
Just wondering if the problem of adding or deleting photos (raised by Dwight in his post of 3 June 2009) had been resolved for us user types that have no coding experience?
Regards,
Paul.
March 19, 2010 at 6:09 am
Christophe
Paul, the answer is yes (hopefully). Stay tuned, I should publish an update on my blog by the end of the month.
March 19, 2010 at 9:14 am
PaulT
Hi Christophe,
Yes. The problem appears to be solved. I just have to close down the SharePoint site then open it up again, and problem gone.
Let me join the many others that have said how great your solution is. It really is very impressive and easy to implement. I have next to nil technical experience and was able to get the Image Rotator working with the URL feature.
I am certainly looking forward to the enhancements on your ‘to do’ list.
Like a few others I would also prefer a sequential cycle. I tried the code provided earlier by armycoder. Whilst it does work sequentially, the rotation stops at the last image. So another suggestion for your ‘to do’ list is to provide another option in the code generator for the rotation to be either ‘Random’, ‘Sequential stopping at last image’ or ”Sequential with auto restart’.
Keep up the fantastic work.
PaulT
March 20, 2010 at 4:26 am
Image Rotator Lite: your needs? « Path to SharePoint
[...] Web Part, Picture Library, SharePoint 2007 I am currently working on the next release of the Image Rotator that I plan to release this month. I have already identified a couple improvements that will make [...]
May 6, 2010 at 6:54 am
How to add an image rotator to SharePoint | Code-Journey.com
[...] SharePoint does not have a built-in image rotator, so after a little googling I found a nice solution from Christophe over at PathToSharePoint. [...]
May 26, 2010 at 2:47 pm
steve
Great tool – but can’t work out how to centre the images in the web part zone – is there an easy way to do that
Thanks
Steve
June 2, 2010 at 1:34 pm
Tony Phillips
Really great simple tool. The best use of javascript to read from a list that i have seen and very efficent.
It’s given me a few ideas about how to create flv players that no longer require xml playlist as this is automatically generated by the list.
Thanks for sharing your ideas and the inspiration,
Tony
June 4, 2010 at 4:58 am
Christophe
Thanks Tony, let us know what you come up with!
Also, note that you’ll find a more recent version in the user’s toolkit:
http://www.pathtosharepoint.com/sharepoint-user-toolkit
June 11, 2010 at 12:25 pm
Reuben
On the same page, is it possible to add two content editor webparts that display pics from two different pic libraries.
I was trying to add two webparts to two rotating images but only one web part works, the other one is loading for ever.
Anyone came across this error?
June 15, 2010 at 9:36 am
Christophe
Reuben, the latest version should do what you want:
http://www.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Image-Rotator-Lite.aspx
June 29, 2010 at 5:01 pm
Peter Allen
Christophe,
I have been using the image rotator and just this week I have been getting a null error. I have tested this on two sites where it was working on before and tried many changes, but I am getting null error still.
Anyone else see this issue happening for you?
Also, is there a limit to the number of images in a picture library?
WSS versions: 12.0.0.6529 and 12.0.0.6219
June 29, 2010 at 5:14 pm
Christophe
Peter: first time I hear such an issue – especially if it was working before.
I am not aware of a limit to the number of items either.
June 29, 2010 at 7:42 pm
Peter Allen
Christopher,
Figured this one out based on your email to me. It seems in this version of image rotator it is important to keep the default view unchanged. I compared it with a new picture library and restored the default view back to the default columns. That seems to have done.
Thanks.
June 30, 2010 at 4:57 am
Christophe
Peter, I would recommend to use the latest version (v2), which allows you to select a specific view:
http://www.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Image-Rotator-Lite.aspx
(see the context help on that page)
July 8, 2010 at 6:34 am
vijay
image rotator is throwing javascript error
July 8, 2010 at 6:52 am
Christophe
Impossible!
Try the latest version (v2), which provides more guidance:
http://www.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Image-Rotator-Lite.aspx
July 18, 2010 at 9:07 pm
SueW
I have a question from this page,
http://www.pathtosharepoint.com/Pages/ImageRotator.aspx – I see the image rotating but not in an authenicated environment. How is it working on your page? The “known issue” page says that the rotator won’t work as anonymous. Could you explain the steps to use the rotator on a public site without authenication? Or is this no longer an issue? Thank you – Sue
July 30, 2010 at 1:37 am
SueW
Hi Chistophe – do you have an answer for me regarding using the rotator on a public site? THX
August 3, 2010 at 2:06 pm
Christophe
Sue, you’ll need a data source that works with anonymous access. In my demo, I am using the picture library’s RSS feed.
August 19, 2010 at 2:01 am
DJM
Christophe, great work here! So, am I right in thinking then that you can use the RSS feed to provide the rotator to unauthenticated users on public website? I tried and it didn’t work but happy to try other things! Thanks.
August 19, 2010 at 2:35 am
Christophe
DJM, that is correct. You need to set up your feed to include the path to the picture, and you’ll need to adapt the script to read the RSS output.
July 27, 2010 at 7:54 pm
Tracey Nolte
When using ‘armyCoder’ s updated code to put the image rotator in sequential order, it works fine until the last slide and stops. Is there a way to make it go back to the begining and start over?
July 28, 2010 at 12:00 pm
Shweta
Hi,
Kindly tell me how can I display text description along with the image.
July 29, 2010 at 2:11 am
Christophe
Tracey and Shweta: the latest version should address your requests:
http://www.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Image-Rotator-Lite.aspx
August 27, 2010 at 6:58 am
ravi
Christophe thanks for the great post.
when I keep Description option, the description showing very adjacent to the picture,
Could you give some idea on how to show description in next line with Arial Font?
Currently I got solution by adding in front of the Description ,
Like Description any column to display, but I am not happy
I really appreciate if can throw some light on this
August 19, 2010 at 4:20 pm
Nee
Christophe,
I would like to be able to select what images to be displayed randomly. How should I go about this. Please I am new to SharePoint and development world, so be patient with me.
Thanks,
Nee
August 19, 2010 at 5:28 pm
Nee
Christophe,
I am trying to use the updated rotator. But when paste in my picture library url, I get the error:
<>
Below is my URL;
http://shpoint-dev:port#/_layouts/listedit.aspx?List=%7B5BA4054F%2D6AA2%2D4E4F%2DA386%2D8F9AE7C3A73A%7D
Thanks for your help
Nee