相册原创动画 jquery + gallery photo animation（原创教程）
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 id="js_photoView">
<div alt="相本原创动画 jquery + gallery photo animation（原创教程）" />
</div>
</div>
<div alt="相本原创动画 jquery + gallery photo animation（原创教程）" /></a></li>
<li><a href="#~" alt="相本原创动画 jquery + gallery photo animation（原创教程）" /></a></li>
<li><a href="#~" alt="相本原创动画 jquery + gallery photo animation（原创教程）" /></a></li>
<li><a href="#~" alt="相本原创动画 jquery + gallery photo animation（原创教程）" /></a></li>
<li><a href="#~" alt="相本原创动画 jquery + gallery photo animation（原创教程）" /></a></li>
<li><a href="#~" alt="相本原创动画 jquery + gallery photo animation（原创教程）" /></a></li>
<li><a href="#~" alt="相本原创动画 jquery + gallery photo animation（原创教程）" /></a></li>
<li><a href="#~" alt="相本原创动画 jquery + gallery photo animation（原创教程）" /></a></li>
<li><a href="#~" alt="相本原创动画 jquery + gallery photo animation（原创教程）" /></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的个人主页
