How to display a sequence of images from a single link?

Asked

Viewed 1,273 times

1

Usually when using image gallery plugins (Lightbox, Fancybox, etc.), we load the image A from Thumb A, the image B from Thumb B and so on. When we set a relationship (rel="x"), we were able to display several gallery images using "next" and "Prev".

So far, okay... but what about when I have a set of pictures, but I don’t need to display the Thumbs of it? That is, I want to load this set from a single specific link?

Taking a look at the plugin documentation, I couldn’t find anything like it. I can manipulate the plugin this way without involving extra development?

javascript jquery html css

  • Take a look here: http://answall.com/a/10580/129 In the meantime put your HTML in the question so we can help you more.

  • @Sergio Thanks for the quick return, but that’s not exactly the problem. Right now I’m at work and I’m not going to be able to create a "fiddle," but I’ll do it tonight at your suggestion. However, to advance (if it helps), see the example of use presented in Lightbox2 (http://www.lokeshdhakar.com/projects/lightbox2) for a set of four images. Notice that 4 Thumbs are displayed and clicking on one of them opens a lightbox with a gallery with next and Prev. What I need to have is just a link, loading this same gallery (without having to display the Thumbs).

  • An idea that occurs to me, without thumbnails, would be us callbacks executed before and after the images open, commonly present in these plugins, you send via AJAX the offset the image currently displayed, if any, in the Success, dynamically construct the DOM needed for the plugin to work. This application would return two offsets, previous and later, if any, as in a pagination.

  • Choose an image gallery plugin that allows you to pass a list of Urls on startup.

  • 1

    Gambiarra untested, and if only make the first <a> with text and the rest without (invisible)? <a href="img/image-1.jpg" data-lightbox="image-1">Ver Galeria</a><a href="img/image-2.jpg" data-lightbox="roadtrip"></a><a href="img/image-3.jpg" data-lightbox="roadtrip"></a><a href="img/image-4.jpg" data-lightbox="roadtrip"></a>

  • @Brunoaugusto then you broke my legs... I am not DEV and I understood little what you said... rs But I will save the comment as it may be useful soon...

  • @bfavaretto I will try to find one with this feature.

  • @brasofilo hahaha... Sensational! I hadn’t thought about it and it might work. I’ll test it tonight. Tks!

Show 3 more comments

1 answer

2


I tested and that’s right, just make a set of images, but put content only in the link of the first. Using the example of Lightbox:

<div class="image-set">
    <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
        <img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/>
    </a>
    <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."></a>
    <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."></a>
    <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."></a>
</div>

Streamlined:

<div class="image-set">
    <a href="img1.jpg" data-lightbox="example-set">GALERIA</a>
    <a href="img2.jpg" data-lightbox="example-set"></a>
    <a href="img3.jpg" data-lightbox="example-set"></a>
    <a href="img4.jpg" data-lightbox="example-set"></a>
</div>

Checking the code from Lightbox, it looks like that’s right, there’s no function "create gallery from a single link". He seeks all the hrefs and add to each album data-lightbox. Unless another plugin offers this specific functionality, this is the workaround.

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.