none
Adding Next/Previous Picture Functionality to Picture Library App

    Question

  • Hello. I am using the Picture Library App to host our collection of stock photos. Users will browse and download from this collection. I used a calculated column so users can land on this page and download the image. 

    Is there any way I can have next image or previous image functionality on that page? That way users can scroll through the pictures one at a time?

    Thanks.

    Tuesday, February 6, 2018 3:15 AM

All replies

  • Hello,

    From your question, it seems you need a carousel webpart where each picture slides and user can see each picture present inside the library.

    1) Here is a blog which provide out of the box option(step by step) to create a carousel where no code required.

    http://www.c-sharpcorner.com/article/creating-carousel-using-sharepoint-out-of-the-box-webpart/

    2) There are tons of option to create a custom jquery slider. Here is another option using content editor webpart.

    (carousel).http://www.markrackley.net/2013/07/29/a-simple-jquery-content-slider-for-sharepoint-200720102013-and-o365/


    Ramakrishnan

    Tuesday, February 6, 2018 4:44 AM
  • Hi 123Educate,

    If the reply is helpful to you, you could mark the reply as answer. Thanks for your understanding.

    Best regards,

    Sara Fan


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Tuesday, February 6, 2018 7:41 AM
    Moderator
  • Thanks for your input!

    I thought of using carousels as well. Unfortunately, the thumbnail view is too important to lose. Most users should be able to view the collection as thumbnails (users will be scanning our large collection of pictures looking for suitable images for their project). Some users will also like to scan a particular part of the collection.

    As a (very general and simple) example.

    We have a picture library filled with portfolio pictures (1000 pictures).

    Pictures 1-300 are models taking portfolio pictures
    pictures 301-400 are professionals taking portfolio pictures at work
    Pictures 401-600 are children portfolio pictures
    etc. etc.

    A user may start scanning our collection using thumbnails. Upon landing on picture 401, they realize that a children portfolio picture will suit their project.

    They will then like to scan the rest of the collection with larger than thumbnail previews.

    User will click image 401 and then using the previous and next option, be able to continue scrolling through the larger previews of pictures.

    I hope this clarifies my request

    thank you,

    Tuesday, February 6, 2018 2:31 PM
  • Hello,

    Thanks for detailed explanation of your requirement.

    For your requirement, Masonary library will be another great option where all images will be shown in a structure way.

    To try it out, you can find the plugins and other works in the below link.

    https://masonry.desandro.com/


    Ramakrishnan

    Wednesday, February 7, 2018 4:53 AM
  • Hi Ramakrishan. Thanks for your advice. The Masonry library seems perfect!

    I've never used a plugin before. Could you assist me or provide me with information on how to implement  it?

    Thanks

    Wednesday, February 7, 2018 12:55 PM
  • Hi,

    Sure. Here is a sample code to start with. Here the library name was "Pictures"  and Column name is "URL". CHange according your requirement.

    Reference of Masonry grid library

    https://masonry.desandro.com/#initialize-with-jquery

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS-->
    
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <style>
    .grid-item { width: 200px !important; }
    img.resize {
        width:200px !important; /* you can use % */
        height: 200px !important;
    }
    </style>
    <div class="grid"></div>
    <script type="text/javascript">
    
    $(document).ready(function(){
         var listName = "Pictures";
    	 
         var url = _spPageContextInfo.webAbsoluteUrl;
      addMasonry();
         getListItems(listName, url, function (data) {
            var html=""; 
    	    for (var i = 0; i < data.d.results.length; i++) {  
              console.log(JSON.stringify(data.d.results[i]));
    	      var item = data.d.results[i];
    		  if(item.URL!=null){
                 
                html +=    '<div class="grid-item">';
                html +=      '<img src="'+item.URL.Url+'" class="resize" />';
                html +=    '</div>';            
                  }
    		  else{
    			html.push("<p>No Picture present</p>");
    		  }	        
    	    }
    	    $(".grid").html(html);
            
         }, function (data) {
             alert("Ooops, an error occured. Please try again");
         });
     });  
     function addMasonry()
     {
        $('.grid').masonry({
            // options
            itemSelector: '.grid-item',
            columnWidth: 20
          });
     }
     function getListItems(listName, siteurl, success, failure) {
        $.ajax({
            url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items",
             method: "GET",
             headers: { "Accept": "application/json; odata=verbose" },
             success: function (data) {
                 success(data);
             },
             error: function (data) {
                 failure(data);
             }
         });
     }
    </script>
    
    
    
    

    Please remember to mark the replies as answers if they helped.


    Ramakrishnan

    Friday, February 9, 2018 3:30 PM
  • Hi 123Educate,

    I am checking to see how things are going there on this issue. Please let us know if you would like further assistance.

    If the issue was resolved, you can mark the helpful post as answer to help other community members find the helpful information quickly.

    Best regards,

    Sara Fan


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Monday, February 12, 2018 9:07 AM
    Moderator
  • Hi Ramakrishnan.

    Could you provide me with some insight as to where I would need to input this code? Do I input it into a script editor webpart? I've never worked with this feature, so I'm a bit lost.

    Thanks

    Monday, February 12, 2018 5:27 PM
  • Hi Sara. Thanks for checking in. I messaged Ramakrishnan for some further details. I'll make sure to mark this thread as answered once completed.

    Monday, February 12, 2018 5:28 PM
  • Hi,

    Yes, you can add the script to a Script editor webpart. or you can refer the script via Content editor webpart.

    Please find the steps to add\ insert script to a script editor webpart in the below blog.

    http://www.karthikscorner.com/sharepoint/script-editor-webpart/


    Ramakrishnan

    Tuesday, February 13, 2018 5:43 AM
  • Thanks for the information and your help.
    Wednesday, February 14, 2018 6:19 PM
  • Hi Ramakrishnan. I tried following your steps and nothing seems to generate. I'll outline the steps that I took.

    1. I searched the script and changed 'Pictures' to the name of my picture library 'Science'

    2. I don't know what to do with the URL column, so I went to my picture library and added a single text column named 'URL'

    3. I created a new page and added a script editor and copy and pasted the updated script. Nothing happened.

    4. I added the library web part below the script editor and nothing happened also.

    I tried to follow the steps that you shared with me, but I don't think I had all the components necessary.

    Please advise.

    Friday, February 23, 2018 3:33 PM
  • Hi 123Educate,

    You could create a column “URL” and add the picture url as “http://sp:20971/pic/1.png” in the URL column in picture library.

    And I modify the script provided by Ramakrishnan Raman. Because there is error in his script. Then you could change the list name to your picture library name in the script.

     

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- Latest compiled and minified CSS-->
    
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    
    <style>
    
    .grid-item { width: 200px !important; }
    
    img.resize {
    
        width:200px !important; /* you can use % */
    
        height: 200px !important;
    
    }
    
    </style>
    
    <div></div>
    
    <script type="text/javascript">
    
    $(document).ready(function(){
    
         var listName = "pic";
    
                     
    
         var url = _spPageContextInfo.webAbsoluteUrl;
    
                     
    
         addMasonry();
    
         getListItems(listName, url, function (data) {
    
            var html=""; 
    
                        for (var i = 0; i < data.d.results.length; i++) {  
    
              
    
                          var item = data.d.results[i];
    
                                      if(item.URL!=null){
    
                 
    
                html +=    '<div>';
    
                html +=      '<img src="'+item.URL+'" />';
    
                html +=    '</div>';            
    
                  }
    
                                      else{
    
                                                    html+="<p>No Picture present</p>";
    
                                      }                    
    
                        }
    
                        $(".grid").html(html);
    
            
    
         }, function (data) {
    
             alert("Ooops, an error occured. Please try again");
    
         });
    
     });  
    
     function addMasonry()
    
     {
    
        $('.grid').masonry({
    
            // options
    
            itemSelector: '.grid-item',
    
            columnWidth: 20
    
          });
    
     }
    
     function getListItems(listName, siteurl, success, failure) {
    
        $.ajax({
    
            url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items",
    
             method: "GET",
    
             headers: { "Accept": "application/json; odata=verbose" },
    
             success: function (data) {
    
                 success(data);
    
             },
    
             error: function (data) {
    
                 failure(data);
    
             }
    
         });
    
     }
    
    </script>

    Best regards,

    Sara Fan


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.


    Wednesday, February 28, 2018 9:13 AM
    Moderator