Skip to content

Instantly share code, notes, and snippets.

@LL782

LL782/imageGallery.html

Created August 27, 2012 13:16
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 LL782/3488337 to your computer and use it in GitHub Desktop.
Save LL782/3488337 to your computer and use it in GitHub Desktop.
Download ZIP
Image Source Swapping
Raw
imageGallery.html
<!DOCTYPE html>
<head>
</head>
<body>
<div id="imgSection">
<div id="image-thumbs">
<a href="img_1_large.png"><img src="img_1_thumb.png" /></a>
<a href="img_2_large.png"><img src="img_2_thumb.png" /></a>
<a href="img_3_large.png"><img src="img_3_thumb.png" /></a>
</div><!-- #image-thumbs -->
<div id="main-image">
<img src="img_1_large.png" />
</div><!-- #main-image -->
</div><!-- imgSection -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="imgSrcSwapping.js"></script>
</body>
</html>
Raw
imgSrcSwapping.js
$(function() {
/*
IMG SRC SWAPPING
*/
var $imgSection = $('#imgSection');
if ( $imgSection.length ) {
$('#image-thumbs a', $imgSection).click(function(e){
e.preventDefault();
var src = $(this).attr('href');
$('#main-image img').attr( 'src', src );
});
} // end if
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment