jQuery Image Gallery画廊插件

HTML

每个元素.content，里面放置图片，图片上有标题title,即幻灯片标题

<div class="content">
    <div><a href="images/Universe_and_planets_digital_art_wallpaper_denebola.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg" title="素材火" alt="素材火" class="thumb" /></a></div>
</div>
<div class="content">
    <div><a href="images/Universe_and_planets_digital_art_wallpaper_lux.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg" title="网站模板" alt="网站模板" class="thumb" /></a></div>
</div>

引入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"));
});