locked
Scrolling Pictures RRS feed

  • Question

  • Hi All

    Is there an easy way to show photos in scrolling manner?

    I have about 25 team members photos that I like to show them scrolling from right to left under the title bar. I have a text scrolling under the main title and I wanted the pictures to show below it. I can make all photos show in one spot one at a time, but I need to show them scrolling continuously. Any direction is greatly appreciated. All photos are currently stored in a picture library.

    Thanks,

    Oz

    Tuesday, August 16, 2011 6:04 PM

All replies

  • Hi Oz,

    I have used the ready-made scripts from this site for rotating banner images.

    http://www.pathtosharepoint.com/Pages/ImageRotator.aspx

    Please try this and see if this can fit your requirement.

    Hope this helps

     


    Thanks & Regards,
    Kamlesh | Blog | Twitter | Posting is provided "AS IS" with no warranties, and confers no rights.
    Tuesday, August 16, 2011 6:15 PM
  • Thanks for the link. That's what I were able to accomplish initially (pictures rotate in one box). But I need all photos to scroll across...so you will be able to see 6-8 pictures scrolling across at the same time in the same order.

    Thanks,

    Oz

    Tuesday, August 16, 2011 7:47 PM
  • Hi NotNull,

    I use $().SPServices to pull images from an image gallery (Photo Library) in our farm. Keep in mind that each photo has the same prefix to make it easy to pull. There are some minor things you'll have to adjust, but this code should help.

    If you've never used SPServices, it's wonderful. The documentation is good, but the discussion forums are really helpful if you get stuck. Here's the documentation:

    http://spservices.codeplex.com/wikipage?title=GetListItems&referringTitle=Lists

    For the code, make reference to the jQuery library (either a local or hosted solution- personally I prefer local) , the SPServices library, then jQuery cycle.

    http://jquery.malsup.com/cycle/

    Once you do that, add a script tag to your page (or CEWP) and plop the code in.

     

    	$().SPServices({
    	
    		operation: 'GetListItems',
    		listName: '** Your List Name or GUID **', 
    		CAMLViewFields: '<ViewFields><FieldRef Name="Title" /><FieldRef Name="ows_FileRef" /></ViewFields>',
    		completefunc: function(xData, status){
    		
    			$(xData.responseXML).find("[nodeName='z:row']").each(function(){
    				
    				var getimage= $(this).attr("ows_FileRef").substring( $(this).attr("ows_FileRef").indexOf("#") +1 );
    				var imageurl= url + '/' + getimage;
    				var random= Math.round(Math.random()*imageurl.length);
    				var newnumber= new Number(0);
    			
    				if(random < 10)
    					random= newnumber.toString() + random;
    					
    				var randomurl= url + '/' + getimage.slice(0, 19)+ 'cmds' + random + '.jpg';
    				
    				$('<img/>').appendTo('#imagecontainer').attr({
    					'src': randomurl,
    					'alt': '',
    					'width': 500,
    					'height': 350
    				});
    				$('#imagecontainer').cycle({
    					fx: 'scrollLeft',
    					speed:2000,
    					timeout: 7000
    				});
    			});
    		}
    	});
    

     



    Tuesday, August 16, 2011 9:30 PM
  • Thanks psdMark

    What changes do I have to make to the pictures? How do I reference the jQry library/cycle? What if I don't to show the pictures randomly, instead in a scrolling mode in the same order as stored according to pic name?

    Thanks,

    Oz


    Wednesday, August 17, 2011 3:31 PM
  • Go to http://jquery.com/ and download the minified library and save it into a document library. In the header of your page add this: 

    <script type='text/javascript' src='** your reference path (/js/jquery-latest.js) **'></script>

    <script type='text/javascript' src='** your reference path (/js/jquery-cycle.js) **'></script>

    Make sure the jquery reference is first. If you don't want random images, you can just use this: 

    $().SPServices({
    	
    		operation: 'GetListItems',
    		listName: '** Your List Name or GUID **', 
    		CAMLViewFields: '<ViewFields><FieldRef Name="Title" /><FieldRef Name="ows_FileRef" /></ViewFields>',
    		completefunc: function(xData, status){
    		
    			$(xData.responseXML).find("[nodeName='z:row']").each(function(){
    				
    				var getimage= $(this).attr("ows_FileRef").substring( $(this).attr("ows_FileRef").indexOf("#") +1 );
    				var imageurl= url + '/' + getimage;
    
    				$('<img/>').appendTo('#imagecontainer').attr({
    					'src': imageurl,
    					'alt': '',
    					'width': 500,
    					'height': 350
    				});
    				$('#imagecontainer').cycle({
    					fx: 'scrollLeft',
    					speed:2000,
    					timeout: 7000
    				});
    			});
    		}
    
    As far as size goes, what it's doing is creating a new <img> tag and cramming the images into a 500 x 350 (w/h) box. You can change that size to anything you want. It's going to scroll left starting at the first position in the picture library to the last. 
    Hope this helps :)

    Wednesday, August 17, 2011 4:33 PM
  • It didn't work for me, I might be doing something wrong. Here's what I did (see notes in bold/italics)

     

    Go to http://jquery.com/ and download the minified library and save it into a document library. In the header of your page add this: 

    <script type='text/javascript' src='** your reference path (/js/jquery-latest.js) **'></script>

    I used the path to the jqry script after loading it into a new library

    <script type='text/javascript' src='** your reference path (/js/jquery-cycle.js) **'></script>

    Same path as above

    Make sure the jquery reference is first. If you don't want random images, you can just use this: 

     

    $().SPServices({
    
    	
    
    		operation: 'GetListItems',
    
    		listName: '** Your List Name or GUID **', 
                    first I tried with the image libarary name where I stored my pictures
                    second: I used the full path to the image library
    
    		CAMLViewFields: '<ViewFields><FieldRef Name="Title" /><FieldRef Name="ows_FileRef" /></ViewFields>',
    
    		completefunc: function(xData, status){
    
    		
    
    			$(xData.responseXML).find("[nodeName='z:row']").each(function(){
    
    				
    
    				var getimage= $(this).attr("ows_FileRef").substring( $(this).attr("ows_FileRef").indexOf("#") +1 );
    
    				var imageurl= url + '/' + getimage;
    
    
    
    				$('<img/>').appendTo('#imagecontainer').attr({
    
    					'src': imageurl,
    
    					'alt': '',
    
    					'width': 500,
    
    					'height': 350
    
    				});
    
    				$('#imagecontainer').cycle({
    
    					fx: 'scrollLeft',
    
    					speed:2000,
    
    					timeout: 7000
    
    				});
    
    			});
    
    		}
    
    
    As far as size goes, what it's doing is creating a new <img> tag and cramming the images into a 500 x 350 (w/h) box. You can change that size to anything you want. It's going to scroll left starting at the first position in the picture library to the last. 
    Hope this helps :)

    Wednesday, August 17, 2011 6:59 PM
  • I usually use the library GUID to pull images. Go to the library and choose Settings> Picture Library Settings. Look at the url and take everything off after List= and copy into listName.

    Make sure you change %7B into {, %2D into -, and %7D into }.

     

    Thursday, August 18, 2011 1:59 PM
  •  

    Sorry to bother you again, but here's my code: I was a little confused when you asked to remove everything after List= but then you asked to change those %alphanumeric into { - } and they all comes after List= !

    <script type='text/javascript' src='

    https://my url goes here/_layouts/listedit.aspx?List={----}

    (/js/jquery-latest.js) '></script>

    <script type='text/javascript' src='

    https://my url goes here/_layouts/listedit.aspx?List={----}

    (/js/jquery-cycle.js) '></script>

    $().SPServices({
     
    operation: 'GetListItems',
      
    listName: 'https://my url goes here/_layouts/listedit.aspx?List={----}Team Photos ',
      CAMLViewFields: '<ViewFields><FieldRef Name="Title" /><FieldRef Name="ows_FileRef" /></ViewFields>',
      completefunc: function(xData, status){
      
       $(xData.responseXML).find("[nodeName='z:row']").each(function(){
        
        var getimage= $(this).attr("ows_FileRef").substring( $(this).attr("ows_FileRef").indexOf("#") +1 );
        var imageurl= url + '/' + getimage;

        $('<img/>').appendTo('#imagecontainer').attr({
         'src': imageurl,
         'alt': '',
         'width': 500,
         'height': 350
        });
        $('#imagecontainer').cycle({
         fx: 'scrollLeft',
         speed:2000,
         timeout: 7000
        });
       });
      }

    Thursday, August 18, 2011 2:45 PM
  • Hi NotNull ,

     

    I am afraid that you misunderstand psdMark’s idea .

    1.       You should put the url to the document library which the jquery files are uploaded to . Like <script type="text/javascript" src= "http://servername/sitename/Document Library/js/jquery-latest.js"></script> .

    2.       Put the GUID of the picture library In the listName part  .The GUID can be get when you browse to  picture library settings page .The URL is like http://servername/sitename/_layouts/listedit.aspx?List=%7B95A12B31%2D6AF2%2D484C%2DA9F1%2D6558D153B920%7D .The list GUID is %7B95A12B31%2D6AF2%2D484C%2DA9F1%2D6558D153B920%7D.  After changing the %7B ,%7D and  %2D into{,} and -,you will get {95A12B31-6AF2-484C-A9F1-6558D153B920} .  This is the GUID of the list , that is  listName: ‘{95A12B31-6AF2-484C-A9F1-6558D153B920}’ .

     

    Thanks,


    Entan Ming


    Friday, August 19, 2011 9:33 AM
    Moderator
  • Thanks for clarifying my post, Entan!

    I really should have written my posts clearer :)

    Friday, August 19, 2011 1:18 PM
  • Thanks Ming for the clarification and thanks psdMark for providing the code. I still can't get it to work. I think mainly due to the fact that the process is unclear.

    Is there two downaloads or just one. I did download the minified library (jquery-1.6.2.min.js) and stored in the library (ScriptLibrary). But there's a 2nd line of code that reference the 'cycle' - I removed it from the posting - is this one supposed to have a separate script file? if it's, where do I get it from?

    What's the "/js/" before the jquery name is for? I removed it from my path... I thought might be referencing a sub-folder, that I don't have in my path.

    I have updated the picture library link as below. The xxx represent my url path. When I run it i just see the code text in the CEWP.

     

     

    <script type='text/javascript' src='https://xxxx.xx.xxxxxx.com/sites/xxx/xxxxxxx/ScriptLibrary/jquery-1.6.2.min.js'></script>

    $().SPServices({
     
    operation: 'GetListItems',
      
    listName: 'https://xxxx.xx.xxxxxx.com/sites/xxx/xxxxxxx/_layouts/listedit.aspx?List={12DCAB58-2687-4584-97F6-C983E0BB3DAC}',
      CAMLViewFields: '<ViewFields><FieldRef Name="Title" /><FieldRef Name="ows_FileRef" /></ViewFields>',
      completefunc: function(xData, status){
     
       $(xData.responseXML).find("[nodeName='z:row']").each(function(){
       
        var getimage= $(this).attr("ows_FileRef").substring( $(this).attr("ows_FileRef").indexOf("#") +1 );
        var imageurl= url + '/' + getimage;

        $('<img/>').appendTo('#imagecontainer').attr({
         'src': imageurl,
         'alt': '',
         'width': 500,
         'height': 350
        });
        $('#imagecontainer').cycle({
         fx: 'scrollLeft',
         speed:2000,
         timeout: 7000
        });
       });
      }



    Friday, August 19, 2011 3:34 PM
  • Maybe this will help. What you're doing is finding a <div> on your page that you can shove a bunch of <img> tags into. You're then using jQuery and SPServices to find the pictures from the SharePoint Picture Library, and then you're calling the jQuery cycle plugin to automatically scroll through the pictures that jQuery and SPServices find. So, here's some example html:

    <div id='imagecontainer'>

    </div>

    That's it.

    <img> tags will be generated automatically by jQuery using the 'appendTo' method. SPServices has to know where to pull the images from, so you're giving it a 'listName', and instead of using a path to the list name we're using the SharePoint GUID for that list. It's more exact than typing.

    So copy and paste the following code for your listName:

    listName: '{12DCAB58-2687-4584-97F6-C983E0BB3DAC}',

    You're not passing it a URL, you're passing it the list GUID.

    Insofar as the script reference to jQuery cycle, point to whereever you store it. So if you're storing it in the same location as jQuery, do this:

    <script type='text/javascript' src='https://xxxx.xx.xxxxxx.com/sites/xxx/xxxxxxx/ScriptLibrary/jquery-cycle.js'></script> (Or whatever you name the cycle file)

    Put all your code in a <script type='text/javascript'></script> tag and then dump it into a CEWP (Content Editor Web Part).

    So make sure you have the correct pointers to the jQuery, SPServices, and jQuery cycle files, paste the listName line exactly as I wrote above, and put all the code in a <script> tag. Once you do those things you should be pulling all the images from the Picture Library (however many there are) and the cycle plugin will auto-scroll them to the left beautifully.

    I hope this solves your issue!

     

    Friday, August 19, 2011 8:12 PM
  • I think there's a disconnect between us. I have removed the URL part of the listName and left only the GUID to no avail.

    I'm using the same script as in my previous post (with the modification above). There are a couple of code lines at the top refrencing the two queries then the SPservice code as you have provided. I have:

    1. jquery-1.6.2.min.js
    2. cycle.txt

    queries stored in the same directory.

     

    Thanks,

    Oz

    Monday, August 22, 2011 4:17 PM
  • Hi,

     

    Here is a similar request  .You can create a content editor web part on the page and put some java script in the html editor to display the images from a document library .

     

    For more detailed information ,you can refer to this site:

    Image Scrolling webpart : http://social.msdn.microsoft.com/Forums/en/sharepointdevelopment/thread/16bddf03-a93d-4dbe-b30e-9deb259974bb

     

    Thanks,


    Entan Ming
    Tuesday, August 23, 2011 12:13 PM
    Moderator
  • Make sure your cycle file has a .js extension since it's a Javascript file.
    Tuesday, August 23, 2011 12:52 PM