相册原创动画 jquery + gallery photo animation（原创教程）

ydzhony1

浏览: 4481 次
性别:
来自: 上海

最近访客更多访客>>

whx01

zhao103804

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery Chrome JavaScript .net CSS

Srctipt:
主要功能是让图片在相册容器内完整地处理图片间的交递过程;
要求:
1.兼容IE7,8,FF chrome(IE6.抛弃!!!!!别怪我),原创;
2.图片在容器内随着图片大小的变化, 能够自适应, 让图片左右上下居中;
3.当图片还未读取到缓存时, 需要loading过程;
4.用jQuery写gallery插件模块,方便日后扩展,维护;

原码:
Demo : http://www.6yang.net/myjavascriptlib/galleryAnimate/#~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gallery photo animation</title>
<link rel="stylesheet" href="css/gallery.css" type="text/css" media="screen" />
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/gallery.js" type="text/javascript"></script>
</head>

<body>
<div class="gralleryWrap">
    <h2>Gallery animation jQuery Created by jackyang</h2>
    <div class="photoView" id="js_photoView">
        <div class="boxNext">
            <a href="#~" class="btnNext"></a>
        </div>
        <div class="boxPrev">
            <a href="#~" class="btnPrev"></a>
        </div>
        <h2 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h2>
        <div class="pic">
            <img src="images/tempGalleryLarge01.jpg" alt="" />
        </div>
    </div>
    <div class="photoThumbsList" id="js_photoThumbsList">
        <ul>
            <li><a href="#~" class="itemThumb"><div class="active"></div><img src="images/tempGallery01.jpg" alt="" /></a></li>
            <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery02.jpg" alt=""   /></a></li>
            <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery03.jpg" alt="" /></a></li>
            <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery04.jpg" alt="" /></a></li>
            <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery05.jpg" alt="" /></a></li>
            <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery06.jpg" alt="" /></a></li>
            <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery07.jpg" alt="" /></a></li>
            <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery08.jpg" alt="" /></a></li>
            <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery09.jpg" alt="" /></a></li>
        </ul>
    </div>


</div>
</body>
</html>

For javascript

// JavaScript Document

(function($){
     //show photo in center
    $.fn.showPhotoCenter = function(){
        return this.each(function(){
            var self = $(this),
                parentDom = self.parent();
            var coorX = (parentDom.width() - self.width())/2;
            var coorY = (parentDom.height() - self.height())/2;
            self.showPanelPosition(coorX, coorY);
        });
    };
    //show panels in position
    $.fn.showPanelPosition = function(x, y){
        return this.each(function(){
            $(this)
                .css({
                    "left": x,
                    "top": y
                })
                .show();
        });
    };
    //loading photo
    jQuery.fn.LoadImage=function(fn){
        return this.each(function(){
            var self = $(this);
            var src = self.attr("src")
            var img = new Image();
            img.src = src;
            if(img.complete){
                img.width > 0 ? fn.call(img) : '';
                return;
            }
            self.attr("src","");
            $(img).load(function(){
                self.attr("src",this.src);
                fn.call(img);
            });

        });
    }

    /**
     * define gallery Photo function
     * @param arrGallery
     * @return void
     */
    $.fn.galleryPhoto = function(arrGallery){
        return this.each(function(){
            var self = $(this),
                iCurrent = 0,
                lenSlide = 0,
                arrTab = $('.itemThumb', self),
                jQ_photoView = $('#js_photoView'),
                jQ_currPic = jQ_photoView.find('.pic'),
                jQ_currImg = jQ_currPic.find('img'),
                jQ_currTitle = jQ_photoView.find('.title'),
                jQ_photoViewWrap = $('#js_photoViewWrap');

            if(arrTab.length == 0 || jQ_currImg.length == 0){
                return;
            }

            init();


            $('.btnNext', jQ_photoView).bind('click', function(){
                slideNext();
            });

            $('.btnPrev', jQ_photoView).bind('click', function(){
                slidePrev();
            });

            function slideTo(i){

            if(i == iCurrent) return;
                //loading image
                $('.itemThumb div', self).removeClass('active');
                $('.itemThumb div:eq(' + i + ')', self).addClass('active');

                jQ_currImg.attr('src', arrGallery[iCurrent].pic).hide();
                jQ_currTitle.html(arrGallery[iCurrent].title).hide();

                jQ_photoView.hasClass('loading') ? '': jQ_photoView.addClass('loading');
                jQ_currPic.hide();
                jQ_currImg.attr('src', arrGallery[i].pic).LoadImage(function(){
                    self.queue(function(){
                        jQ_photoView.hasClass('loading') ? jQ_photoView.removeClass('loading') : '';
                        jQ_currPic.show();
                        setTimeout(function(){
                            jQ_currImg.fadeIn(200);
                            jQ_currTitle.fadeIn(200);
                            jQ_currImg.parent().showPhotoCenter();
                        }, 300);

                        $(this).dequeue();
                    });
                });

                self.queue(function(){
                    iCurrent = i;
                    $(this).dequeue();
                });
            }


            function slidePrev(){
                var i = iCurrent - 1;
                if(i == -1){
                    i = 0;
                }
                slideTo(i);
            }

            function slideNext(){
                var i = iCurrent + 1;
                if(i==lenSlide){
                    i = lenSlide - 1;
                }
                slideTo(i);
            }

            function init(){
                iCurrent = 0;
                lenSlide = arrGallery.length;
                jQ_currImg.eq(0).show();

                $('.itemThumb', self).bind('click', function(){
                    var j = arrTab.index(this);

                    if(jQ_photoViewWrap.length > 0){
                        $('.overlay01').show();
                        jQ_photoViewWrap.showPanelCenter();
                    }
                    slideTo(j);
                });
            }
        });

    };

})(jQuery);

$(function(){

    // defining the garller photo var
    var arrGallery = [
        {'pic': 'images/tempGalleryLarge01.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet1'},
        {'pic': 'images/tempGalleryLarge02.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet2'},
        {'pic': 'images/tempGalleryLarge03.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet3'},
        {'pic': 'images/tempGalleryLarge04.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet4'},
        {'pic': 'images/tempGalleryLarge05.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet5'},
        {'pic': 'images/tempGalleryLarge06.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet6'},
        {'pic': 'images/tempGalleryLarge07.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet7'},
        {'pic': 'images/tempGalleryLarge08.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet8'},
        {'pic': 'images/tempGalleryLarge09.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet9'}
    ],
         jQ_photoThumbsList = $('#js_photoThumbsList'),
        jQ_photoView = $('#js_photoView'),
        jQ_itemThumb = jQ_photoThumbsList.find('.itemThumb');

    if(jQ_photoThumbsList.length > 0){
        // load and fixed the gellary and thumbs
        $(window).load(function(){
            // display thumbs
            jQ_itemThumb.showPhotoCenter();
            // display photoView
            $('.pic', jQ_photoView).showPhotoCenter();
        });

        // return animate gallery-Photo
        jQ_photoThumbsList.galleryPhoto(arrGallery);
    }

});

Demo : http://www.6yang.net/myjavascriptlib/galleryAnimate/#~
Created by 6yang.net

Demo : http://www.6yang.net/myjavascriptlib/galleryAnimate/#~
Created by 6yang.net

本文由站酷网 - 6yang 原创，转载请保留此信息，多谢合作。

访问6yang的个人主页