[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:

[html]

// 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(""); });

[/html]

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:

[html]

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

[/html]

Click to tweet: