Adding lightboxes

If you have worked with lightbox scripts before, you already know how to use them in the slider: you create an anchor tag that wraps the image and then you identify that link as a lightbox by adding a 'rel' attribute for it and giving that attribute a certain value. For Advanced Slider, you will need to use a predefined value: 'slider-lightbox'.

In the code example below, I specified a slide image lightbox for the first and third slides and a thumbnail image lightbox for the second and fourth slide. The slide lightboxes will create a lightbox gallery by having an extra identifier inside the 'rel' attribute. The thumbnail lightboxes don't have the extra identifier, so each lightbox will be separate, but it's possible to have them as a gallery as well.

Please notice that for each image that has a lightbox I specified some text in the ALT attribute, which will be used as the lightbox title, and for the anchor element I added a TITLE attribute, which will be used as the lightbox description.

<div class="advanced-slider" id="my-slider">
    <div class="slides">

 <div class="slide"> <a rel="slider-lightbox[g]" href="../images/slides/image1.jpg" title="Some lightbox description"> <img class="image" src="../images/slides/image1.jpg" alt="Slide 1 title"/> </a> <img class="thumbnail" src="../images/thumbnails/image1.jpg" alt=""/> </div> <div class="slide"> <img class="image" src="../images/slides/image2.jpg" alt=""/> <a rel="slider-lightbox" href="../images/slides/image2.jpg" title="Some lightbox description"> <img class="thumbnail" src="../images/thumbnails/image2.jpg" alt="Thumbnail 2 title"/> </a> <div class="caption">Some text for the second slide.</div> </div> <div class="slide"> <a rel="slider-lightbox[g]" href="../images/slides/image3.jpg" title="Some lightbox description"> <img class="image" src="../images/slides/image3.jpg" alt="Slide 3 title"/> </a> <img class="thumbnail" src="../images/thumbnails/image3.jpg" alt=""/> <div class="caption">Caption for the third slide.</div> </div> <div class="slide"> <img class="image" src="../images/slides/image4.jpg" alt=""/> <a rel="slider-lightbox" href="../images/slides/image4.jpg" title="Some lightbox description"> <img class="thumbnail" src="../images/thumbnails/image4.jpg" alt="Thumbnail 4 title"/> </a> <div class="caption">Yet another caption text.</div> </div>

 </div> </div>

Videos

When you open a Vimeo or YouTube video, all you have to do is specify the URL of the YouTube/Vimeo page, and if you want to set a certain size for the video, you can do this by passing a width and a height to the URL of the video. The code example has a YouTube video for the first slide and a Vimeo video for the second slide.

<div class="slide">
    <a rel="slider-lightbox[]" href="http://www.youtube.com/watch?v=JVuUwvUUPro?width=700&height=400" title="Nuit Blanche explores a fleeting moment between two strangers.">
        <img class="image" src="../images/slides/image1.jpg" alt="Nuit Blanche - Arev Manoukian"/>
    </a>
    <img class="thumbnail" src="../images/thumbnails/image1.jpg" alt=""/>
</div>

<div class="slide">
    <a rel="slider-lightbox[]" href="http://vimeo.com/10829255?width=700&height=400" title="New York invasion by 8-bits creatures ! PIXELS is Patrick Jean' latest short film, shot on location in New York.">
        <img class="image" src="../images/slides/image2.jpg" alt="PIXELS"/>
    </a>
    <img class="thumbnail" src="../images/thumbnails/image2.jpg" alt=""/>
</div>

Web pages

When you open a web page, you need to pass 'iframe=true' to the URL of the page, and you can also pass a width and a height.

<div class="slide">
    <a rel="slider-lightbox[]" href="http://yahoo.com?iframe=true&width=700&height=400" title="Some description of this page">
        <img class="image" src="../images/slides/image3.jpg" alt="Yahoo"/>
    </a>
    <img class="thumbnail" src="../images/thumbnails/image3.jpg" alt=""/>
</div>

Inline HTML

For loading inline HTML content, all you have to do is specify the ID attribute of the content in the HREF attribute of the anchor tag. In the example below, the slide has a lightbox that will open inline HTML content.

<body>     
    <div class="advanced-slider" id="my-slider">
        <div class="slides">
            <div class="slide">
                <a rel="slider-lightbox[]" href="#my-content" title="Some description of this content">
                    <img class="image" src="../images/slides/image4.jpg" alt="Inline HTML"/>
                </a>	
                <img class="thumbnail" src="../images/thumbnails/image4.jpg" alt=""/>
            </div>
        </div>
    </div>
    
    <div id="my-content">
        <p class="title">Some Title</p>
        <p class="description">Description: Some description of this content.</p>
    </div>
</body>

Adding lightboxes to Lazy Loaded images

As you saw in the previous examples, the link or lightbox must be wrapped aroung the <img alt="" /> tag. However, when you use lazy loading, you don't have to specify an <img alt="" /> tag and use the "data-image" attribute instead. So, the solution for having both links/lightboxes and lazy loaded images for the same slide is to use a mockup image as a replacement for the main image and wrap the link/lightbox around that mockup image, while the actual image will be specified using the "data-image" attribute. For the mockup image, it's recommended to use an image that's very small in size, something like a one pixel image.

<div class="advanced-slider" id="my-slider">
    <div class="slides">

 <div class="slide" data-image="../images/slides/image1.jpg"> <a rel="slider-lightbox[]" href="http://www.youtube.com/watch?v=JVuUwvUUPro"> <img class="image" src="mockup.jpg" alt="Nuit Blanche - Arev Manoukian"/> </a> <img class="thumbnail" src="../images/thumbnails/image1.jpg" alt=""/> </div> <div class="slide" data-image="../images/slides/image2.jpg"> <a rel="slider-lightbox[]" href="http://vimeo.com/10829255"> <img class="image" src="mockup.jpg" alt="PIXELS"/> </a> <img class="thumbnail" src="../images/thumbnails/image2.jpg" alt=""/> </div>

 </div> </div>
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk