CODE

Simple File API Gallery with Lightbox

Simple image gallery referencing a folder of images with the File API along with a jQuery lightbox implementation.

Peter Schmidt's:
CODE Items Profile

Adam Wilson's:
CODE Items Profile

v1.0.1

Change Log

• Removed jQuery reference in the code and made a note of the jQuery dependency instead.

1. Create a basic Custom Module which will be used to create new galleries as needed.
   For this demo, we'll call our Custom Module 'My Gallery'.

   You'll just need one custom property called 'Cover Image' for this demo, but you can of course extend your Custom Module with additional properties as needed.

   Note: This script requires jQuery to be loaded on your site (before the Fancybox script). jQuery 3+ is preferred, but FancyBox works with jQuery 1.9.1+ and jQuery 2+

2. In the Detail layout of your Custom Module paste the following:

   {% comment %}<!-- Treehouse CODE v1.0.1 -->{% endcomment %}
   <!-- FancyBox files -->
   <script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
   <!-- end FancyBox files -->
   {% assign pathArray = this.coverimage | split: '/' %}
   {% assign nPathArray = pathArray | size | minus: 1 %}
   
   {% capture galleryPath %}
   {% for p in pathArray %}
   {% unless forloop.last %}/{{p}}{% endunless %}
   {% endfor %}
   {% endcapture %}
   
   {% component type:"api", resource:"File System", folder:"{{galleryPath}}", collectionVariable:"galImages" %}
   {% for item in galImages.items %}
       <div style="width: 200px; float: left; margin-right: 10px; margin-bottom: 10px;">
           <a data-fancybox="gallery" href="{{item.url}}?width=800"><img src="{{item.url}}?width=200&height=140&mode=crop" alt="{{this.name}}"></a>
       </div>
   {% endfor %}

3. In the List layout of your Custom Module paste the following:

   //## Treehouse CODE v1.0.1 ##
   <div style="width: 200px; float: left; margin-right: 10px; margin-bottom: 10px;">
       <a href="{{this.url}}"><img src="{{this.coverImage}}?width=200&height=140&mode=crop" alt="{{this.name}}"></a>
       <p><a href="{{this.url}}">{{this.name}}</a></p>
   </div>

4. On the page where you want to display the galleries paste the following:

   NOTE: Change 'My Gallery' to the name of your Custom Module.

   //## Treehouse CODE v1.0.1 ##
   {% component source: "My Gallery", layout: "List", limit: "999", type: "module" %}

5. Now, when creating a new 'My Gallery' item, by simply choosing the Cover Image from the desired folder of images, it will automatically use that same folder to source all the remaining images for the gallery.

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.