jQuery simple image gallery with thumbnails

Simple jQuery image gallery with thubmnails

I’ve searched the internet for a simple jQuery image gallery with thumbnails, without arrows, descriptions and ‘splashy’ effects. There are many websites with lots of gallery/slider plugins but all of them are not simple. So I decided to make one of my own which is very basic but can be expanded very simple!

My jQuery image gallery has:

  • 1 preview/big image
  • 3 vertical thumbnails
  • A smooth fade effect
  • Active class on the active thumbnail

My gallery is 470px wide and I made it on the WordPress way, with an array of 3 custom fields for the images. Naturally you can change this to what works for you.

The HTML:

<div id="image_gallery">

    <div id="current_image">
       <img id="above" width="370" src="<?php the_field('image_1'); ?>" /> 
       <img id="under" width="370" src="<?php the_field('image_2'); ?>" /> 
    </div><!--End current_image-->

    <div id="small_images">

       <?php $pictures = array('image_1', 'image_2', 'image_3'); ?>

       <?php foreach($pictures as $picture) : ?>

       <a class="small_image" rel="<?php the_field($picture); ?>"><img width="90" src="<?php the_field($picture); ?>" /></a>

       <?php endforeach; ?>

    </div><!--End small_images-->

</div><!--End image_gallery-->

The jQuery/Javascript:

<script>
$(document).ready(function () {
$("#small_images .small_image").first().addClass('active'); 

$(".small_image").click(function () {
event.preventDefault();
var image = $(this).prop("rel");
$('#under').prop('src', image);
$('#above').fadeOut(600, function () {
$('#above').prop('src', $('#under').prop('src')).show();
});

$(".small_image.active").removeClass('active');
$(this).addClass('active');
});

}); 
</script>

The CSS:

#current_image{
 width:370px;
 height:245px;
 float:left;
 background:#CCC;
 overflow:hidden;
 position:relative;
}
#current_image img{
 min-height:100%;
 position: absolute;
 top: 0;
 left: 0;
}
#above {
 z-index:10;
}
#small_images{
 width:90px;
 height:245px;
 float:right; 
}
.small_image{
 width:90px;
 height:75px;
 display:block;
 background:#CCC;
 margin:0 0 10px 0;
 overflow:hidden;
 cursor:pointer; 
 opacity:0.4; 
}
.small_image img{
 min-height:100%; 
}
.small_image.active{
 opacity:1; 
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s