Responsive Image Gallery With Thumbnail Carousel

Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.

We’ll use the jQuery Touchwipe Plugin that will make it possible to navigate the images by “wiping” on the iPhone and iPad.

The images in the demo are by über-talented Sherman Geronimo-Tan and you can find his Flickr photostream here: Sherman Geronimo-Tan’s Flickr Photostream
The photos are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.

So, let’s do it!

CSS::

.rg-image-wrapper{
    position:relative;
    padding:20px 30px;
    background:transparent url(http://tympanus.net/Tutorials/ResponsiveImageGallery/images/black.png) repeat top left;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    min-height:20px;
}
.rg-image{
    position:relative;
    text-align:center;
    line-height:0px;
}
.rg-image img{
    max-height:100%;
    max-width:100%;
}
.rg-image-nav a{
    position:absolute;
    top:0px;
    left:0px;
    background:#000 url(http://tympanus.net/Tutorials/ResponsiveImageGallery/images/nav.png) no-repeat -20% 50%;
    width:28px;
    height:100%;
    text-indent:-9000px;
    cursor:pointer;
    opacity:0.3;
    outline:none;
    -moz-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
}
.rg-image-nav a.rg-image-nav-next{
    right:0px;
    left:auto;
    background-position:115% 50%;
    -moz-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
    border-radius: 0px 10px 10px 0px;
}
.rg-image-nav a:hover{
    opacity:0.8;
}
.rg-caption {
    text-align:center;
    margin-top:15px;
    position:relative;
}
.rg-caption p{
    font-size:11px;
    letter-spacing:2px;
    font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
    line-height:16px;
    padding:0 15px;
    text-transform:uppercase;
}
.rg-view{
    height:30px;
}
.rg-view a{
    display:block;
    float:right;
    width:16px;
    height:16px;
    margin-right:3px;
    background:#464646 url(http://tympanus.net/Tutorials/ResponsiveImageGallery/images/views.png) no-repeat top left;
    border:3px solid #464646;
    opacity:0.8;
}
.rg-view a:hover{
    opacity:1.0;
}
.rg-view a.rg-view-full{
    background-position:0px 0px;
}
.rg-view a.rg-view-selected{
    background-color:#6f6f6f;
    border-color:#6f6f6f;
}
.rg-view a.rg-view-thumbs{
    background-position:0px -16px;
}
.rg-loading{
    width:46px;
    height:46px;
    position:absolute;
    top:50%;
    left:50%;
    background:#000 url(http://tympanus.net/Tutorials/ResponsiveImageGallery/images/ajax-loader.gif) no-repeat center center;
    margin:-23px 0px 0px -23px;
    z-index:100;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    opacity:0.7;
}

/* Elastislide Style */
.es-carousel-wrapper{
    background: #101010;
    padding:10px 27px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position:relative;
    -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.9);
    box-shadow:0px 1px 3px rgba(0, 0, 0, 0.9);
    position:relative;
    margin-bottom:20px;
}
.es-carousel{
    overflow:hidden;
    background:#000;
}
.es-carousel ul{
    display:none;
}
.es-carousel ul li{
    height:100%;
    float:left;
    display:block;
}
.es-carousel ul li a{
    display:block;
    border-style:solid;
    border-color:#222;
    opacity:0.8;
    -webkit-touch-callout:none;
    /* option */
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.es-carousel ul li.selected a{
    border-color:#fff;
    opacity:1.0;
}
.es-carousel ul li a img{
    display:block;
    border:none;
    max-height:100%;
    max-width:100%;
}
.es-nav span{
    position:absolute;
    top:50%;
    left:8px;
    background:transparent url(http://tympanus.net/Tutorials/ResponsiveImageGallery/images/nav_thumbs.png) no-repeat top left;
    width:14px;
    height:26px;
    margin-top:-13px;
    text-indent:-9000px;
    cursor:pointer;
    opacity:0.8;
}
.es-nav span.es-nav-next{
    right:8px;
    left:auto;
    background-position:top right;
}
.es-nav span:hover{
    opacity:1.0;
}

SCRIPT::

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript" src="http://tympanus.net/Tutorials/ResponsiveImageGallery/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/ResponsiveImageGallery/js/jquery.elastislide.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/ResponsiveImageGallery/js/gallery.js"></script>

HTML::

<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/1.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>

<li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/2.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></a></li>

<li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/3.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/3.jpg" alt="image03" data-description="A plaintful story from a sistering vale" /></a></li>

<li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/4.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/4.jpg" alt="image04" data-description="My spirits to attend this double voice accorded" /></a></li>

<li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/5.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/5.jpg" alt="image05" data-description="And down I laid to list the sad-tuned tale" /></a></li>

<li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/6.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/6.jpg" alt="image06" data-description="Ere long espied a fickle maid full pale" /></a></li>

<li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/7.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/7.jpg" alt="image07" data-description="Tearing of papers, breaking rings a-twain" /></a></li>

<li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/8.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/8.jpg" alt="image08" data-description="Storming her world with sorrow's wind and rain" /></a></li>

<li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/9.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/9.jpg" alt="image09" data-description="Upon her head a platted hive of straw" /></a></li>

<li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/10.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/10.jpg" alt="image10" data-description="Which fortified her visage from the sun" /></a></li>
</ul>

</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->

<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
<div class="rg-image-wrapper">
{{if itemsCount > 1}}
<div class="rg-image-nav">
<a href="#" class="rg-image-nav-prev">Previous Image</a>
<a href="#" class="rg-image-nav-next">Next Image</a>
</div>
{{/if}}
<div class="rg-image"></div>
<div class="rg-loading"></div>
<div class="rg-caption-wrapper">
<div class="rg-caption" style="display:none;">
<p></p>
</div>
</div>
</div>
</script>

Example Responsive Image Gallery With Thumbnail Carousel.!


Please rate this article: