<li><a href=”#”><img src=”imgs/peanuts.jpg” alt=”Peanuts!” /></a></li>
<li><a href=”#”><img src=”imgs/thumb5.jpg” alt=”1956 Yellow Car” /></a></li>
<li><a href=”#”><img src=”imgs/thumb4.jpg” alt=”Ooooh. Pretty” /></a></li>
<li><a href=”#”><img src=”imgs/thumb3.jpg” alt=”Lets build something” /></a></li>
<li><a href=”#”><img src=”imgs/thumb2.jpg” alt=”Puppy love” /></a></li>
<li><a href=”#”><img src=”imgs/thumb1.jpg” alt=”It’s a Toy Story” /></a></li>
</ul>
</div>
</div>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript” src=”js/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>
</body>
</html>
css:
ul.thumb {float: left;list-style: none;margin: 0; padding: 10px;width: 800px;background-color: white;}
ul.thumb li {margin: 0; padding: 5px;float: left;position: relative;width: 110px;height: 110px;}
ul.thumb li img {width: 100px; height: 100px;border: 1px solid #ddd;padding: 5px;background: #f0f0f0;position: absolute;left: 0; top: 0;-ms-interpolation-mode: bicubic; }
ul.thumb li img.hover {margin-top:15px;background:url(../imgs/thumb_bg.png) no-repeat center center;border: none;}
.title{position:absolute;width:185px;height:35px;margin:0;font-weight:900;background:url(../imgs/blue.png) no-repeat center center;padding:17px 0 0 0;text-align:center; color: #fff; }
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);
