Lightbox gallery from single image

I am looking for an add-on that is similar to one I had back in c5.6. A lightbox gallery is triggered by a single image on the page. It used Fancybox. There are plenty of galleries but doesn’t look like any offer the single image option. Any ideas?

If you on v9+ it has its own gallery in the core. You could then tweak the code to just so the first image and make a new template.

Some solutions:

  1. Expanding from @TMDesigns , start with any gallery or slider which supports direct navigation between images in the lightbox. Suppose the gallery shows thumbnails a,b,c,d and the lightbox shows corresponding full size images A,B,C,D. You need a lightbox with direct navigation from A to B to C to D without leaving the lightbox. Then when thumbnails a,b,c,d are shown on the page, use some css to hide all but the first thumbnail, so the page shows ‘a’ with [b,c,d] hidden. You then have a gallery with a to A to B to C to D.
    The disadvantage is you may not have control of the transition from A to B to C to D.
    My Omni Gallery addon has an option for direct navigation between lightbox images, but there is no animation between lightboxed images.

  2. Create any slider as usual, configuring it as close to a full page or full screen slider. Put it in a stack (or hidden area or area of a non-indexed page). Then use a single image on your page to open a modal popup showing that stack (or pulling that other page area). This has the advantage that the modal popup is a slider in a modal, so has all the animations/transitions of the slider.
    My Button Nav addon includes templates for the core stack display and for
    Universal Content Puller to open the stack or pulled content in a modal overlay, where the pulled stack or page area would have a slider of images. Then the design of the opening button would have an image background. You could use pretty much any gallery or slider in the popup, such as the core image slider or my Omni Gallery.

There are potentially many solutions using variations of (1) and (2).

Actually Touch Gallery does that

It’s my package so feel free to ask me questions

1 Like

Make a template for the V9 built-in gallery.
Example: Goto concrete/blocks/gallery and create a folder called ‘templates’. Create another folder inside called ‘single_image’. Add two files. One called ‘view.php’ and another called ‘view.css’. Copy the ‘view.php’ from the ‘gallery’ block and paste in the ‘single_image’ folder. On line 46 of the view.php add the word ‘single’ to the <a class="single col-md-<?php

In the view.css add two lines of code:
.single{display: none}
.single:first-child{display:block;margin: 0;padding: 0;max-width:100%}

Now after adding the gallery block you can then click ‘Design & Block Template’ then choose ‘Single image’ from the dropdown menu and hopefully you be good to go.

1 Like

So this triggers from a single image? And can you put several on the same page?


1 Like

Unfortunately I am using C5.8.12

How do I just show 1 thumbnail on the page?

Here’s a demo on my website showing the gallery in use with several galleries on the same page. My website also uses concrete v8

When you add the gallery to the page, there’s an option in the settings screen to display only 1 thumbnail.
You can even select to make it random among other choices.

1 Like

Which tab - fileset, sizing, caption, design or interaction? Isn’t in any of those. I am using C5.8.12.

It’s under the fileset tab where it says “Display Thumbnails” and there’s a dropdown with 4 choices:

  • Display All Thumbnails
  • Display First Thumbnail only
  • Display Last Thumbnail only
  • Display One Random Thumbnail only

If you choose to display only 1 thumbnail you’ll have 2 new options.

First, under the same fileset tab you’ll have a new choice to decide which image to show first when you open the gallery overlay.

Second, under the captions tab you’ll have a choice to display the fileset’s name to describe the gallery or to use the displayed image’sname instead.

Cant see it in my version of your addon. See attached. I cant use your latest version because I am using C5.8.12.

Oops! Found the right one for C5.8.12. Works brilliantly!

You got me worried there for a minute :sweat_smile: