Skip to content

Instantly share code, notes, and snippets.

@MicFin

MicFin/JS

Last active August 29, 2015 14:04
Show Gist options
  • Save MicFin/701186b4cc3c59a1aa2e to your computer and use it in GitHub Desktop.
Save MicFin/701186b4cc3c59a1aa2e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title>Dogs of the week</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<h1>Dogs of the week</h1>
<div class="thumbs">
<a href="#"><img data-caption="caption 1" src="images/dog1.jpg"></a>
</div>
<div class="thumbs">
<a href="#"><img data-caption="caption2" src="images/dog2.jpg"></a>
</div>
<div id="dog3" class="thumbs">
<a href="#"><img data-caption="caption 3" src="images/dog3.jpg"></a>
</div>
<div class="thumbs">
<a href="#"><img data-caption="caption 4" src="images/dog6.jpg"></a>
</div>
<div class="thumbs">
<a href="#"><img data-caption="caption 5" src="images/dog7.jpg"></a>
</div>
<div class="thumbs" class="clearfix">
<a href="#"><img data-caption="caption 6" src="images/dog8.jpg"></a>
</div>
<div class="bigPhoto">
</div>
<div id="modalBg"></div>
</div>
<script src = "scripts/jquery-2.1.1.js"></script>
<script src = "scripts/main.js"></script>
</body>
</html>
Raw
JS
$(function() {
$('.thumbs').on('click', function(e) {
e.preventDefault();
var input = $(this).find('img').attr('src');
var caption = $(this).find('img').data('caption');
var image_html = "<img src='"+input+"'>";
var caption_html = "<section class='caption'>";
caption_html += "<p>"+caption+"</p>";
caption_html += "</section>";
$(".bigPhoto").empty();
$(".bigPhoto").append(image_html).append(caption_html);
$('#modalBg, .bigPhoto').fadeIn();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment