simple-lightbox/demo/examples/thumbsGallery.html

Lightweight plugin for lightbox images and galleries based on jquery api

<div class="imageGallery1">
    <a href="demo/images/4big.jpg" title="Caption for gallery item 1"><img src="demo/images/4small.jpg" alt="Gallery image 1" /></a>
    <a href="demo/images/5big.jpg" title="Caption for gallery item 2"><img src="demo/images/5small.jpg" alt="Gallery image 2" /></a>
    <a href="demo/images/6big.jpg" title="Caption for gallery item 3"><img src="demo/images/6small.jpg" alt="Gallery image 3" /></a>
</div>

<h3 class="attireTitleType3">Thumbs gallery</h3>

<p class="attireTextType2">
    Lets start with one of most common use cases - a gallery of thumbs where each thumb should be enlarged when clicked.
    Once light-box is up you should be able to traverse images in collection either via arrows on screen or keyboard controls
    (gamers might appreciate that "a" and "d" will work as arrow keys do).
</p>

<style>

    .imageGallery1 {

        overflow: hidden; margin: 30px -20px;

    }
    .imageGallery1 > a {

        float: left; width: 33.3333%; padding: 1px; box-sizing: border-box; position: relative;

    }

    .imageGallery1 > a:first-child { left: -1px; }
    .imageGallery1 > a:last-child { right: -1px; }

    .imageGallery1 > a > img {

        display: block; width: 100%;

    }

</style>

<script>

    new SimpleLightbox({elements: '.imageGallery1 a'});

    // or if using jQuery
    // $('.imageGallery1 a').simpleLightbox();
</script>

<pre class="attireCodeHighlight"><code class="language-markup">
    <script type="prism-html-markup"><div class="imageGallery1">
        <a href="demo/images/4big.jpg" title="Caption for gallery item 1"><img src="demo/images/4small.jpg" alt="Gallery image 1" /></a>
        <a href="demo/images/5big.jpg" title="Caption for gallery item 2"><img src="demo/images/5small.jpg" alt="Gallery image 2" /></a>
        <a href="demo/images/6big.jpg" title="Caption for gallery item 3"><img src="demo/images/6small.jpg" alt="Gallery image 3" /></a>
    </div>
    </script>
</code></pre>

<pre class="attireCodeHighlight"><code class="language-javascript">
    // using plain js
    new SimpleLightbox({elements: '.imageGallery1 a'});

    // or if using jQuery
    $('.imageGallery1 a').simpleLightbox();
</code></pre>