<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="bg-content">
<!-- Content -->
<div id="content"><div class="ic"></div>
<div class="container">
<div class="row">
<article class="span12">
<h4>Portfolio</h4>
</article>
<div class="clear"></div>
<ul class="portfolio clearfix">
<li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/1.jpg">paste image here</a></li>
<li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/2.jpg">paste image here</a></li>
<li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/3.jpg">paste image here</a></li>
<li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/4.jpg">paste image here</a></li>
<div class="clear"></div>
<li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/9.jpg">paste image here</a></li>
<li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/10.jpg">paste image here</a></li>
<li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/11.jpg">paste image here</a></li>
<li class="box"><a href="img/image-blank.png" class="magnifier" ><img alt="" src="img/work/12.jpg">paste image here</a></li>
</ul>
</div>
</div>
</div>
</div> </div>
<script type="text/javascript">if($(window).width()>1024){document.write("<"+"script src='js/jquery.preloader.js'></"+"script>");} </script>
<script>
jQuery(window).load(function() {
$x = $(window).width();
if($x > 1024)
{
jQuery("#content .row").preloader(); }
jQuery('.magnifier').touchTouch();
jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function (){jQuery(this).css('display','none')});
});
</script>
#content {
position: relative;
padding: 0 0 40px;
}
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 724px;
}
.container {
margin-right: auto;
margin-left: auto;
}
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 940px;
}
div {
display: block;
}
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 20px;
color: #707070;
background: #ffffff;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.container:before, .container:after {
display: table;
content: "";
line-height: 0;
}
.container:after {
clear: both;
}
.row {
margin-left: -20px;
}
.row:before, .row:after {
display: table;
content: "";
line-height: 0;
}
.row:after {
clear: both;
}
.span12 {
width: 724px;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.span12 {
width: 940px;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
article, aside, footer, header, hgroup, main, nav, section {
display: block;
}
.clearfix {
}
.magnifier {
opacity: 1;
position: relative;
height: auto;
display: block;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.box{
background: #F2FC27;
max-width: 100%;
width: 150px;
height: 150px;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
a {
color: #F25C27;
text-decoration: none;
outline: none;
}
a:-webkit-any-link {
color: -webkit-link;
cursor: auto;
text-decoration: underline;
}
.magnifier:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
left: 0;
top: 0;
background: url(../img/magnifier.png) center center no-repeat #000000;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.portfolio {
margin-left: -10px;
}
.portfolio {
list-style: none outside;
margin: 0;
}
ul, ol {
padding: 0;
margin: 0 0 10px 25px;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.portfolio li {
margin-left: 30px;
width: 45%;
}
.portfolio li {
float: left;
margin: 0 0 30px 30px;
}
li {
line-height: 20px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
/**
* @name jQuery touchTouch plugin
* @author Martin Angelov
* @version 1.0
* @url http://tutorialzine.com/2012/04/mobile-touch-gallery/
* @license MIT License
*/
(function(){
/* Private variables */
var overlay = $('<div id="galleryOverlay">'),
slider = $('<div id="gallerySlider">'),
prevArrow = $('<a id="prevArrow"></a>'),
nextArrow = $('<a id="nextArrow"></a>'),
overlayVisible = false;
/* Creating the plugin */
$.fn.touchTouch = function(){
var placeholders = $([]),
index = 0,
items = this;
// Appending the markup to the page
overlay.hide().appendTo('body');
slider.appendTo(overlay);
// Creating a placeholder for each image
items.each(function(){
placeholders = placeholders.add($('<div class="placeholder">'));
});
// Hide the gallery if the background is touched / clicked
slider.append(placeholders).on('click',function(e){
if(!$(e.target).is('img')){
hideOverlay();
}
});
// Listen for touch events on the body and check if they
// originated in #gallerySlider img - the images in the slider.
$('body').on('touchstart', '#gallerySlider img', function(e){
var touch = e.originalEvent,
startX = touch.changedTouches[0].pageX;
slider.on('touchmove',function(e){
e.preventDefault();
touch = e.originalEvent.touches[0] ||
e.originalEvent.changedTouches[0];
if(touch.pageX - startX > 10){
slider.off('touchmove');
showPrevious();
}
else if (touch.pageX - startX < -10){
slider.off('touchmove');
showNext();
}
});
// Return false to prevent image
// highlighting on Android
return false;
}).on('touchend',function(){
slider.off('touchmove');
});
// Listening for clicks on the thumbnails
items.on('click', function(e){
e.preventDefault();
// Find the position of this image
// in the collection
index = items.index(this);
showOverlay(index);
showImage(index);
// Preload the next image
preload(index+1);
// Preload the previous
preload(index-1);
});
// If the browser does not have support
// for touch, display the arrows
if ( !("ontouchstart" in window) ){
overlay.append(prevArrow).append(nextArrow);
prevArrow.click(function(e){
e.preventDefault();
showPrevious();
});
nextArrow.click(function(e){
e.preventDefault();
showNext();
});
}
// Listen for arrow keys
$(window).bind('keydown', function(e){
if (e.keyCode == 37){
showPrevious();
}
else if (e.keyCode==39){
showNext();
}
});
/* Private functions */
function showOverlay(index){
// If the overlay is already shown, exit
if (overlayVisible){
return false;
}
// Show the overlay
overlay.show();
setTimeout(function(){
// Trigger the opacity CSS transition
overlay.addClass('visible');
}, 100);
// Move the slider to the correct image
offsetSlider(index);
// Raise the visible flag
overlayVisible = true;
}
function hideOverlay(){
// If the overlay is not shown, exit
if(!overlayVisible){
return false;
}
// Hide the overlay
overlay.hide().removeClass('visible');
overlayVisible = false;
}
function offsetSlider(index){
// This will trigger a smooth css transition
slider.css('left',(-index*100)+'%');
}
// Preload an image by its index in the items array
function preload(index){
setTimeout(function(){
showImage(index);
}, 1000);
}
// Show image in the slider
function showImage(index){
// If the index is outside the bonds of the array
if(index < 0 || index >= items.length){
return false;
}
// Call the load function with the href attribute of the item
loadImage(items.eq(index).attr('href'), function(){
placeholders.eq(index).html(this);
});
}
// Load the image and execute a callback function.
// Returns a jQuery object
function loadImage(src, callback){
var img = $('<img>').on('load', function(){
callback.call(img);
});
img.attr('src',src);
}
function showNext(){
// If this is not the last image
if(index+1 < items.length){
index++;
offsetSlider(index);
preload(index+1);
}
else{
// Trigger the spring animation
slider.addClass('rightSpring');
setTimeout(function(){
slider.removeClass('rightSpring');
},500);
}
}
function showPrevious(){
// If this is not the first image
if(index>0){
index--;
offsetSlider(index);
preload(index-1);
}
else{
// Trigger the spring animation
slider.addClass('leftSpring');
setTimeout(function(){
slider.removeClass('leftSpring');
},500);
}
}
};
})(jQuery);
