Image rotator: build your own!

Posted on by

ImageRotator

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!

134 thoughts on “Image rotator: build your own!”

    • 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.

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

  3. 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.

  4. Pingback: Links (6/4/2009) « Steve Pietrek – Everything SharePoint and Office

  6. Christophe,

    This is awsome man! But I’m still wait the caching issues to be fixed.

    THANKS ALOT MAN!

    KEEP UP THE GOOD WORK!

  7. excellent. the rotator rocks. But is it possible to display the images in sequential order?

  8. 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

  9. 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!!

  10. Great Image Rotator! love it! one issue though.

    It didn’t work on Chrome. However, it does work normally on IE (8) and Firefox.

  11. 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.

    • 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.

  13. 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]

  14. 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

  15. 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?

  16. If I put to CEWPs on the same page, the 2nd one does not display the images, any idea why not?
    TIA
    Dean

    • 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.

      • 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!

      • 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.

  17. 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.

  18. 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!

    • 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.

      • 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!

      • 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

  19. 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.

  20. 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

    • tried armyCoder’s sol’n – but the display stops after one round, “Error on page” at bottom.
      Didn’t know exactly where “at the top” meant for placing
      var SelectedItem = -1;
      so I tried in about 10 places – still, the display wouldn’t continue after just one round. This is the code I used:

      /* Random Picture Questions and comments: xyz.com */var PictureLibraryURL = “/coi/QACP/_vti_bin/owssvr.dll?Cmd=Display&XMLDATA=TRUE&List=%7BE5A19097%2DFB7F%2D4D49%2D8CBF%2DE19C9636C260%7D”;function DisplayPicture(xmlhttpobject){var xmlDoc = xmlhttpobject.responseXML;var ListItems = xmlDoc.getElementsByTagName(“z:row”)||xmlDoc.getElementsByTagNameNS(“*”,”row”);if(SelectedItem <= ListItems.length){SelectedItem++; }else{SelectedItem = 0;};
      PictureURL = "/" + ListItems[SelectedItem].getAttribute("ows_RequiredField");PictureURL=PictureURL.replace(/\.([^\.]+)$/, "_$1") + ".jpg";PictureURL=PictureURL.replace(/\/([^\/]+)$/,"/_w/"+"$1");document.getElementById("PicturePlaceholder").src= PictureURL;}try {var xmlhttp = new XMLHttpRequest();} catch(e) {try {var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");} catch(e) {try {var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch(e) {alert("Your browser does not support XMLHTTP.");}}}xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4){if (xmlhttp.status==200){setInterval ( "DisplayPicture(xmlhttp)",3500);}else{alert("Problem retrieving XML data");}}};xmlhttp.open("GET",PictureLibraryURL,true);xmlhttp.send(null);

      Any suggestions?Adam

  21. 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

  22. 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.

  23. Awesome script!

    Also, thank you armyCoder for the ordering. I really needed them to display in order 🙂

  24. 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!

  26. 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?

  27. 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?

  30. 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!

  32. 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!!

    • 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.

  33. Christophe,

    Awesome script! Any idea on when you will post the solution to adding captions to the pictures as well?

  35. 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???

  37. 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.

  38. 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).

  39. 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

  40. 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.

  41. 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

      • 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

        • 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).

  42. 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.

  43. 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

  44. Pingback: Image Rotator Lite: your needs? « Path to SharePoint

  45. Pingback: How to add an image rotator to SharePoint | Code-Journey.com

  46. 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

  47. 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

  48. 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?

  50. 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

    • 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.

  51. 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.

  53. 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

    • Hi Chistophe – do you have an answer for me regarding using the rotator on a public site? THX

        • 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.

        • 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.

  54. 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?

    • 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

  57. 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

  59. I cant seem to get to any of the image rotators (generator or lite version) is there a problem with your site?

  60. It’s ok I found it via the forums, this is really good work thanks!

    If I was to ask for one thing to improve it, it would be pretty crossfades between images! 🙂

  61. You might add this immediately before the setInterval() call:

    DisplayPicture(xmlhttp);

    …this should remove the “apparent” 2 second load time. I haven’t thoroughly tested it, but it seems to do the trick.

  62. Hi Chris,

    I have been using ur rotating image webpart from the first version on and i am checking everyday day to day updates on it. But i could not get a chance to see ur latest version thing. but when i am using to gererate the script, it’s giving me an error.

    ALL i am using is giving the website url and accept licensing and hit generate.

    I am getting this error in the file it gerenate :::::::::: The URL of the view settings page is incorrect

    Do you have any idea why is it so. But ur first version is working fine. Am i missing something i am giving this url in the form

    (example)::::::::
    http://rootsite/subsites/Test/_layouts/listedit.aspx?List=%7B5D36CB20%2DAC24%2D4FBF%2D8F8C%2D880B74AA76D3%7D

    Why it so can you please help me out with this … I am in need of this webpart and its a kind of urgent requirement. Please help me.

  63. I like this but,
    Why this image rotator web part takes time to load first image from the picture library….

  64. Christophe,

    First i would like to thank you and the other members of the site for all the endless time you guy’s and gal’s put into passing on the knowledge that help others grow in this field.

    Happy New Year…!

  65. The image rotator code worked perfectly for me – thanks so very much – I was trying to get exactly that from our consultants for weeks with no success 🙂

  66. The image rotator code worked perfectly for me – thanks so very much – I was trying to get exactly that from our consultants for weeks with no success 🙂

  67. Sorry for my ignorance but where do I add the generated script on my SharePoint site?

      • Christophe,

        Thanks for an awsome tool. I’m like many others here, I’d like to show the names next to the photos…two issues:
        1- after adding a column, how do I make the names show on the column list next to the photos?
        2- currently showing the picture name along with the .jpg extension, how to show the names on step1 above and below the photo instead of next to it (making the WP box expand and retract depending on the name)?

        Thanks,
        Osman

  68. I’ve uploaded the .txt file to the picture library, and referenced it in a CEWP but I’m receiving a 404 and Problem retrieving XML data errors. I’ve tried this in the picture library and on the home page – what am I doing wrong?

    • Are you athenticated when you open the page? This won’t work with anonymous access. Also, double check your link (and use the latest version of my script).

  69. Hi. I was looking for a code for the image rotator in Sharepoint. My website has images in all the pages. So i basically need only 5 pictures from the image library to be used for the rotator in the homepage. According to your script the bunch of images in the library is being shown. Can you please guide me in the script on how to give only the selected 5 images in a sequential manner.

  72. Hi Chritophe, I am trying to get to v2 of image rotater , but whenyou click on the URL, next page comes with message that this page is not activated and it tries to divert but than next page comes page says it cant be displayed. I would appreciate if you could advise how i can get to v2 of image rotater.

  73. Hello,

    One of my requirements is to be able to manage which pictures are displayed in the banner using From and To dates.

    Basically, the picture library has From and To columns, and a picture is displayed only if From < Today < To. Also, if From is not specified, the picture is never displayed; if To is not specified, the picture is displayed forever (provided From < Today).

    I think this is a common requirement and I could share my solution.

    Since version 2 of this great tool allows using any view, it can be done without modifying the generated script.

    Create a new view and name it "Displayed Pictures" (or whatever you like). Set the filters in the following order:

    a. "To" is greater than or equal to "[Today]"

    OR

    b. "To" is equal to ""

    AND

    c. "From" is less than or equal to "[Today]"

    Note: SharePoint 2007 evaluates it the following way : ((a OR b) AND c) and filter c is evaluated to false if From is not specified.

    Obviously, the "Displayed Pictures" view must be used as the source for the banner.

    Note that the script may fail if the filter selects no picture. You may want to modify the script to handle this situation.

    In the onreadystatechange handler, check the Items.length before calling DisplayPicture and setInterval:

    var Items = (xml.getElementsByTagNameNS) ? xml.getElementsByTagNameNS("*", "row") : xml.getElementsByTagName("z\:row");

    if (Items.length > 0) {
    DisplayPicture(IRi, Items);
    if (sec > 0) {
    var Refresh = function (d, i, t) {
    setInterval(function () {
    DisplayPicture(d, i); }, t * 1000); };
    Refresh(IRi, Items, sec);
    }
    }

    Xavier

  75. Hello Christophe,

    I used the image rotator in my site and for some reason it won’t rotate more that 41 images. The album has a little more than 200 pictures. Is there a limit on the number of library items?

    Thank you!!

    Gretel

  76. Hi Chirstophe,

    Thanks for the script–hoping to get it up and working, however when I input the script, it gives me an XML data error. I believe you said something about authenticating in a previous thread but I’m not sure what that means or how to do it? Greatful for any help.
    Thanks!!!

  77. Christophe, thank you tremendously for the script! Could you tell me if its possibly to modify the script to be able to display a different title (short line of text) under each picture? I was thinking it would work to add a field like the [Link] for the clickable image, but I am just not up on code enough to be able to write it. THANKS!

  78. Your post is fabulous . I have implemented on test server its working fine . But can we apply paging to images instead of this automatic slide show. if this could be possible then this surely compete share point default image slider web part.
    any suggestion in that context.

  79. Hi, thanks so much for this code. It works great, my only issues are the descriptions following the image instead of a break and the description text is underlined. anyway to fix these?
    Thank you!

  80. Hi! This post couldn’t be written any better! Reading this post reminds me of my old room mate! He always kept talking about this. I will forward this page to him. Fairly certain he will have a good read. Many thanks for sharing!

  82. i tried with the default(already in the address bar) address i get the “XML not found” every time i load the page. That’s because i tried changing the address after it was implemented, but didn’t work, it wont let me use the edit view address, keeps telling me its wrong.

    • These are custom renderings that I make on demand for my customers or online workshops. If you are interested, read about the SPELL program on my blog, it’ll have plenty of these!

  85. No matter what link I put in for the picture libary settings URL, when I click on “Generate Script” I get a message popup that says “The URL for the picture library settings page is incorrect.”

Comments are closed.