erictran308 · Jul 23, 2014
diff --git a/‎Exercise1.css
+12-2 b/‎Exercise1.css
+12-2
diff --git a/‎Exercise1.html
+3-3 b/‎Exercise1.html
+3-3
diff --git a/‎main.js
+20-9 b/‎main.js
+20-9
diff --git a/‎pic1_thumbnail.jpg
22.5 KB b/‎pic1_thumbnail.jpg
22.5 KB
diff --git a/‎pic2_thumbnail.jpg
55.3 KB b/‎pic2_thumbnail.jpg
55.3 KB
diff --git a/‎pic3_thumbnail.jpg
25 KB b/‎pic3_thumbnail.jpg
25 KB
@@ -8,8 +8,6 @@ h1{
 .thumbnail{
 	display: block;
 	margin: 20px auto;
-	height: 10%;
-	width: 10%;
 }
 
 .thumbnail:hover{
@@ -74,4 +72,16 @@ p{
 
 #closeBttn:hover{
 	cursor: pointer;
+}
+
+.loading{
+	position: fixed;
+	top:0;
+	right:0;
+	bottom:0;
+	left:0;
+	background: rgba( 255, 255, 255, .8 )
+                url('http://i.stack.imgur.com/FhHRx.gif')
+                50% 50%
+                no-repeat;
 }
@@ -5,9 +5,9 @@
 	</head>
 	<body>
 		<h1>Light Box Example</h1>
-		<img class="thumbnail" id="pic1" src="pic1.jpg">
-		<img class="thumbnail" id="pic2" src="pic2.jpg">
-		<img class="thumbnail" id="pic3" src="pic3.jpg">
+		<img class="thumbnail" id="pic1" src="pic1_thumbnail.jpg" data-image="pic1.jpg">
+		<img class="thumbnail" id="pic2" src="pic2_thumbnail.jpg" data-image="pic2.jpg">
+		<img class="thumbnail" id="pic3" src="pic3_thumbnail.jpg" data-image="pic3.jpg">
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ex, autem harum ullam, nostrum saepe, qui at est ipsa distinctio fuga ipsam totam ducimus libero iure maxime placeat asperiores officia.
 		<br>
 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum odio, voluptatibus nesciunt quisquam porro doloribus incidunt numquam quos animi. Ab aperiam dolores mollitia iusto veniam dolorum, consequuntur commodi exercitationem!
 
@@ -1,31 +1,41 @@
 
 $(document).ready(function(){
 	$('.thumbnail').click(function() {
-
 		var cover = $('<div id="cover"></div>');
 		$('body').append(cover);
 
-		var pictureUrl = $(this).attr('src');
+		var pictureUrl = $(this).attr('data-image');
 		var fullImg = $("<img/>");
 		var actualWidth;
 		var actualHeight;
 		fullImg
 				.attr('src',pictureUrl)
 				.attr('id','fullPic');
+
+
+
 		var container = $('<div id="container"></div>');
 		var h = Math.round($(window).height() - 40);
 		container.css('height',h+"px");
 		container.css('width','auto');
 		container.css('max-width','60%');
+		container.addClass('loading');
+
+
+		fullImg.load(function() {
+			$('#container').append($(this));
+			$('#container').append('<span id="caption">This is beautiful</span>');
+			$('#container').append('<span id="closeBttn">X</span>');
+			var h = Math.round($('#fullPic').height() + $('#caption').height());
+			$('#container').css('height',h+"px");
+			$('#caption').css('margin-left',$('#fullPic').css('margin-left'));
+			$('#closeBttn').css('margin-right',$('#fullPic').css('margin-right'));
+			$('#container').removeClass('loading');
+		});
+
 		$('#cover').append(container);
-		$('#container').append(fullImg);
-		$('#container').append('<span id="caption">This is beautiful</span>');
-		$('#container').append('<span id="closeBttn">X</span>');
 		$('#cover').fadeIn(800);
-		var h = Math.round($('#fullPic').height() + $('#caption').height());
-		$('#container').css('height',h+"px");
-		$('#caption').css('margin-left',$('#fullPic').css('margin-left'));
-		$('#closeBttn').css('margin-right',$('#fullPic').css('margin-right'));
+
 	});
 
 	$('body').on('click','#closeBttn',function() {
@@ -54,4 +64,5 @@ $(document).ready(function(){
 		$('#closeBttn').css('margin-right',$('#fullPic').css('margin-right'));
 	});
 
+
 });