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")); }); });
Expand for more options Login