Sometimes I need to have an automatically scrolling slideshow displaying on a page. It would be easier to add an Image Library WebPart onto the page and allow the slideshow to create itself. This jQuery concoction allows just that. 

I created this at a Trial-and-Error pace to see what was possible. I knocked it out in about a day of see what was best and how to get consistant results. I call this “pt.1” because there may be some quirks that arise AND i wanted to include additional features; such as a “# of # images” display, navigation buttons, and a next-image-preview thumbnail section.

Just pop in an Image Library WebPart with the name of the WP containing “”, this is the trigger for the slideshow. Then add the “Title” and “Description” fields in the current view for the slideshow to work properly. These two fields are consumed and displayed along with the images.

Features:

• Filterable content through views
• Scheduled display times
• Automatically scrolling images
• Displays default “Title” and “Description” fields for appropriate images.

Requirements:

• Image Library Web Part on the current page.
• Content Editor Web Part on the current page
• The title of the Web Part must have the word “” in order for the script to target the images.
• Displaying the “Title” and “Description” title.
  • Add this in the list view settings
  • You can add filtering, item limits, and more to the list view to control which image displays.

Limitations:

• One image slider per page.
• User controls not implemented
• Removal of the slideshow requires removal of the Content Editor Web Part

Installation:

1. Edit the current page and insert the image Library of your choice as well as a Content Editor Web Part
 



2. Edit the options of the Image Library
   1. Change the Selected View to “All Pictures”
   2. Add the text to the title of the

      

3. Click Apply then OK.
4. Add a Content Editor Web Part to the current page
   1. Add the script below
   2. Choose the option Hidden in the property pane of the web part.

      

5. Click Apply then OK.
6. Slideshow should appear and start automatically.

Removal:

1. Edit the current page
2. Delete the Content Editor Web Part that contains the slideshow script
3. Modify or remove the image library web part.

Script

{                 background-color:#e4e4e4;                        padding:10px; } #image_slider_wrapper, #image_slider_wrapper img {                 width:500px; } #image_slider_detail_wrapper {               font:11px/1.4em Verdana, Helvetica, sans-serif;                 height:20px;                 padding:5px;                 margin-right:-20px; } #detail_title {                                                          font-weight:bold; }</style> // <![CDATA[ javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”> // ]]> <script type=”text/javascript”> $(document).ready(function() {                 var duration = 3000;     var delay = 2000;                 var intervalObj;                 var currentImg = 0;                 var imgWP = $(‘td[title*=”“]’).parentsUntil(‘td[id*=”MSOZoneCell”]’);  //Grab the image webpart.                 var imgTitleLocation = $(‘td[id*=”MSOZoneCell”]:has(td[title*=”“]) table.ms-listviewtable tr.ms-viewheadertr th.ms-vh2:has([title*=”Title”])’).index(); //Which column is the Title located?                var imgDescLocation = $(‘td[id*=”MSOZoneCell”]:has(td[title*=”“]) table.ms-listviewtable tr.ms-viewheadertr th:contains(“Description”)’).index();                //Which column is the Desc. located?                                                              var imgTitles = $(‘td[id*=”MSOZoneCell”]:has(td[title*=”“]) table.ms-listviewtable tr[id*=”row”] td:nth-child(‘+imgTitleLocation +’)’).css(“background-color”,”green”);                var imgDescs = $(‘td[id*=”MSOZoneCell”]:has(td[title*=”“]) table.ms-listviewtable tr[id*=”row”] td:nth-child(‘+imgDescLocation+’) div’);                var imgThumb = $(‘td[id*=”MSOZoneCell”]:has(td[title*=”“]) table.ms-summarystandardbody td.ms-vb2 a img’);     //Grab the images if its in a thumbnail list view.                var imgLink = $(‘td[id*=”MSOZoneCell”]:has(td[title*=”“]) table.ms-listviewtable td.ms-vb-icon a’); //Grab the images if its in a links list view.                if (imgLink.length !=0)                    {                                             //Link image,title, and desc. array.                                           imgLinkArray = new Array(imgLink.length);                                 imgTitleArray = new Array(imgTitles.length);                                 imgDescArray = new Array(imgDescs.length);                                 var i = -1;                                              imgLink.each(function() {                                                                                             imgLinkArray[++i] = this.href.replace(“about:”,””);          //Array of the images.                                                                   });                                 var i = -1;                                              imgTitles.each(function() {                                                 imgTitleArray[++i] = this.innerHTML; //Array of the titles.                                 });                                                           var i = -1;                                              imgDescs.each(function() {                                                 imgDescArray[++i] = this.innerHTML; //Array of the descriptions.                                 });                                                           }                              imgWP.parent().html(‘ src=”” alt=”Images”/> ‘);  //Create the image wrapper inplace of WP .                 $(‘#detail_title’).text(imgTitleArray[0]);                 //Set the first title.                 $(‘#detail_des’).text(imgDescArray[0]);                                //Set the first desc. $(‘#slider’).attr(“src”,imgLinkArray[0]);  //Set the first image.                 intervalObj = window.setInterval(showImage,duration + delay);                  function showImage(){ //Show the image, title, des for each image found.                                                                                                          $(‘#slider’).attr(“src”,imgLinkArray[++currentImg]);                                $(‘#detail_title’).text(imgTitleArray[currentImg]);                                 $(‘#detail_des’).text(imgDescArray[currentImg]);                                 if (currentImg == imgLinkArray.length-1)                                 {                                                currentImg = -1;                                 }                                              }; }); </script>