213 lines
4.4 KiB
JavaScript
213 lines
4.4 KiB
JavaScript
|
|
$(function(){
|
|
|
|
$(document).on('keyup',function(evt){
|
|
|
|
switch(evt.which){
|
|
case 39:
|
|
var $slideshow = GetSlideshow();
|
|
NextImg( $slideshow );
|
|
break;
|
|
case 37:
|
|
var $slideshow = GetSlideshow();
|
|
PrevImg( $slideshow );
|
|
break;
|
|
}
|
|
});
|
|
|
|
function GetSlideshow(){
|
|
var $slideshows = $('.slideshowb_wrap');
|
|
if( $slideshows.length == 1 ){
|
|
return $slideshows.eq(0);
|
|
}
|
|
var $window = $(window);
|
|
var w_top = $window.scrollTop();
|
|
var w_bottom = $window.height() + w_top;
|
|
|
|
|
|
var max_overlap = 0, slideshow_index = 0;
|
|
$.each($slideshows,function(i,j){
|
|
var $slideshow = $(j);
|
|
var s_top = $slideshow.offset().top;
|
|
var s_bottom = $slideshow.height() + s_top;
|
|
|
|
if( s_top > w_top ){
|
|
overlap = w_bottom - s_top;
|
|
}else{
|
|
overlap = s_bottom - w_top;
|
|
}
|
|
if( overlap > max_overlap ){
|
|
max_overlap = overlap;
|
|
slideshow_index = i;
|
|
}
|
|
});
|
|
return $slideshows.eq(slideshow_index);
|
|
}
|
|
|
|
//var $images = $('.slideshowb_images');
|
|
|
|
$gp.links.slideshowb_img = function(evt){
|
|
evt.preventDefault();
|
|
var $this = $(this);
|
|
var $slideshow = $this.closest('.slideshowb_wrap');
|
|
LoadImg( $slideshow, $this, true );
|
|
}
|
|
|
|
|
|
$gp.links.slideshowb_next = function(evt){
|
|
var $slideshow = $(this).closest('.slideshowb_wrap');
|
|
evt.preventDefault();
|
|
|
|
|
|
//previous or next
|
|
var half = ($slideshow.width()/2) + $slideshow.offset().left;
|
|
if( evt.pageX > half ){
|
|
NextImg($slideshow);
|
|
}else{
|
|
PrevImg($slideshow);
|
|
}
|
|
}
|
|
|
|
function NextImg($slideshow){
|
|
var next = $slideshow.find('.slideshowb_icons li:eq(1) a');
|
|
LoadImg( $slideshow, next, true );
|
|
}
|
|
|
|
function PrevImg($slideshow){
|
|
var prev = $slideshow.find('.slideshowb_icons li:last a');
|
|
LoadImg( $slideshow, prev, false );
|
|
}
|
|
|
|
function LoadImg( $slideshow, lnk, next ){
|
|
|
|
if( !lnk.length ){
|
|
return;
|
|
}
|
|
|
|
var curr = $slideshow.find('.slideshowb_icons a:first');
|
|
var $images = $slideshow.find('.slideshowb_images');
|
|
var left = $images.outerWidth();
|
|
|
|
var hash = Hash( lnk );
|
|
if( curr.length ){
|
|
var curr_hash = Hash( curr );
|
|
if( curr_hash == hash ){
|
|
return;
|
|
}
|
|
}
|
|
|
|
var new_span = ImgSpan( $images, lnk );
|
|
var curr_span = ImgSpan( $images, curr );
|
|
|
|
//scroll current image
|
|
if( !next ){
|
|
left *= -1;
|
|
}
|
|
//new_span.css('left',left).animate({'left':0});
|
|
new_span.animate({'left':left},{duration:0}).animate({'left':0});
|
|
curr_span.animate(
|
|
{'left':-(left*2)}
|
|
);
|
|
|
|
|
|
//scroll icons
|
|
var icon = $slideshow.find('a.slideshowb_icon_'+hash).parent();
|
|
var icon_wrap = $slideshow.find('.slideshowb_icons > ul');
|
|
|
|
|
|
if( next ){
|
|
var pos = icon.position();
|
|
icon_wrap.animate(
|
|
{'top': -(pos.top)}
|
|
,{
|
|
complete: function(){
|
|
|
|
icon_wrap.animate({'top':0},{duration:0,complete:function(){
|
|
var prev = icon.prevUntil().detach().get().reverse();
|
|
$.each(prev,function(){
|
|
$(this).hide().appendTo( icon_wrap ).fadeIn();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
);
|
|
}else{
|
|
icon.prependTo( icon_wrap );
|
|
icon_wrap.animate({'top':-80},{duration:0});
|
|
icon_wrap.animate({'top':0});
|
|
}
|
|
|
|
|
|
|
|
$slideshow.find('.slideshowb_caption').html(lnk.attr('title')+' ');
|
|
|
|
//load next image
|
|
var next = $slideshow.find('.slideshowb_icons li:eq(1) a');
|
|
if( next.length != 0 ){
|
|
ImgSpan( $images, next );
|
|
}
|
|
}
|
|
|
|
function ImgSpan( $images, lnk ){
|
|
|
|
var hash = Hash( lnk );
|
|
var new_span = $images.find('a.slideshowb_img_'+hash);
|
|
|
|
if( new_span.length == 0 ){
|
|
|
|
var href = lnk.attr('href');
|
|
var new_span = $('<a href="'+href+'" data-cmd="slideshowb_next" class="slideshowb_img_'+hash+'" data-hash="'+hash+'">').appendTo( $images );
|
|
|
|
var $img = $('<img>').load(function(){
|
|
$(this).parent().addClass('loaded');
|
|
}).attr('src',href).appendTo(new_span);
|
|
|
|
}
|
|
|
|
return new_span;
|
|
}
|
|
|
|
function Hash( lnk ){
|
|
var hash = lnk.data('hash');
|
|
if( hash ){
|
|
return hash;
|
|
}
|
|
|
|
do{
|
|
hash = Math.round(Math.random()*100);
|
|
classname = 'slideshowb_icon_'+hash;
|
|
}while( $('.'+classname).length > 0 );
|
|
|
|
lnk.data('hash',hash);
|
|
lnk.addClass(classname);
|
|
return hash;
|
|
}
|
|
|
|
//auto start
|
|
$('.slideshowb_wrap.start').each(function(){
|
|
var $slideshow = $(this);
|
|
var speed = $slideshow.data('speed') || 5000;
|
|
|
|
window.setInterval(function(){
|
|
if( !$slideshow.hasClass('hover') ){
|
|
NextImg( $slideshow );
|
|
}
|
|
},speed);
|
|
|
|
//cancel on mouseover
|
|
$slideshow.on('mouseenter',function(){
|
|
$slideshow.addClass('hover');
|
|
}).on('mouseleave',function(){
|
|
$slideshow.removeClass('hover');
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|