SPServer2013Logo

SharePoint Image Gallery that doesn’t suck in 7 easy steps

[Update]

I got an e-mail from Robert, who has refined the solution. Thank you for sharing Robert.

—————————

Hi Ulrich, hi Joe, first I want to thank Ulrich for his great work and sharing it with us! I also don’t have the problem with more than 40 pictures in a picture gallery after using galleria-1.4.2.min.js and also galleria.classic.min.js from an actual galleria-version.

Also I did some changes in the “DisplayGallery.txt” file because when you have a lot of pictures in the gallery you will get a performance issue and a memory leak using always the pictures in original quality/size from actual digital cameras. SharePoint itself creats two differen thumbnail pictures of each uploaded picture gallery in an image library automatically (the folders “_w” and “_t” you can see if you open the picture library with windows-explorer). So I changed “DisplayGallery.txt” that these two tumbnail pictures will be used for the image and also for the minithumbnail below the image. The picture in original quality is only used when clicking on the picture itself and using the lighbox function of Galleria.

To do this I had to replace the following paragraph in the “DisplayGallery.txt”-file:


// Some advise: Keep folders and images seperate. The makes for the best views 
jQuery('#onetidDoclibViewTbl0 a.ms-listlink:not([onmousedown^="javascript"])').each(function() { var imagepath = jQuery(this).attr("href").substring(1,jQuery(this).attr("href").lastIndexOf('/')+1) + "_w/" + jQuery(this).attr("href").substring(jQuery(this).attr("href").lastIndexOf('/')+1,jQuery(this).attr("href").lastIndexOf('.')) + "_" + jQuery(this).attr("href").substring(jQuery(this).attr("href").lastIndexOf('.')+1) + ".jpg"; var thumbnailpath = jQuery(this).attr("href").substring(1,jQuery(this).attr("href").lastIndexOf('/')+1) + "_t/" + jQuery(this).attr("href").substring(jQuery(this).attr("href").lastIndexOf('/')+1,jQuery(this).attr("href").lastIndexOf('.')) + "_" + jQuery(this).attr("href").substring(jQuery(this).attr("href").lastIndexOf('.')+1) + ".jpg"; jQuery("#galleria").append(""); }); 

Now I’m able to use the ImageGallery also for image libaries with a lot of pictures without any problems.

Regards, Robert.

—————————

I’ve been asked by a client to come up with a more presentable way of displaying a SharePoint image gallery. And since the default way that SharePoint does that, is bu no means user-friendly at all, I dug around and found some code that just needed needs a little editing in order to work in SharePoint 2013.

Disclaimer: This solution is tested on SharePoint 2013 only

//Ranting

Lets be honest. Nobody ever accused SharePoint of being the most modern platform for things like Wiki’s, blogging, discussions and image galleries. It doesn’t seem to me that Microsoft are doing other than keeping those functions alive, but they haven’t developed all that much since 2007. Image galleries way have developed a little. But if you’ve ever toyed with WordPress, you have a good idea of how cool Image galleries can look and how easy it is to set up.

After searching high and low I found a solution that is working in a SharePoint 2010 environment. So I just had to re-code it for 2013. It’s not that big a deal, but since Microsoft has made a lot of changes to Picture Libraries, it still needs some work, in order to work.

Sidenote: Picture-, Image or Photo-Gallery? I call them Image-Galleries, because I cannot really tell the difference. Feel free to enlighten me on the subject, if I use the term in a wrong way.

Videoguide for building a SharePoint image gallery

Textguide for building a SharePoint image gallery

  1. Create a folder for your code. I prefer the Masterpage library, where I have all my stuff, but that for you to decide.
  2. Download the Galleria Library or download my collection of files and update them as needed.
    You only need these files:

    • jquery-1.11.0.min.js
    • galleria-1.3.5.min.js
    • galleria.classic.min.js
    • galleria.classic.css
    • classic-map.png
    • classic-loader.gif
  3. Edit the “DisplayGallery.txt” file to suit your needs
  4. Create a new Image Library
  5. Create a view, based on the “All Pictures” view, which only shows [Name], [Required] and [Preview]. The last two are mandatory.
    Gallery-view
  6. Create a page and insert the app-part for your ImageGallery
  7. Insert a ContentEditor webpart and link to the “DisplayGallery.txt” file from the Masterpage library.

Here is the full code of the “DisplayGallery.txt” file:


<script type="text/javascript">
 jQuery(function () {

 });
</script>

