JQUERY图片放大镜,图片切换273
在本教程中我们将创建一些不错的效果与jQuery组合或类似的网站。我们将创建一个小滑块并将其集成与神奇云变焦插件和优雅Fancybox插件.
对于每个项目,我们将有一个div元素。我们将添加一个元素的缩略图滑块我们会给类“thumb_wrapper”和一个元素描述与各自的类名称:
<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>
CSS 首先,我们将定义的风格单品:
.item{
    float:left;
    width:100%;
    clear:both;
    margin:35px 0px;
}
现在,我们将拇指位置包装器包含导航和缩略图的滑块:
.thumb_wrapper{
    width:290px;
    height:107px;
    position:relative;
    float:left;
    margin:20px 40px 0px 0px;
}
将绝对定位的导航元素。这就是为什么我们需要设置父相对位置。常见的风格的导航元素是:
.thumb_wrapper a.prev,
.thumb_wrapper a.next{
    width:30px;
    height:30px;
    position:absolute;
    top:50%;
    margin-top:-15px;
    outline:none;
    cursor:pointer;
}
为每个导航元素和个人风格如下:
.thumb_wrapper a.prev{
    left:0px;
    background:transparent url(../images/fancy_nav_left.png) no-repeat top left;
}
.thumb_wrapper a.next{
    right:0px;
    background:transparent url(../images/fancy_nav_right.png) no-repeat top left;
}
风格的小信息跨下的滑块:
.thumb_wrapper span{
    display:block;
    text-align:center;
    font-size:11px;
    font-style:italic;
    margin-top:3px;
}
拇指的容器元素是无序列表缩略图。我们将设置溢出隐藏,因为我们不想让我们的列表显示:
.thumb{
    margin-left:40px;
    width:210px;
    height:107px;
    overflow:hidden;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
}
ul的缩略图会动态地计算宽度将覆盖以下之一:
.thumb ul{
    list-style:none;
    width:800px;
    height:107px;
}
列表项必须流了,我们一行中的所有缩略图。我们的想法是,动画ul到正确的位置,揭示未来/以前的缩略图在我们“行”。
.thumb ul li{
    float:left;
}
让我们装饰缩略图:
.thumb ul li a img{
    border:5px solid #fff;
}
描述将浮动的滑块:
.description{
    width:620px;
    float:right;
}
JAVASCRIPT 主要的想法是创建一个小滑块,用户可以浏览缩略图的组合项目。然后,悬停在缩略图的时候,我们想要一个放大版的徘徊的一部分缩略图出现在右边。点击缩略图时,我们希望Fancybox出现,允许用户查看完整图像和浏览。 所以,我们将首先包括必要的样式表和脚本。首先,我们将增加我们的HTML的样式表头部:
<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" />
然后,我们将添加HTML的结束所有的脚本:
<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>
在我们的jQuery函数将首先初始化Fancybox然后我们将定义滑块的功能。如前所述,云变焦插件参数中设置“rel属性的链接元素包装了缩略图图像。 让我们来初始化Fancybox:
$("#content .cloud-zoom").fancybox({
    'transitionIn'  :   'elastic',
    'transitionOut' :   'none',
    'speedIn'       :   600,
    'speedOut'      :   200,
    'overlayShow'   :   true,
    'overlayColor'  :   '#000',
    'cyclic'        :   true,
    'easingIn'      :   'easeInOutExpo'
});
我们现在需要处理冲突,这是由于云变焦插件添加一个div元素的链接元素。它与Fancybox插件冲突因为我们不能点击链接元素(它的覆盖)。所以,我们将添加一个小函数,将触发点击链接每当我们点击类的div元素“捕鼠器”,生成的云缩放插件:
$("#content .mousetrap").live('click',function(){
    $(this).prev().trigger('click');
});
现在,我们将为我们的滑块定义一些变量:
var $content    = $('#content'),
$thumb_list = $content.find('.thumb > ul');
滑块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);
        $('<img alt="">').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'));
    });
});
这就是一切!我们适应Fancybox脚本稍微为了显示导航箭头经常当悬停在完整的形象。 同时,我们改编的z-indexes Fancybox样式表中的元素(我们添加了10000每个z - index)以处理页面中的其他元素和云放大元素。 在云中变焦脚本的位置我们添加了另一个理由,因为我们需要放大元素附加到身体使用缩略图的绝对位置。

技术讨论区(0 个讨论)

  1. 请先登录

      发 布