ziver/zallery
1
0
Fork 0
Code Pull requests Releases Activity

New prototype

Browse source
This commit is contained in:
Ziver Koc 2017-08-04 12:45:12 +02:00
parent f6be23ee4b
commit a81c8c5418
199 changed files with 16344 additions and 8200 deletions
Download patch file Download diff file Expand all files Collapse all files

95
prototype/main.html Executable file
View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Photo Gallery">
<meta name="author" content="Ziver Koc">
<link rel="icon" href="favicon.ico">
<title>Koc.se</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/zallery.css" rel="stylesheet">
<!-- Bootstrap core JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript">
$(function(){
$('.grid').imagesLoaded(function(){
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
});
});
});
</script>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Gallery</a></li>
<li><a href="#">Faces</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Geni</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<span class="glyphicon glyphicon-user"></span>
<strong style="padding-right:20px">Ziver Koc</strong>
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="content">
<div class="gallery">
<div class="folders row grid">
<div class="grid-item col-md-2 col-sm-2 col-xs-4"><img class="img-responsive" src="http://koc.se/Zallery/img/folder.png" /></div>
<div class="grid-item col-md-2 col-sm-2 col-xs-4"><img class="img-responsive" src="http://koc.se/Zallery/img/folder.png" /></div>
<div class="grid-item col-md-2 col-sm-2 col-xs-4"><img class="img-responsive" src="http://koc.se/Zallery/img/folder.png" /></div>
</div>
<div class="images row grid">
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/200" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/400" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/200" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/200" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/800" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/200" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/300" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/400" /></div>
</div>
</div>
</div> <!-- /content -->
</div> <!-- /container -->
</body>
</html>