Create/open gallery with only 1 link

  • Resolved Toengel

    (@toengel)


    4 years, 7 months ago

    Hi,

    in your admin page your have a very good example:

    <a href="image1.jpg" class="foobox" rel="gallery">1</a>
<a href="image2.jpg" class="foobox" rel="gallery">2</a>
<a href="image3.jpg" class="foobox" rel="gallery">3</a>

    and below a link “open a gallery”… (with rel=”foobox”)

    How do you create the gallery behind that link? Where do you define, which images are shown behind this link?

    I don’t want to put all images on one page, but a link “open gallery” (which allows me to swipe between e.g. 3 images).

    If I put the 3 <a href rel="gallery"> on the page, it does of course work – but I also have then 3 pictures on my page (what I do not want)…

    So: how to create a “gallery-ref” without showing all images?

    Thanks in advance,

    Toengel@Alex

    • This topic was modified 4 years, 7 months ago by Toengel.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @toengel,

    It sounds like you need to use a gallery plugin that will display a single image at a time.

    You can try installing our free FooGallery plugin and using the Image Viewer gallery theme which allows you to add multiple images to a gallery but only display one at a time with left/right navigation arrows to move between the images.

    You can see a demo here:

    https://foo.gallery/demos/image-viewer-gallery/

    Is that the sort of thing you’re looking for?

    Thread Starter Toengel

    (@toengel)

    Hi,

    but isn’t it strange, that this works in the backend of FooBox? Without installing FooGallery?

    Toengel@Alex

    Plugin Author bradvin

    (@bradvin)

    hi @toengel

    You can try to move the images into a div which you set a style of display:none

    The images will not be shown in the page, and the link will open the lightbox with the images.

    Try this code:

    
<a href="image1.jpg" class="foobox" rel="gallery">Open Images</a>
<div id="foohiddengallery2" style="display: none;">
<a href="image2.jpg" class="foobox" rel="gallery">2</a>
<a href="image3.jpg" class="foobox" rel="gallery">3</a> 
</div>
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Create/open gallery with only 1 link’ is closed to new replies.