Version 3.0.5
This commit is contained in:
Neo committed
1 parent
19b38c7c74
commit
1d4720f3e2
3755 files changed
+508378
-664541
No files matched your search
@@ -0,0 +1,529 @@
|
||||
/************************************************/
|
||||
/* IPB3 Javascript */
|
||||
/* -------------------------------------------- */
|
||||
/* ips.slideshow.js - Gallery slideshow code */
|
||||
/* (c) IPS, Inc 2009 */
|
||||
/* -------------------------------------------- */
|
||||
/* Author: Rikki Tissier */
|
||||
/************************************************/
|
||||
|
||||
var _ss = window.IPBoard;
|
||||
|
||||
_ss.prototype.slideshow = {
|
||||
|
||||
/* Current ID */
|
||||
currentImage: 0,
|
||||
/* Paused? */
|
||||
paused: false,
|
||||
/* Length of fade transition */
|
||||
transitionLen: 0.6,
|
||||
/* Time between images */
|
||||
speed: 4,
|
||||
/* Size of the window */
|
||||
holderSize: [],
|
||||
/* Size of the thumbnails */
|
||||
thumbSize: 0,
|
||||
/* Have we stopped auto-scrolling the thumbbar for now? */
|
||||
stopAutoScroll: false,
|
||||
/* Timer for autoscroll */
|
||||
autoScrollTimer: null,
|
||||
|
||||
/*------------------------------*/
|
||||
/* Constructor */
|
||||
init: function()
|
||||
{
|
||||
Debug.write("Initializing ips.slideshow.js");
|
||||
|
||||
document.observe("dom:loaded", function(){
|
||||
|
||||
// Set up button events
|
||||
$( 'c_PREV' ).observe('click', ipb.slideshow.buttonPrevious);
|
||||
$( 'c_PAUSE_PLAY' ).observe('click', ipb.slideshow.buttonPause);
|
||||
$( 'c_NEXT' ).observe('click', ipb.slideshow.buttonNext);
|
||||
$( 'button_left' ).observe('click', ipb.slideshow.thumbPrev);
|
||||
$( 'button_right' ).observe('click', ipb.slideshow.thumbNext);
|
||||
|
||||
|
||||
// Preload first image
|
||||
var firstImage = IMAGES.first();
|
||||
ipb.slideshow.loadImage( firstImage, IMAGE_DATA.get( firstImage )['filename'] );
|
||||
|
||||
// While that's going, get holder size
|
||||
ipb.slideshow.holderSize = $('image_holder').getDimensions();
|
||||
Event.observe( window, 'resize', ipb.slideshow.resizeWindow );
|
||||
|
||||
// Build thumbnails
|
||||
ipb.slideshow.buildThumbnails();
|
||||
ipb.delegate.register('.thumb', ipb.slideshow.thumbnailClick);
|
||||
|
||||
// Get width of thumbnail wrapper
|
||||
Debug.write( "Viewport width: " + ipb.slideshow.holderSize['width'] );
|
||||
Debug.write( "Thumbnail wrapper: " + $('thumbnail_wrap').getDimensions()['width'] );
|
||||
|
||||
// Kick the slideshow off
|
||||
Debug.write("Starting slideshow...");
|
||||
ipb.slideshow.play();
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
/*------------------------------*/
|
||||
/* scrolls the thumb bar left */
|
||||
thumbPrev: function(e)
|
||||
{
|
||||
if( !$('button_left').hasClassName('active') || $('button_left').hasClassName('disabled') ){
|
||||
return;
|
||||
}
|
||||
|
||||
var barLeft = parseInt( $('thumbnail_wrap').getStyle('left') );
|
||||
var moveX = ipb.slideshow.thumbSize;
|
||||
|
||||
if( ( barLeft + ipb.slideshow.thumbSize ) > 30 ){
|
||||
moveX = barLeft - 30;
|
||||
}
|
||||
|
||||
new Effect.Move( $('thumbnail_wrap'), { x: moveX, y: 0, duration: 0.2, mode: 'relative', afterFinish: function(){ ipb.slideshow.recalculateThumbnailButtons() } } );
|
||||
|
||||
// Wait for more user input
|
||||
ipb.slideshow.stopAutoScroll = true;
|
||||
clearTimeout( ipb.slideshow.autoScrollTimer );
|
||||
ipb.slideshow.autoScrollTimer = setTimeout( ipb.slideshow.clearAutoScrollWait, 8000 );
|
||||
},
|
||||
|
||||
/*------------------------------*/
|
||||
/* scrolls the thumb bar right */
|
||||
thumbNext: function(e)
|
||||
{
|
||||
if( !$('button_right').hasClassName('active') || $('button_right').hasClassName('disabled') ){
|
||||
return;
|
||||
}
|
||||
|
||||
new Effect.Move( $('thumbnail_wrap'), { x: ( -1 * ipb.slideshow.thumbSize ), y: 0, duration: 0.2, mode: 'relative', afterFinish: function(){ ipb.slideshow.recalculateThumbnailButtons() } } );
|
||||
|
||||
// Wait for more user input
|
||||
ipb.slideshow.stopAutoScroll = true;
|
||||
clearTimeout( ipb.slideshow.autoScrollTimer );
|
||||
ipb.slideshow.autoScrollTimer = setTimeout( ipb.slideshow.clearAutoScrollWait, 8000 );
|
||||
},
|
||||
|
||||
/*-------------------------------*/
|
||||
/* Callback to resume autoscroll */
|
||||
clearAutoScrollWait: function()
|
||||
{
|
||||
ipb.slideshow.stopAutoScroll = false;
|
||||
return;
|
||||
},
|
||||
|
||||
/*------------------------------*/
|
||||
/* User is jumping to an image */
|
||||
thumbnailClick: function(e, elem)
|
||||
{
|
||||
Event.stop(e);
|
||||
|
||||
var thumbID = $( elem ).id.replace('thumb_', '');
|
||||
|
||||
// Are we paused? If not, do so
|
||||
if( !ipb.slideshow.paused ){
|
||||
ipb.slideshow.pause();
|
||||
}
|
||||
|
||||
ipb.slideshow.loadImage( thumbID, IMAGE_DATA.get( thumbID )['filename'] );
|
||||
ipb.slideshow.update( thumbID );
|
||||
},
|
||||
|
||||
/*------------------------*/
|
||||
/* Plays the slideshow */
|
||||
play: function()
|
||||
{
|
||||
var mainLoop = function()
|
||||
{
|
||||
var nextImage = ipb.slideshow.getNextID();
|
||||
ipb.slideshow.update( nextImage );
|
||||
|
||||
// Get the next image ready
|
||||
var oneAfter = ipb.slideshow.getNextID( nextImage );
|
||||
ipb.slideshow.loadImage( oneAfter, IMAGE_DATA.get( oneAfter )['filename'] );
|
||||
|
||||
// Continue slideshow
|
||||
ipb.slideshow.mainLoop = setTimeout( mainLoop, ( ipb.slideshow.speed * 1000 ) );
|
||||
}
|
||||
|
||||
mainLoop();
|
||||
},
|
||||
|
||||
/*------------------------*/
|
||||
/* Pause button */
|
||||
buttonPause: function(e)
|
||||
{
|
||||
Event.stop(e);
|
||||
|
||||
if( !ipb.slideshow.paused ){
|
||||
ipb.slideshow.pause();
|
||||
} else {
|
||||
ipb.slideshow.unpause();
|
||||
}
|
||||
},
|
||||
|
||||
/*-------------------------*/
|
||||
/* Next image button */
|
||||
buttonNext: function(e)
|
||||
{
|
||||
Event.stop(e);
|
||||
|
||||
// Are we paused? If not, do so
|
||||
if( !ipb.slideshow.paused ){
|
||||
ipb.slideshow.pause();
|
||||
}
|
||||
|
||||
// Go to the next image
|
||||
var nextImage = ipb.slideshow.getNextID();
|
||||
ipb.slideshow.loadImage( nextImage, IMAGE_DATA.get( nextImage )['filename'] );
|
||||
ipb.slideshow.update( nextImage );
|
||||
},
|
||||
|
||||
/*-------------------------*/
|
||||
/* Next image button */
|
||||
buttonPrevious: function(e)
|
||||
{
|
||||
Event.stop(e);
|
||||
|
||||
// Are we paused? If not, do so
|
||||
if( !ipb.slideshow.paused ){
|
||||
ipb.slideshow.pause();
|
||||
}
|
||||
|
||||
// Go to the next image
|
||||
var prevImage = ipb.slideshow.getPrevID();
|
||||
ipb.slideshow.loadImage( prevImage, IMAGE_DATA.get( prevImage )['filename'] );
|
||||
ipb.slideshow.update( prevImage );
|
||||
},
|
||||
|
||||
/*-------------------------*/
|
||||
/* Pauses */
|
||||
pause: function()
|
||||
{
|
||||
clearTimeout( ipb.slideshow.mainLoop );
|
||||
ipb.slideshow.paused = 1;
|
||||
$('c_PAUSE_PLAY').addClassName('paused');
|
||||
Debug.write("Slideshow is paused.");
|
||||
},
|
||||
|
||||
/*-------------------------*/
|
||||
/* Unpauses */
|
||||
unpause: function()
|
||||
{
|
||||
ipb.slideshow.play();
|
||||
ipb.slideshow.paused = 0;
|
||||
$('c_PAUSE_PLAY').removeClassName('paused');
|
||||
Debug.write("Slideshow is playing.");
|
||||
},
|
||||
|
||||
/*-----------------------------------*/
|
||||
/* Readies the next image to display */
|
||||
update: function( nextImage )
|
||||
{
|
||||
if( ipb.slideshow.currentImage == nextImage ){ return; }
|
||||
|
||||
if( !$('img_' + nextImage) ){
|
||||
ipb.slideshow.loadImage( nextImage, IMAGE_DATA.get( nextImage )['filename'] );
|
||||
}
|
||||
|
||||
// If the image hasn't finished loading, then go into a loop and wait
|
||||
if( $('img_' + nextImage).complete != true ){
|
||||
Debug.write("Loading image...");
|
||||
ipb.slideshow.loading(true);
|
||||
ipb.slideshow.update.delay( .1, nextImage );
|
||||
return;
|
||||
} else {
|
||||
ipb.slideshow.loading(false);
|
||||
Debug.write("Image loaded.");
|
||||
}
|
||||
|
||||
// See if we need to resize & position
|
||||
ipb.slideshow.checkSizing( nextImage );
|
||||
ipb.slideshow.positionImage( nextImage );
|
||||
|
||||
// Build info box
|
||||
ipb.slideshow.buildImageInfo( nextImage );
|
||||
|
||||
// Now transition
|
||||
if( ipb.slideshow.currentImage != 0 )
|
||||
{
|
||||
new Effect.Parallel([
|
||||
new Effect.Fade( $('img_' + ipb.slideshow.currentImage) ),
|
||||
new Effect.Appear( $('img_' + nextImage ) )
|
||||
], { duration: ipb.slideshow.transitionLen });
|
||||
|
||||
//if( IMAGE_DATA.get( ipb.slideshow.currentImage )['author']['id'] != IMAGE_DATA.get( nextImage )['author']['id'] )
|
||||
//{
|
||||
new Effect.Parallel([
|
||||
new Effect.Fade( $('info_' + IMAGE_DATA.get( ipb.slideshow.currentImage )['author']['id'] + '_' + ipb.slideshow.currentImage) ),
|
||||
new Effect.Appear( $('info_' + IMAGE_DATA.get( nextImage )['author']['id'] + '_' + nextImage ) )
|
||||
], { duration: ipb.slideshow.transitionLen });
|
||||
//}
|
||||
}
|
||||
else
|
||||
{
|
||||
new Effect.Appear( $('img_' + nextImage ), { duration: ipb.slideshow.transitionLen } );
|
||||
new Effect.Appear( $('info_' + IMAGE_DATA.get( nextImage )['author']['id'] + '_' + nextImage ), { duration: ipb.slideshow.transitionLen } );
|
||||
}
|
||||
|
||||
// Thumbnail stuff
|
||||
if( $('thumb_' + nextImage) )
|
||||
{
|
||||
ipb.slideshow.positionThumbnailBar( nextImage );
|
||||
|
||||
if( ipb.slideshow.currentImage ){
|
||||
$('thumb_' + ipb.slideshow.currentImage).removeClassName('active');
|
||||
}
|
||||
$('thumb_' + nextImage).addClassName('active');
|
||||
}
|
||||
|
||||
// Set the current ID
|
||||
ipb.slideshow.currentImage = nextImage;
|
||||
},
|
||||
|
||||
/*----------------------------------*/
|
||||
/* Activates/deactivates buttons */
|
||||
recalculateThumbnailButtons: function()
|
||||
{
|
||||
var thumbWrapLeft = parseInt( $('thumbnail_wrap').getStyle('left') );
|
||||
var barWidth = $('thumbnail_wrap').getWidth();
|
||||
var viewportWidth = document.viewport.getWidth();
|
||||
|
||||
if( thumbWrapLeft >= 30 ){
|
||||
$('button_left').removeClassName('active').addClassName('disabled');
|
||||
} else {
|
||||
$('button_left').addClassName('active').removeClassName('disabled');
|
||||
}
|
||||
|
||||
if( $('thumbnail_wrap').getWidth() < $('thumbnail_bar').getWidth() ){
|
||||
$('button_right').removeClassName('active').addClassName('disabled');
|
||||
}
|
||||
|
||||
if( ( thumbWrapLeft + barWidth ) > ( viewportWidth - 30 ) ){
|
||||
$('button_right').removeClassName('disabled').addClassName('active');
|
||||
} else {
|
||||
$('button_right').removeClassName('active').addClassName('disabled');
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/*---------------------------------*/
|
||||
/* Positions the thumbnail bar */
|
||||
positionThumbnailBar: function( thumbID )
|
||||
{
|
||||
// We're not autoscrolling right now
|
||||
if( ipb.slideshow.stopAutoScroll ){
|
||||
ipb.slideshow.recalculateThumbnailButtons();
|
||||
return;
|
||||
}
|
||||
|
||||
var barWidth = $('thumbnail_bar').getWidth();
|
||||
var thumbPosition = $('thumb_' + thumbID).viewportOffset();
|
||||
var positionedOffset = $('thumb_' + thumbID).positionedOffset();
|
||||
|
||||
var rightPos = barWidth - 150;
|
||||
|
||||
var afterFinish = function()
|
||||
{
|
||||
ipb.slideshow.recalculateThumbnailButtons();
|
||||
}
|
||||
|
||||
// Is the thumbnail off to the left?
|
||||
if( thumbPosition['left'] < 30 )
|
||||
{
|
||||
if( positionedOffset['left'] > rightPos ){
|
||||
new Effect.Move( $('thumbnail_wrap'), { x: ( rightPos - thumbPosition['left'] ), y: 0, mode: 'relative', duration: 0.2, afterFinish: afterFinish } );
|
||||
} else {
|
||||
new Effect.Move( $('thumbnail_wrap'), { x: 30, y: 0, mode: 'absolute', duration: 0.2, afterFinish: afterFinish } );
|
||||
}
|
||||
}
|
||||
else if( thumbPosition['left'] > rightPos )
|
||||
{
|
||||
new Effect.Move( $('thumbnail_wrap'), { x: (rightPos - thumbPosition['left']), y: 0, mode: 'relative', duration: 0.2, afterFinish: afterFinish } );
|
||||
}
|
||||
else
|
||||
{
|
||||
ipb.slideshow.recalculateThumbnailButtons();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/*---------------------------------*/
|
||||
/* Builds the thumbnail bar */
|
||||
buildThumbnails: function()
|
||||
{
|
||||
var thumbCount = 0;
|
||||
|
||||
IMAGES.each( function( imageID ){
|
||||
var content = ipb.slideshow.thumbnail.evaluate({ 'id': imageID });
|
||||
$('thumbnail_wrap').insert( content );
|
||||
$('thumb_' + imageID).setStyle( { backgroundImage: "url(" + ipb.slideshow.imageURL + IMAGE_DATA.get( imageID )['thumb'] + ")" } );
|
||||
|
||||
if( ipb.slideshow.thumbSize == 0 )
|
||||
{
|
||||
ipb.slideshow.thumbSize = $('thumb_' + imageID).getWidth();
|
||||
|
||||
if( $('thumb_' + imageID).getStyle('margin-right') )
|
||||
{
|
||||
ipb.slideshow.thumbSize += parseInt( $('thumb_' + imageID).getStyle('margin-right') );
|
||||
}
|
||||
}
|
||||
|
||||
thumbCount++;
|
||||
});
|
||||
|
||||
$('thumbnail_wrap').setStyle( { width: ( thumbCount * ipb.slideshow.thumbSize ) + 'px' } );
|
||||
$('thumbnail_wrap').writeAttribute('unselectable', 'on');
|
||||
$('thumbnail_bar').writeAttribute('unselectable', 'on');
|
||||
},
|
||||
|
||||
/*---------------------------------*/
|
||||
/* Build the info box for an image */
|
||||
buildImageInfo: function( imageID )
|
||||
{
|
||||
var authorInfo = IMAGE_DATA.get( imageID )['author'];
|
||||
var authorID = authorInfo['id'];
|
||||
|
||||
if( $('info_' + authorID + '_' + imageID ) ){ return true; }
|
||||
|
||||
var contents = ipb.slideshow.userInfo.evaluate( {
|
||||
'id': authorID + '_' + imageID,
|
||||
'name': authorInfo['name'],
|
||||
'photo': ipb.slideshow.userPhotoURL + authorInfo['photo'],
|
||||
'title': IMAGE_DATA.get( imageID )['title'],
|
||||
'width': authorInfo['width'],
|
||||
'height': authorInfo['height']
|
||||
});
|
||||
|
||||
$('image_info').insert( contents );
|
||||
},
|
||||
|
||||
/*------------------------------*/
|
||||
/* Preloads an image */
|
||||
loadImage: function( id, filename )
|
||||
{
|
||||
if( $( 'img_' + id ) ){ return true; }
|
||||
|
||||
var img = new Element('img', { 'id': 'img_' + id, 'src': ipb.slideshow.imageURL + filename }).hide();
|
||||
$('image_holder').insert( img );
|
||||
},
|
||||
|
||||
/*------------------------------*/
|
||||
/* Checks the image will fit */
|
||||
checkSizing: function( imageID )
|
||||
{
|
||||
var img = $('img_' + imageID);
|
||||
|
||||
if( !img.readAttribute('origWidth') || !img.readAttribute('origHeight') )
|
||||
{
|
||||
var dims = img.getDimensions();
|
||||
img.writeAttribute('origWidth', dims['width']).writeAttribute('origHeight', dims['height']);
|
||||
}
|
||||
|
||||
//Debug.write("Holder size: " + ipb.slideshow.holderSize['width'] + ", Image size: " + img.readAttribute('origWidth'));
|
||||
|
||||
var newWidth = img.readAttribute('origWidth');
|
||||
var newHeight = img.readAttribute('origHeight');
|
||||
var aspect = img.readAttribute('origWidth') / img.readAttribute('origHeight');
|
||||
|
||||
if( newWidth > ipb.slideshow.holderSize['width'] ){
|
||||
newWidth = ipb.slideshow.holderSize['width'];
|
||||
newHeight = ( newWidth / aspect );
|
||||
}
|
||||
|
||||
if( newHeight > ipb.slideshow.holderSize['height'] ){
|
||||
newHeight = ipb.slideshow.holderSize['height'];
|
||||
newWidth = ( newHeight * aspect );
|
||||
}
|
||||
|
||||
// Resize image
|
||||
img.width = newWidth;
|
||||
img.height = newHeight;
|
||||
|
||||
},
|
||||
|
||||
/*----------------------------------*/
|
||||
/* Positions an image in the middle */
|
||||
positionImage: function( imageID )
|
||||
{
|
||||
var img = $('img_' + imageID).getDimensions();
|
||||
|
||||
var left = Math.ceil( ( ipb.slideshow.holderSize['width'] - img['width'] ) / 2 );
|
||||
var top = Math.ceil( ( ipb.slideshow.holderSize['height'] - img['height'] ) / 2 );
|
||||
|
||||
// Border
|
||||
if( $('img_' + imageID).getStyle('border-top-width') )
|
||||
{
|
||||
var border = $('img_' + imageID).getStyle('border-top-width').replace('px', '');
|
||||
left = left - parseInt( border );
|
||||
top = top - parseInt( border );
|
||||
}
|
||||
|
||||
//Debug.write( "Left: " + left + ", " + "top: " + top );
|
||||
// Position
|
||||
$('img_' + imageID).setStyle( { left: left + "px", top: top + "px" } );
|
||||
},
|
||||
|
||||
/*-------------------------------*/
|
||||
/* Returns the next ID in line */
|
||||
getNextID: function( curID )
|
||||
{
|
||||
// If no ID or currentImage is specified, return first image
|
||||
if( Object.isUndefined( curID ) && ipb.slideshow.currentImage == 0 ){
|
||||
return IMAGES.first();
|
||||
}
|
||||
|
||||
var curID = ( Object.isUndefined( curID ) ) ? ipb.slideshow.currentImage : curID;
|
||||
var pos = IMAGES.indexOf( parseInt(curID) );
|
||||
|
||||
// Last item?
|
||||
if( pos == ( IMAGES.length - 1 ) ){
|
||||
return IMAGES.first();
|
||||
} else {
|
||||
return IMAGES[ pos + 1 ];
|
||||
}
|
||||
},
|
||||
|
||||
/*-------------------------------*/
|
||||
/* Returns the next ID in line */
|
||||
getPrevID: function( curID )
|
||||
{
|
||||
// If no ID or currentImage is specified, return first image
|
||||
if( Object.isUndefined( curID ) && ipb.slideshow.currentImage == 0 ){
|
||||
return IMAGES.first();
|
||||
}
|
||||
|
||||
var curID = ( Object.isUndefined( curID ) ) ? ipb.slideshow.currentImage : curID;
|
||||
var pos = IMAGES.indexOf( parseInt(curID) );
|
||||
|
||||
// Last item?
|
||||
if( pos === 0 ){
|
||||
return IMAGES.last();
|
||||
} else {
|
||||
return IMAGES[ pos - 1 ];
|
||||
}
|
||||
},
|
||||
|
||||
/*------------------------------*/
|
||||
/* Show loading throbber */
|
||||
loading: function( loading )
|
||||
{
|
||||
if( loading ){
|
||||
$('loading').show();
|
||||
} else {
|
||||
$('loading').hide();
|
||||
}
|
||||
},
|
||||
|
||||
/*-------------------------------------*/
|
||||
/* Resize event to get new holder size */
|
||||
resizeWindow: function()
|
||||
{
|
||||
ipb.slideshow.holderSize = $('image_holder').getDimensions();
|
||||
ipb.slideshow.recalculateThumbnailButtons();
|
||||
}
|
||||
}
|
||||
|
||||
ipb.slideshow.init();
|
||||
Reference in new issue
Block a user