Responsive Image Gallery With Thumbnail Carousel Responsive Image Gallery With Thumbnail Carousel

 
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>