Swap images dynamically with jquery flash like zooming
<!–[if IE 6]>
<style type=”text/css” media=”screen”>
ul.thumb li img.hover {
margin-top:15px;
background:url(thumb_bg.gif) no-repeat center center;
border: none;
}
ul.thumb li .title{color:#fff;width:185px;height:50px;margin:0;font-weight:900;background:url(title.gif) no-repeat center center;padding:17px 0 0 0;text-align:center;}
</style>
<![endif]–>
<style type=”text/css”>
body {
font: Arial, Helvetica, sans-serif normal 10px;
margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
#page{
margin:0 auto;
position:relative;
width:850px;
font-family:verdana;
font-size:12px;
}
#content{
width:100%;
}
pre{
border:3px solid #ccc;
padding:5px;
font-size:12px;
font-family:arial;
}
.bold{font-weight:bold;}
.blue{color:blue;}
.red{color:red;}
#footer{
margin-top:5px;
text-align:center;
width:100%;
height:auto;
padding:5px;
background-color:#ccc;
}
#logo,#foot { margin-left: 10px; }
</style>
<div id=”page”>
<center>
</center>
<br><br><br>
<div id=”content”>
<div class=”container”>
<img id=”logo” src=”logo.jpg”></img>
<ul class=”thumb”>
<li><a href=”#”><img src=”robots.jpg” alt=”Robots like cameras” v2=”monster.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”monster.jpg” alt=”Monsters!” v2=”monster.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”santa.jpg” alt=”Santa down under” v2=”santa.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”thumb6.jpg” alt=”Sponguebob!” v2=”thumb6.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”thumb7.jpg” alt=”Star Wars” v2=”thumb7.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”hulk.jpg” alt=”Hulk Smash!” v2=”hulk.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”dino.png” alt=”Dinosaur time” v2=”dino.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”orange.jpg” alt=”Orange car” v2=”orange.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”alien.jpg” alt=”Aliens!” v2=”alien.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”supe.jpg” alt=”It’s Superman!” v2=”supe.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”garfield.jpg” alt=”Where’s my lasagne?” v2=”garfield.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”bridge.jpg” alt=”The bridge at Sunset” v2=”bridge.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”peanuts.jpg” alt=”Peanuts!” v2=”peanuts.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”thumb5.jpg” alt=”1956 Yellow Car” v2=”thumb5.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”thumb4.jpg” alt=”Ooooh. Pretty” v2=”thumb4.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”thumb3.jpg” alt=”Lets build something” v2=”thumb3.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”thumb2.jpg” alt=”Puppy love” v2=”thumb2.jpg” v1=”robots.jpg” /></a></li>
<li><a href=”#”><img src=”thumb1.jpg” alt=”It’s a Toy Story” v2=”thumb1.jpg” v1=”robots.jpg” /></a></li>
</ul>
<img id=”foot” src=”footer.jpg”></img>
</div>
</div>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript” src=”zoomer.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘ul.thumb li’).Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});
</script>
Source code of zoomer.js—>
(function ($) {
$.fn.Zoomer = function (b) {
var c = $.extend({
speedView: 200,
speedRemove: 400,
altAnim: false,
speedTitle: 400,
debug: false
}, b);
var d = $.extend(c, b);
function e(s) {
if (typeof console != “undefined” && typeof console.debug != “undefined”) {
console.log(s)
} else {
alert(s)
}
}
if (d.speedView == undefined || d.speedRemove == undefined || d.altAnim == undefined || d.speedTitle == undefined) {
e(‘speedView: ‘ + d.speedView);
e(‘speedRemove: ‘ + d.speedRemove);
e(‘altAnim: ‘ + d.altAnim);
e(‘speedTitle: ‘ + d.speedTitle);
return false
}
if (d.debug == undefined) {
e(‘speedView: ‘ + d.speedView);
e(‘speedRemove: ‘ + d.speedRemove);
e(‘altAnim: ‘ + d.altAnim);
e(‘speedTitle: ‘ + d.speedTitle);
return false
}
if (typeof d.speedView != “undefined” || typeof d.speedRemove != “undefined” || typeof d.altAnim != “undefined” || typeof d.speedTitle != “undefined”) {
if (d.debug == true) {
e(‘speedView: ‘ + d.speedView);
e(‘speedRemove: ‘ + d.speedRemove);
e(‘altAnim: ‘ + d.altAnim);
e(‘speedTitle: ‘ + d.speedTitle)
}
//Added for swaping the image by getting the custom attribute value of the image
$(this).hover(function () {
//alert(this)
var src = $(this).find(‘img’).attr(“v1”);
//alert(src);
$(this).find(‘img’).attr(“src”, src);
$(this).css({
‘z-index’: ’10’
});
$(this).find(‘img’).addClass(“hover”).stop().animate({
marginTop: ‘-110px’,
marginLeft: ‘-110px’,
top: ‘50%’,
left: ‘50%’,
width: ‘175px’,
height: ‘181px’,
padding: ’20px’
}, d.speedView);
if (d.altAnim == true) {
var a = $(this).find(“img”).attr(“alt”);
if (a.length != 0) {
$(this).prepend(‘<span class=”title”>’ + a + ‘</span>’);
$(‘.title’).animate({
marginLeft: ‘-42px’,
marginTop: ’90px’
}, d.speedTitle).css({
‘z-index’: ’10’,
‘position’: ‘absolute’,
‘float’: ‘left’
})
}
}
}, function () {
//Added for swaping the image by getting the custom attribute value of the image
var src = $(this).find(‘img’).attr(“v2”);
//alert(src);
$(this).find(‘img’).attr(“src”, src);
$(this).css({
‘z-index’: ‘0’
});
$(this).find(‘img’).removeClass(“hover”).stop().animate({
marginTop: ‘0’,
marginLeft: ‘0’,
top: ‘0’,
left: ‘0’,
width: ‘100px’,
height: ‘100px’,
padding: ‘5px’
}, d.speedRemove);
$(this).find(‘.title’).remove()
})
}
}
})(jQuery);
Santanu's Blog 