I'm using this solution to create image galleries in a SP 2013 Online site: http://www.getinthesky.com/2014/04/sharepoint-image-gallery-doesnt-suck/

The script uses the image alt/title tag to display captions for an image. I modified this line to pull in the "caption", but it displays as "undefined" which usually means the field is not in the view:

jQuery("#galleria").append("<img src='" + jQuery(this).attr("href")
+ "' alt='" + jQuery(this).attr("alt") +  "' /> ");

In theory the picture library's description field is supposed to populate the alt tag but I'm not sure if it does. Anyone have any light they could shed on this?

jQuery("#galleria").append("<img src='" + jQuery(this).attr("href") + "' alt='" + jQuery(this).attr("href").substring((jQuery(this).attr("href").lastIndexOf('/'))+1, jQuery(this).attr("href").lastIndexOf('.')) +  "' />");

A little rough but this did work for me. forgot to add that this will grab the file name and display it in the alt but I'm sure you can modify it to work for you.

| improve this answer | |
  • Thankyou - that does get the file name but I think the "undefined" caption issue lies with Sharepoint not finding the description field in the view. Looking at the native library, the image alt is indeed the description field. But it doesn't render using galleria. – matt Jan 14 '16 at 17:30

you can try my code.

// Some advise: Keep folders and images seperate. The makes for the best views

  jQuery('#onetidDoclibViewTbl0 a.ms-listlink:not([onmousedown^="javascript"])').each(function() {
      var thumbnailpath = '/' + 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 imagepath = jQuery(this).attr("href");

  var ImageStructure = '<a href="'+jQuery(this).attr("href")+'"><img alt="' +jQuery(this).attr("href")+'" src="' + thumbnailpath + '" data-image="' + imagepath + '" style="display:none"></a>'; 
  jQuery("#galleria").append(ImageStructure); });
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.