').width(previousWidth + width);
previousItem.after(wrap);
previousItem.css('padding','0').appendTo(wrap);
item.css('padding','0').appendTo(wrap);
// Add padding to centre the multiple image
paddingH = (sWidth - (previousWidth + width)) / 2;
paddingV = (sHeight - height) / 2;
wrap.css('padding', paddingV+'px '+paddingH+'px');
// Skip the next item
previousItem = null;
return wrap;
}
return item
}
//Set-up the slideshow
function loadSlideshow(){
var pagerItemClass, pagerItem, slideshowClasses, pagerWidth, opts;
log('initialize slideshow');
loading.remove();
slideshow.hide().css('visibility','visible').fadeIn('slow');
slideshowWrapper.prepend(slideshow).insertBefore(gallery).css('visibility','visible');
addControls();
//slideshow.children().each(afterItemLoaded);
cycleOptions = slideshow.cycle({
fx: opt.transition,
timeout: opt.holdTime,
speed: opt.fadeTime,
fastOnEvent: 500,
containerResize: false,
width: sWidth,
height: sHeight,
next: '#slideshow-controls-next-'+slideshowID,
prev: '#slideshow-controls-prev-'+slideshowID,
pager: '.slideshow-pager',
pagerAnchorBuilder: buildPager,
onPagerEvent: pagerScroll,
onPrevNextEvent: prevNextScroll,
onAddSlide: onAddSlide,
updateActivePagerLink: updatePager,
debug: opt.debug,
}).data('cycle.opts');
if(!opt.automatic) {slideshow.cycle('pause');}
// Two slides have already been added so Cycle won't
// choke. Now we trigger the rest of them
onAddSlide();
}
function onAddSlide(slide){
var nextIndex = imageElements.length;
if(imageElements.length !== galleryItems.length) {
log('load: '+ galleryItems.eq(nextIndex).data('source') )
// on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet)
if (!cycleOptions.addSlide) {
return;
}
addImage(nextIndex, true, cycleOptions, true);
}
}
// We sneak in here to set up our fancy pager because there is no specific callback
// available for "when the pager has been built".
function updatePager(pagerSelector, startingSlide, activePagerClass){
var lastSlideshowPagerItem;
// We have already done our set up so call the default handler
if(setup){
$.fn.cycle.updateActivePagerLink(pagerSelector, startingSlide, activePagerClass);
return true;
}
slideshowPager = $(pagerSelector);
lastSlideshowPagerItem = slideshowPager.children().last();
if(opt.layout === 'navigation_left' || opt.layout === 'navigation_right' ) {
slideshowPager.css({height: slideshowPager.innerHeight()});
} else {
slideshowPager.width('99999em');
slideshowPager.css({
width: lastSlideshowPagerItem.outerWidth(true) + lastSlideshowPagerItem.position().left,
height: lastSlideshowPagerItem.outerHeight(true)}
)
}
slideshowPagerWrapper = $('.slideshow-pager-wrapper');
if(slideshowPagerWrapper.length === 0) {
slideshowPager.wrap('');
slideshowPagerWrapper = $('.slideshow-pager-wrapper');
}
slideshowItemWidth = +slideshowPager.find('img').width();
if( opt.layout === 'navigation_left' || opt.layout === 'navigation_right' ) {
slideshowPager.height('auto');
}
if('undefined' === typeof slideshowPager.data('pagerControlsBuilt')
&& (slideshowPager.width() > slideshowPagerWrapper.width() || slideshowPager.height() > slideshowPagerWrapper.height())
) {
slideshowPagerWrapper.before(pagerLink('prev', -4*slideshowItemWidth).hide()).before(pagerLink('next', 4*slideshowItemWidth));
slideshowPager.data('pagerControlsBuilt', true).children().first().addClass('activeSlide');
}
setup = true;
}
// Callback for Cycle onPrevNextEvent
function prevNextScroll(isNext, i, slideElement){
pagerScroll(i, slideElement);
}
// Callback for Cycle onPagerEvent
// Scrolls the pager to reveal the next / prev items
function pagerScroll(i, slideElement){
var currentPagerElement = slideshowPager.children().eq(i),
offset = '+=0';
transitionTime = 1000,
orientation = (opt.layout === 'navigation_left' || opt.layout === 'navigation_right' )? 'v' : 'h',
sizeLimit = orientation === 'v' ? sHeight : sWidth,
pagerItemOffset = orientation === 'v' ? currentPagerElement.offset().top - slideshowPagerWrapper.offset().top: currentPagerElement.offset().left - slideshowPagerWrapper.offset().left,
pagerItemSize = orientation === 'v' ? currentPagerElement.outerHeight(true) : currentPagerElement.outerWidth(true);
if(pagerItemOffset < 0 || pagerItemOffset > sizeLimit){
// If we have chosen an item that is not visible, scroll to it directly
doPagerScroll(currentPagerElement);
return;
} else if(pagerItemOffset > (sizeLimit*0.70) || pagerItemOffset + pagerItemSize > (sizeLimit*0.70)) {
offset = '+='+pagerItemSize+'px';
} else if(pagerItemOffset < (sizeLimit*0.30) || pagerItemOffset + pagerItemSize < (sizeLimit*0.30)) {
offset = '-='+pagerItemSize+'px'
}
doPagerScroll(orientation === 'v' ? {top: offset, left: 0} : {top: 0, left: offset});
}
// Builds a prev / next link for the pager
function pagerLink(dir, offset){
// We need to conver the offset into a relative value string for scrollTo (eg -40 => '-=40px')
offset = offset<0? String(offset).replace(/([\-])/,'$1=')+'px' : '+='+String(offset)+'px';
var pagelink = $('
', {
text : dir === 'prev'? '<' : '>',
'id' : 'slideshow-pager-'+dir,
'class': 'slideshow-pager-'+dir+' slideshow-controls-'+dir,
click: function(e) {
e.preventDefault();
doPagerScroll(pagerOrientation === 'v' ? {top: offset, left: 0} : {top: 0, left: offset});
}
});
return pagelink;
}
function doPagerScroll(target){
var transitionTime = 1000;
slideshowPagerWrapper.stop().scrollTo(target, transitionTime, {onAfter: function(scrollTarget, opts){
if((pagerOrientation === 'h' && slideshowPager.position().left === 0 ) || (pagerOrientation === 'v' && slideshowPager.position().top === 0) ) {
$('#slideshow-pager-prev').hide();
} else {
$('#slideshow-pager-prev').show();
}
log(slideshowPagerWrapper.height() , slideshowPager.position().top + slideshowPager.height(), slideshowPager.children().length);
if((pagerOrientation === 'h' && slideshowPagerWrapper.width() === slideshowPager.position().left + slideshowPager.width()) ||
(pagerOrientation === 'v' && (slideshowPagerWrapper.height() === slideshowPager.position().top + slideshowPager.height() + slideshowPager.children().length))){
$('#slideshow-pager-next').hide();
} else {
$('#slideshow-pager-next').show();
}
}});
}
function buildPager(i, el){
var pagerItemClass = '',
pagerItem = '',
galleryElement = $(el);
switch (opt.navigation){
case "navigation_thumbnails_small":
case "navigation_thumbnails_large":
pagerItemClass = 'thumbnail';
// This gallery element contains multiple images
if(galleryElement.hasClass('slideshow-double')){
pagerItem = ''
// Append the original gallery element for each child element to the pager item
galleryElement.children().each(function(){
pagerItem += gallery.find('a').eq($(this).data('originalIndex')).html();
});
pagerItemClass += ' double';
} else {
var galleryThumbnail = gallery.find('a').eq(galleryElement.data('originalIndex')).html();
pagerItem = null !== galleryThumbnail ? galleryThumbnail : i+1 ;
}
break;
case "navigation_numbers":
pagerItem = i+1;
pagerItemClass = 'number';
break;
case "navigation_dots":
pagerItemClass = 'dot';
pagerItem ='
•';
break;
}
return mkA(null,pagerItemClass).html(pagerItem).get();
}
function addControls(){
slideshowWrapper.append(caption);
switch(opt.layout){
case 'navigation_top':
case 'navigation_left':
slideshowWrapper.prepend(pager);
break;
case 'navigation_right':
case 'navigation_bottom':
slideshowWrapper.append(pager);
break;
}
if(opt.prevNext) {
if(opt.automatic) {controlPrev.after(controlPause);}
slideshowWrapper.append(controls);
}
controlPause.click(togglePause);
slideshow.click(togglePause);
}
function togglePause(){
var text = controlPause.text();
switch(text){
case '||':
controls.addClass('slideshow-paused');
slideshow.cycle('pause');
controlPause.text('>');
break;
case '>':
controls.removeClass('slideshow-paused');
slideshow.cycle('resume').cycle('next');
controlPause.text('||');
break;
}
return false;
}
function resizeToFit(maxWidth,maxHeight,centre){
var image = $(this),
imageWidth = this.width,
imageHeight = this.height,
wScale = maxWidth / imageWidth,
hScale = maxHeight / imageHeight,
ratio = imageWidth / imageHeight,
newTop = 0,
paddingString = '', topMargin, html, hPadding = 0, vPadding = 0,
newWidth, newHeight;
if(typeof centre === 'undefined') {centre = true;}
newWidth = imageWidth;
newHeight = imageHeight;
//reset the image size to automatic
image.width('auto').height('auto').css({width:'auto',height:'auto',padding:'0'});
if(imageWidth>maxWidth){
//downscale width;
newWidth = maxWidth;
newHeight = maxWidth/ratio;
}
// Once we have scaled the width we check
// if the image is still too tall
if(newHeight>maxHeight) {
//downscale height
newHeight = maxHeight;
newWidth = maxHeight*ratio;
}
image.height(newHeight);
image.width(newWidth);
if(centre){
//Padding to centre the image
hPadding = Math.max(0,(maxWidth-newWidth)/2) + 'px';
vPadding = Math.max(0,(maxHeight-newHeight)/2) + 'px';
paddingString = vPadding+' '+hPadding;
log(paddingString);
image.css('padding',paddingString);
}
log('Resized image ' +this.src);
return image;
}
});