<script>
jQuery(function() {
 //Find the beginning of the webpart and replace it all with the new header
 jQuery("#onetidDoclibViewTbl0").before("</pre>
<div id="galleries">
<h2>ImageGallery</h2>
</div>
<div id="galleria"></div>
<pre>").hide();;

 // Include any image from the current folder in the gallery div
 // Some advise: Keep folders and images seperate. The makes for the best views
 jQuery('#onetidDoclibViewTbl0 a.ms-listlink:not([onmousedown^="javascript"])').each(function() {
 jQuery("#galleria").append("<img src="&quot; + jQuery(this).attr(&quot;href&quot;) + &quot;" alt="" />");
 });

 // displays all folders as albumlinks
 jQuery('#onetidDoclibViewTbl0 a.ms-listlink[onmousedown^="javascript"]').each(function() {
 var album = jQuery(this);
 var gallery = album.text();
 jQuery("#galleries").append(album.html("<img src='/_catalogs/masterpage/GITS/ImageGallery/btn_gallery.png' alt='Gallery' />" + gallery + ""));
 });
 jQuery('#galleries').has('a').show();

 // Load Galleria with configurations
 // Take a look at the documentation for Galleria for additional configurations
 if(jQuery('#galleria').has("img").length) {
 jQuery('#galleria').show();
 Galleria.loadTheme('/_catalogs/masterpage/GITS/ImageGallery/galleria.classic.min.js');
 Galleria.configure({
 lightbox: true, // Opens the image in a lightbox, when clicked
 height: 0.5625 // Sets the dimensions for the image, this is true 16:9 ratio
 });
 Galleria.run('#galleria');
 }
});
</script>

<style>
a img { border: 0; }
#galleries {
 display: none;
 margin-bottom: 10px;
 margin-left: 10px;
 min-height:50px;
}
#galleries > a {
 display: inline-block;
 height: 50px;
 margin-right: 20px;
 text-align: center;
}
#galleries img {
 border: 1px solid #DBDDDE;
 display: block;
 height: 40px;
 margin: 0 auto 5px;
 max-height: 40px;
 padding: 3px;
}
#galleria {
 display: none;
 width:100%;
}
</style>


Click to tweet:

30 replies
  1. jon thurtell
    jon thurtell says:

    Nice piece of work, simple and effective. I might use it myself. One question. How might you go about including captions with the pictures?

    Reply
      • howwood
        howwood says:

        Which script? JavaScript isn’t a strong point of mine, but this functionality would be worth some effort, and knowing where to start would help. I’ll post back if I get it to work.

        Reply
    • Joe Brown
      Joe Brown says:

      Just as a followup, I did replace the files in the “My collection” link with the latest files found at “Galleria Library” link. I replaced the galleria js file with galleria-1.4.2.min.js, and I also replaced galleria.classic.min.js. I do not see any changes I could make in the DisplayGallery.txt that will fix this problem.

      Reply
  2. Ulrich Gerting Bojko
    Ulrich Gerting Bojko says:

    Hi Joe

    I can’t really say what or why you experience this issue. I have never tested it with that many images. If I fund a solution I will let you know, but odds are that I don’t have time to look into it before later this year. If you find a solution, please post it to share with others.

    Reply
  3. Toni Russo
    Toni Russo says:

    Has this 40 image limit problem been resolved? I have replaced the galleria-1.4.2.min and galleria.classic.min from Galleria1.4.2 with no success. I am still getting multiple “file not found” error after uploading more than 40 images. It seems that Robert has resolved this issue above. Can we ask Robert to zip up the new updated files and post it for public? Thanks in advance and please advise.

    Reply
      • Toni Russo
        Toni Russo says:

        Dear Ulrich, we have tried Robert’s solution in red by replacing the two min.js files and changing the code with no success. We replaced the file name call to galleria-1.4.2.min.js in the code. We still getting file not found errors. After changing the code as per Robert instructions it stopped working completely. Is there something to address this 40 image limit issue?

        Reply
  4. Steve Cameron
    Steve Cameron says:

    Robert’s modification is incomplete. It creates the URLs for the images, but does nothing with them. Where your code appends an image tag, his just inserts an empty string.

    I got it working today with the following modifications. I tested it with a library containing 59 images and had no “file not found” errors.

    // Some advise: Keep folders and images seperate. The makes for the best views
    jQuery(‘#onetidDoclibViewTbl0 a.ms-listlink:not([onmousedown^=”javascript”])’).each(function () {
    var imagepath = ‘/’ + jQuery(this).attr(“href”).substring(1, jQuery(this).attr(“href”).lastIndexOf(‘/’) + 1) + “_w/” + jQuery(this).attr(“href”).substring(jQuery(this).attr(“href”).lastIndexOf(‘/’) + 1, jQuery(this).attr(“href”).lastIndexOf(‘.’)) + “_” + jQuery(this).attr(“href”).substring(jQuery(this).attr(“href”).lastIndexOf(‘.’) + 1) + “.jpg”;
    jQuery(“#galleria”).append(“”);
    });

    Reply
  5. Adam B
    Adam B says:

    Hello all after going through many of the same frustrations the rest of you have had I did some digging of my own. Turns out that I just had to edit the webpart with the below: then I modified the display gallery text file using Steve’s suggestion above and I am now able to add as many images as I want:

    edit current view of webpart ImageGallery
    go down to Item Limit you will see that its set to 40 and to display in batches..

    then just modify it to whatever number you want and select the radio button:
    “Limit the total number of items returned to the specified amount”

    after saving everything worked fine

    Reply
  6. Yinyin
    Yinyin says:

    Is there a way to dynamically retrieve the first photo to replace btn_gallery.png? We have several photo albums and don’t want to display the button over and over. Thank you in advance.

    Reply
  7. Colin Chen
    Colin Chen says:

    The gallery looks awesome in your demo. Nice work.
    I have followed all your steps in creating the gallery. Howerver, I can’t even get the folders to show up as an albumlink like the one in your demo. Would you know the what caused the problem?

    thank you in advance.

    Reply
  8. MayElise
    MayElise says:

    Does anyone have an example of Code up and running. I added the code written above but all I get is an error message (Unable to get property ‘substring’ of undefined or null reference). I think it has to do with the attr(“href”) part of the whole thing. Anyone have any advice for me? Do you have to edit any of the code written above, for example?

    Thanks in advance.

    Reply

Trackbacks & Pingbacks

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply