jQuery带放大镜的迷你幻灯片插件

这是一款非常迷你型的jQuery幻灯片插件。插件中带有放大镜效果，鼠标悬停在幻灯片上时即可放大当前的幻灯片图片。

插件中集成了 Cloud Zoom plugin 和 Fancybox plugin。

HTML

<div class="item">
    <div class="thumb_wrapper">
        <div class="thumb">
            <ul>
                <li>
                    <a href="images/formstack1.jpg">
                        <img src="images/thumbs/formstack1.jpg" alt="Formstack 1"/>
                    </a>
                </li>
                <li>...</li>
                ...
            </ul>
        </div>
        <a class="prev" href="#"></a>
        <a class="next" href="#"></a>
        <span>Hover to zoom, click to view</span>
    </div>
    <div class="description">
        <h2>Portfolio Item</h2>
        <p>Some description</p>
    </div>
</div>
                

另外，还要为每一个超链接添加下面的属性：

<a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack1.jpg">...</a>
                

因为集成的两个jQuery插件中都使用了“rel”属性，而我们在这里我们需要改变Fancybox的“rel”属性，所以我们使用了“rev”属性。Fancybox能够通过“rev”属性给定的图片组创建一个幻灯片。

为了配置Cloud Zoom我们在“rel”中设定了一些参数。

调用插件

首先引入必要的js和css文件：

><link rel="stylesheet" type="text/css" href="cloud-zoom/cloud-zoom.css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.js"></script>
                

调用插件

$("#content .cloud-zoom").fancybox({
    'transitionIn'  :   'elastic',
    'transitionOut' :   'none',
    'speedIn'       :   600,
    'speedOut'      :   200,
    'overlayShow'   :   true,
    'overlayColor'  :   '#000',
    'cyclic'        :   true,
    'easingIn'      :   'easeInOutExpo'
});
$("#content .mousetrap").live('click',function(){
    $(this).prev().trigger('click');
});
var $content    = $('#content'),
$thumb_list = $content.find('.thumb > ul');
$thumb_list.each(function(){
    var $this_list  = $(this),
    total_w     = 0,
    loaded      = 0,
    //preload all the images first
    $images     = $this_list.find('img'),
    total_images= $images.length;
    $images.each(function(){
        var $img    = $(this);
        $('').load(function(){
            ++loaded;
            if (loaded == total_images){
                $this_list.data('current',0).children().each(function(){
                    total_w += $(this).width();
                });
                $this_list.css('width', total_w + 'px');

                //next / prev events

                $this_list.parent()
                .siblings('.next')
                .bind('click',function(e){
                    var current = $this_list.data('current');
                    if(current == $this_list.children().length -1) return false;
                    var next    = ++current,
                    ml      = -next * $this_list.children(':first').width();

                    $this_list.data('current',next)
                    .stop()
                    .animate({
                        'marginLeft'    : ml + 'px'
                    },400);
                    e.preventDefault();
                })
                .end()
                .siblings('.prev')
                .bind('click',function(e){
                    var current = $this_list.data('current');
                    if(current == 0) return false;
                    var prev    = --current,
                    ml      = -prev * $this_list.children(':first').width();

                    $this_list.data('current',prev)
                    .stop()
                    .animate({
                        'marginLeft'    : ml + 'px'
                    },400);
                    e.preventDefault();
                });
            }
        }).attr('src',$img.attr('src'));
    });
});