Have beautiful lightbox gallery of your record photos

API & Custom Code Show & Tell
1

Below is a how-to on setting up your record's photos to pop-up in a beautiful lightbox view and gallery. Nic suggested I share this and now that I have all the kinks worked out, here you go!

Here is a demo site that shows the end-product

(opens in a new window)

This solution uses the javascript library "FancyBox" and in my example I use the CDN version so you don't need to host anything on your server. Here is the javascript with some inline instructions in the comments:

// this loads the fancybox css and javascript from CDN - no need to change it
$('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" type="text/css" media="screen" /><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>').insertBefore('#knack-dist_1');

// this initializes fancybox and sizes the images

$(document).on(‘knack-scene-render.scene_1’, function(event, scene) {


// this finds each image on the scene and links them to the bigger version using fancybox
$("#kn-scene_1 img").each(function() {
  
  // this part creates the URL to the full size image
  // you must investigate your own setup to find the variable part of the URL
  // for each of your images. 
  // in my example "thumb_2" is my thumbnail and "thumb_3" is the big version
  // that is "fits within 1600x1600.
  var thisimg = $(this).attr('src');
  var fullimg = thisimg.replace('thumb_2','thumb_3');
  
  // this takes the URL and puts a link around the photo thumbnail
  $(this).wrap('&lt;a class="fancybox" rel="group" href="'+fullimg+'"&gt;');
  
  // this optionally makes the thumbnails responsive so that they always display
  // nicely even on smaller screens
  $(this).css('max-height', '200px');
  $(this).css('max-width', '100%');
  
});

// initialize the javascript library
$(".fancybox").fancybox();



});

That is really all there is. The most awkward part is figuring out how to modify your image URL, but if you just right-click on any of the images and choose “Open Image in a New Window” you can then fuss with the “thumb_*” part of the URL until you find the version you want. I recommend the bigger size fits within 1000 or 1200px for the full screen version - it’s a decent compromise.

You will also have to replace “scene_1” with your scene’s ID.

Please let me know if you have any questions!

Benjamin

2

This thread is essentially deprecated since Knack has included features that achieve the same outcome as I hacked together here. Because of that, I am taking my example app offline as it counts against my app limit and I need it for something else :)

Onwards!

Benjamin

3

No problem and thank *you*. Regardless of the version of Fancybox being used, you still have an excellent solution here which was very helpful!

4

Angel, wow - thanks for catching that. I had no idea that it wasn't working based on the included fancybox code I put in above. I could swear I used that same technique somewhere else, but maybe not.

It won't allow me to modify the original post, but hopefully people will read through all the posts/comments.

And thanks for adding the technique for integrating the title.

Benjamin

5

Here's my solution for modifying the title field and adding a download link underneath each image. I've added comments where changes were made. Hopefully this helps anyone else attempting to do the same thing... My changes are marked with "Update:" in the comments

 $("#kn-scene_265 img").each(function() {

  var thisimg = $(this).attr('src');
  var fullimg = thisimg.replace('thumb_10','original');
  
  // Update: filename with extension to use in download field
  var myFilename = fullimg.split('/').pop();
  // Update: will use image name without extension as CSS ID
  var mID = myFilename.replace('.jpg','');
  
  // this takes the URL and puts a link around the photo thumbnail
  // Update: added ID field for modifying the title values later
  $(this).wrap('&lt;a title="tmp" class="fancybox" id="'+mID+'" rel="gallery" href="'+fullimg+'"&gt;');
   
  // this optionally makes the thumbnails responsive so that they always display
  // nicely even on smaller screens
  $(this).css('max-height', '225px');
  $(this).css('max-width', '100%');
  
  // Update: match the ID and change the title values to add download link
  $("#" + mID).attr('title','&lt;a href="'+fullimg+'" download="'+myFilename+'"&gt;Download - '+myFilename+'&lt;/a&gt;');
  
});</pre>
6

Benjamin & Stevan,

I've come to realize a few things with this code.

1) The reason css is showing up but not the js 

...(code snipped) <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>').insertBefore('#knack-dist_1')

is because Knack strips out <script></script> tags and anything in between them.

2) The reason the code still works is because Knack runs a very old version of Fancybox, which can be found in this file that they include on every page: https://cdn1.cloud-database.co/namespace/scripts/k.js?20151029

3) I've attempted to manually paste in a newer version of Fancybox, but it looks like the old version continues to take precedent.

That said, since I can't use the afterLoad function (only in Fancybox 2) 

'$(".fancybox").fancybox({
    afterLoad: function() {
        this.title = '<a href="' + this.href + '">Download</a> ' + this.title;

and since the current jQuery .wrap method strips html from the title value, is there another way that I can use javascript to get html within the title field for each image? This way I'd still be able to add the download link underneath each image, even with the old version of FancyBox (1.3.5). Any ideas would be appreciated!

7

Hi Angel,

I have never included that part of FancyBox that shows a title or caption, but I assume that you could use the js variable "fullimg" in the code above to add it. You could take the last line (29 in my code above), and add similar parameters to the fancybox() call as is showin the JS Fiddle. While the title of the image is not something that I have available it seems like you could easily just set the caption to "Download this Image" with a link to "fullimg". Hopefully that helps. Good luck!

Benjamin

8

This is a fantastic post! Thank you very much for sharing. I have one quick question... I'm trying to add a download link to the title as demonstrated here: http://jsfiddle.net/zAe6Z/ but I'm not having any luck getting it to work. Any ideas on how to integrate this?

9

Cool - yeah, the code I put into the Knack admin is what is in the first post. It is not totally clear to me how Knack loads that code, but it works somehow :D Glad that you were able to use the tip/hack.

10

Ben, yeah the box works perfectly. I am just not seeing the js code anywhere. I have just been curious about it! (I like to question this...) Anyway thanks for taking time to answer.

11

Stevan, is the lightbox feature working when you click an image? If so, I am not sure where Knack puts the javascript that you set under "API and Code", but if the gallery is working then it's loading somewhere :) Maybe one of the Knack guys could chime in if your instance isn't working the same as mine.

You could also check in the network pane of the inspector to see if the cdnjs.cloudflare.com/ fancybox file is getting loaded. If it is, then it's somewhere even if the inspector can't see it.

Sorry - I don't feel like I am being very helpful, but I did confirm that my demo uses exactly the code from above. I'm happy to help out if there is any more info you can provide about what isn't working for you. Cheers,

Benjamin

12

Hi Ben. Actually I checked your demo. and only the css is showing up.

looking on the console, I cannot locate the js...

13

Hey Stevan,

#knack-dist_1 may only exist if you are looking at the site through the knack URL - I noticed some of the wrapper is different if you are embedding it someplace. If that isn't your problem, it's possible that the number would be different in your instance. You could try insertBefore('.kn-content') which may be more universal.

Basically, you want to get that call to the javascript for the lightbox plugin as high up on the page as you can so it loads before the content of the page. On my front-end, the knack-dist_1 is the first object inside the <body>.

Does that help?

14

Hi Ben. Nice.

Question about .insertBefore('Knack-dist_1'): I can see the css link but not the js.

Any explanantion?

15

Beautiful, thanks for sharing!

16

cool!