UIDev-substrate/index.html at master · xZarisx/UIDev-substrate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
	<title>Image Gallery</title>
	<script src="imageGallery.js"></script>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
	<!-- Latest compiled and minified JavaScript -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="content">
		<div id="contentContainer" ng-app="" ng-controller="currentImgController" ng-init="imageIndex=0" class="col-md-12">
			<div id="currentImageContent" class="col-md-4">
				<h2 id="currentImageTitle">{{gallery.photos[imageIndex].title || "No Title"}}</h2>
				<h3>By: {{gallery.photos[imageIndex].attribution || "No Author"}}</h3>
				<p>{{gallery.photos[imageIndex].description || "No Description"}}</p>
			</div>
			<div id="currentImageContainer" class="col-md-8"><img class="img-responsive" id="currentImage" ng-src="{{gallery.photos[imageIndex].src}}"></div>
			<div id="galleryList" class="col-md-12">
				<div ng-repeat="x in gallery.photos" class="imageContainer" ng-click="$parent.imageIndex = $index">
					<img ng-src="{{ x.src }}">
				</div>
			</div>
		</div>
	</div>
</body>
</html>