Mini Gallery
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="micro-gallery slide-gallery">
<div class="gallery-box"><img class="galleryImage" src="https://lh6.ggpht.com/9_mmwnue-IL6yb-lwH3198kYoxy2zhn5icXZAIgLfoXIQwurF_zUsmmAPrkz74bFi2OT=w300"></div>
</div>
<div class="button-box">
<img class="img-selected" imgurl="https://lh6.ggpht.com/9_mmwnue-IL6yb-lwH3198kYoxy2zhn5icXZAIgLfoXIQwurF_zUsmmAPrkz74bFi2OT=w300" src="https://s3.amazonaws.com/imglibs/ab1.jpg">
<img imgurl="https://cnet4.cbsistatic.com/img/y6ZxlywlGsAyNeu5wQonohJ5I4s=/670x503/2017/02/27/f7bbf44b-1d6c-4991-8641-d8991f1e82d2/astro-boy-gets-san-andreas-writers1.jpg" src="https://s3.amazonaws.com/imglibs/ab2.jpg">
<img imgurl="https://myanimelist.cdn-dena.com/images/anime/10/79582.jpg" src="https://s3.amazonaws.com/imglibs/ab3.jpg">
<img imgurl="https://i.pinimg.com/originals/47/93/d5/4793d5b6dd812bb0f1a5689916a83cca.jpg" src="https://s3.amazonaws.com/imglibs/ab4.jpg">
<img imgurl="http://www.behindthevoiceactors.com/_img/franchises/251.jpg" src="https://s3.amazonaws.com/imglibs/ab5.jpg">
<img imgurl="https://tolivetolearn.files.wordpress.com/2012/11/astroboy.jpg" src="https://s3.amazonaws.com/imglibs/ab6.jpg">
</div>
CSS
.micro-gallery{
width:calc(100% - 40px);
padding: 0 20px 0 20px;
max-width: 600px;
display:block;
position:relative;
margin: 0 auto;
transition: all 0.5s;
}
.gallery-box{
transition: all 0.5s;
}
.galleryImage{
width:100%;
height: auto;
transition: all 0.5s;
}
.button-box{
width:100%;
max-width: 600px;
display:block;
position:relative;
margin: 0 auto;
text-align: center;
}
.button-box img{
display:inline-block;
transition: all 0.5s;
width: 16%;
height: auto;
opacity:0.3;
}
.button-box img:hover{
opacity:1;
}
.fade-image{
opacity:0;
}
img.img-selected{
opacity:1;
}
JAVASCRIPT
$( document ).ready(function() {
$( ".button-box img" ).click(function() {
$(".button-box img").removeClass('img-selected');
$(this).addClass('img-selected');
$('.gallery-box').fadeTo(0,0).delay(250).fadeTo(500,1);
$('.galleryImage').attr("src", $(this).attr("imgUrl"));
});
});
