技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
相册原创动画 jquery + gallery photo animation
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