Auto Zoom Image onClick with Lighter Plugin
http://blog.kangrian.com
HTML
<div class="postingan"><a href="http://3.bp.blogspot.com/-oAHu8MNAFus/UxFzakQCfsI/AAAAAAAAEXs/0KXqEjEOdD4/s1600/html5.jpg"><img class="img-swap" src="http://3.bp.blogspot.com/-oAHu8MNAFus/UxFzakQCfsI/AAAAAAAAEXs/0KXqEjEOdD4/s400/html5.jpg"/></a>
</div>
<div class="postingan">
</div>
CSS
.lighter, .lighter * {
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out
}
.lighter {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:4000;
opacity:1
}
.lighter.fade {
opacity:0
}
.lighter.fade .lighter-container {
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-ms-transform:scale(0.5);
-o-transform:scale(0.5);
transform:scale(0.5)
}
.lighter img {
width:100%;
height:100%
}
.lighter .lighter-overlay {
background:rgba(0, 0, 0, 0.5);
height:100%;
width:100%
}
.lighter .lighter-container {
background:white;
position:absolute;
z-index:4000;
top:50%;
left:50%;
right:50%;
bottom:50%;
box-shadow:0 2px 8px rgba(0, 0, 0, 0.5)
}
.lighter .lighter-container .lighter-close {
top: 0;
right: 0;
width: 30px;
height: 30px;
margin: -15px;
line-height: 30px;
font-size: 16pt;
font-family: Helvetica, Arial, serif;
}
.lighter .lighter-container .lighter-next {
right:40px;
top:50%;
width:40px;
height:40px;
margin:-20px 0;
line-height:34px;
font-size:32pt;
font-family:Times, serif
}
.lighter .lighter-container .lighter-prev {
left:40px;
top:50%;
width:40px;
height:40px;
margin:-20px;
line-height:24pt;
font-size:34px;
font-family:Times, serif
}
.lighter .lighter-container .lighter-next, .lighter .lighter-container .lighter-prev, .lighter .lighter-container .lighter-close {
cursor:pointer;
position:absolute;
z-index:8000;
text-align:center;
border-radius:40px;
color:rgba(255, 255, 255, 0.8);
background:rgba(0, 0, 0, 0.2);
}
.lighter .lighter-container .lighter-next:hover, .lighter .lighter-container .lighter-prev:hover, .lighter .lighter-container .lighter-close:hover {
color:white;
text-decoration: none;
background:rgba(0, 0, 0, 0.6)
}
.lighter...
JavaScript
// Setting Auto Lighter
$(".postingan img").parents("a").on("click", function (a,b) {
a.preventDefault();
a.stopPropagation();
return $(this).lighter()
});
$(function(){
$(".img-swap").live('click', function() {
var self = this,
file = this.src,
common = file.substring(0, file.length-6)
currentId = +file.substr(-6,2),
id = ('0' + (currentId+1)).substr(-2),
nextimage= new Image();
nextimage.onload = function(){
// image was preloaded so it exists
var img = this;
$(self).fadeOut(300, function(){self.src = img.src; $(self).fadeIn(300)});
};
nextimage.onerror = function(){
// error occured while preloading. we assume image does not exist
$(self).fadeOut(300, function(){self.src = common+ 'html5.jpg'; $(self).fadeIn(300)});
};
nextimage.src = common + id + '.jpg';
});
});
// jQuery Lighter Plugin
(function () {
var g, h, e, f = function (b, a) {
return function () {
return b.apply(a, arguments)
}
};
g = jQuery;
h = (function () {
function a() {}
a.transitions = {
webkitTransition: "webkitTransitionEnd",
mozTransition: "mozTransitionEnd",
oTransition: "oTransitionEnd",
transition: "transitionend"
};
a.transition = function (k) {
var c, l, d, b;
c = k[0];
b = this.transitions;
for (d in b) {
l = b[d];
if (c.style[d] != null) {
return l
}
}
};
a.execute = function (d, b) {
var c;
c = this.transition(d);
if (c != null) {
return d.one(c, b)
} else {
return b()
}
};
return a
})();
e = (function () {
a.settings = {
padding: 40,
dimensions: {
...