Skip to content

Instantly share code, notes, and snippets.

@tsulatsitamim

tsulatsitamim/index.html

Created May 12, 2018 23:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tsulatsitamim/59001ad73f96ab5af1fa68be3c85e6f3 to your computer and use it in GitHub Desktop.
Save tsulatsitamim/59001ad73f96ab5af1fa68be3c85e6f3 to your computer and use it in GitHub Desktop.
Download ZIP
Simple jQuery Gallery With Thumbnails
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Simple jQuery Gallery With Thumbnails</title>
</head>
<body>
<div><img id="holder" src="" alt=""></div>
<div>
<ul>
<li class="thumb"><a href="#"><img src="http://via.placeholder.com/350?text=1" alt=""></a></li>
<li class="thumb"><a href="#"><img src="http://via.placeholder.com/350?text=2" alt=""></a></li>
<li class="thumb"><a href="#"><img src="http://via.placeholder.com/350?text=3" alt=""></a></li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready( function(){
$("#holder").attr('src', $(".thumb img").first().attr("src"));
$(".thumb img").click(function(e){
e.preventDefault();
var thumb = $(this);
$( "#holder" ).animate({
'opacity': 0
}, function(){
$(this).attr('src', $(thumb).attr('src'));
$(this).animate({
'opacity': 1
});
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment