jQuery Image Gallery画廊插件

jQuery Image Gallery是一个全屏的画廊插件,和qq空间相册插件类似。支持自定义图片名称、相册标题。

引入jQuery库和easing动画插件

<script type="jquery.min.js"></script>  
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

jQuery Image Gallery调用方法

$(window).load(function() { 
    $toolbar.data("imageViewMode", $defaultViewMode); //default view mode 
    if ($defaultViewMode == "full") { 
        $toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore"); 
    } else { 
        $toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize"); 
    } 
    ShowHideNextPrev($nextPrevBtnsInitState); 
//thumbnail scroller 
    $thumbScroller_container.css("marginLeft", $tsMargin + "px"); //add margin 
    sliderLeft = $thumbScroller_container.position().left; 
    sliderWidth = $outer_container.width(); 
    $thumbScroller.css("width", sliderWidth); 
    var totalContent = 0; 
    fadeSpeed = 200; 
 
    var $the_outer_container = document.getElementById("outer_container"); 
    var $placement = findPos($the_outer_container); 
 
    $thumbScroller_content.each(function() { 
        var $this = $(this); 
        totalContent += $this.innerWidth(); 
        $thumbScroller_container.css("width", totalContent); 
        $this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity); 
    }); 
 
    $thumbScroller.mousemove(function(e) { 
        if ($thumbScroller_container.width() > sliderWidth) { 
            var mouseCoords = (e.pageX - $placement[1]); 
            var mousePercentX = mouseCoords / sliderWidth; 
            var destX = -((((totalContent + ($tsMargin * 2)) - (sliderWidth)) - sliderWidth) * (mousePercentX)); 
            var thePosA = mouseCoords - destX; 
            var thePosB = destX - mouseCoords; 
            if (mouseCoords > destX) { 
                $thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing, $scrollEasingType); //with easing 
            } else if (mouseCoords < destX) { 
                $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing, $scrollEasingType); //with easing 
            } else { 
                $thumbScroller_container.stop(); 
            } 
        } 
    }); 
 
    $thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity); 
    $thumbnails_wrapper.hover( 
            function() { //mouse over 
                var $this = $(this); 
                $this.stop().fadeTo("slow", 1); 
            }, 
            function() { //mouse out 
                var $this = $(this); 
                $this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity); 
            } 
    ); 
 
    $thumbScroller_thumb.hover( 
            function() { //mouse over 
                var $this = $(this); 
                $this.stop().fadeTo(fadeSpeed, 1); 
            }, 
            function() { //mouse out 
                var $this = $(this); 
                $this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity); 
            } 
    ); 
 
//on window resize scale image and reset thumbnail scroller 
    $(window).resize(function() { 
        FullScreenBackground("#bgimg", $bgimg.data("newImageW"), $bgimg.data("newImageH")); 
        $thumbScroller_container.stop().animate({left: sliderLeft}, 400, "easeOutCirc"); 
        var newWidth = $outer_container.width(); 
        $thumbScroller.css("width", newWidth); 
        sliderWidth = newWidth; 
        $placement = findPos($the_outer_container); 
    }); 
 
//load 1st image 
    var the1stImg = new Image(); 
    the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload); 
    the1stImg.src = $bgimg.attr("src"); 
    $outer_container.data("nextImage", $(".content").first().next().find("a").attr("href")); 
    $outer_container.data("prevImage", $(".content").last().find("a").attr("href")); 
});
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录