Skip to content

Instantly share code, notes, and snippets.

@MicFin

MicFin/gist:6379f79bf2bb3b0592cf

Last active August 29, 2015 14:04
Show Gist options
  • Save MicFin/6379f79bf2bb3b0592cf to your computer and use it in GitHub Desktop.
Save MicFin/6379f79bf2bb3b0592cf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.js
$(function() {
var images = [
{image: "images/dog1.jpg", caption: "caption 1"},
{image: "images/dog2.jpg", caption: "caption 2"},
{image: "images/dog3.jpg", caption: "caption 3"},
{image: "images/dog4.jpg", caption: "caption 4"},
{image: "images/dog5.jpg", caption: "caption 5"},
{image: "images/dog6.jpg", caption: "caption 6"}
];
var number_of_images = images.length;
for (i = 0; i < number_of_images; i++) {
var image = images[i].image;
var caption = images[i].caption;
var thumbs = "<div class='thumbs'>";
thumbs += "<a href='#'>";
thumbs += "<img data-caption='"+caption+"' src='"+image+"'>";
thumbs += "</a></div>";
$("#container").append(thumbs);
}
$('.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();
});
$('#modalBg').on('click', function(e){
e.preventDefault();
$('#modalBg, .bigPhoto').fadeOut();
});
});
Raw
gistfile2.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="bigPhoto">
</div>
<div id="modalBg"></div>
</div>
<script src = "scripts/jquery-2.1.1.js"></script>
<script src = "scripts/main.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment