(function(Weebly, $) { Weebly.Slideshow = window.wSlideshow = { getSlideshowImages: getSlideshowImages, updateSize: updateSize, generateHTML: generateHTML, init: init, updatePhotos: updatePhotos, render: render, initHeaderSlideshow: initHeaderSlideshow, instantiateHeaderSlideshow: instantiateHeaderSlideshow, thumbnailURL: thumbnailURL, largeURL: largeURL }; function initHeaderSlideshow(options) { var slideshow = instantiateHeaderSlideshow(options); if (slideshow) { slideshow.render(); } } function instantiateHeaderSlideshow(options) { var $headers = $('[class*="wsite-header"]'); $headers.not(':first').hide(); var slideshowElement = $headers.css('background','none')[0]; if (slideshowElement) { var slideshow = new Slideshow(slideshowElement, { fillDimensions: true, autoplay: true, speed: options.speed || 5, slide: options.slide, // leaving for backwards compatibility transition: options.transition, showControls: true, showPlayButton: false, dots: options.dots, dotPosition: options.dotPosition, arrows: options.arrows, forceSideArrows: true, images: options.images, aspectRatio: options.aspectRatio || 'auto', useAspectRatio: options.useAspectRatio || false }); return slideshow; } } var slideshowOptions = {}; var slideshows = {}; var isTouch = 'ontouchstart' in document.documentElement; var isIElt9 = false; if ($.browser.msie) { var version = parseInt($.browser.version, 10); if (version < 9) { isIElt9 = true; } } function getSlideshowImages(elementID) { return slideshows[elementID].getPhotos(); } function updateSize() { // TODO: rename to updateSizes var changed = false; $.each(slideshows, function(i, slideshow) { slideshow.updateSize(); changed = true; }); return changed; } function generateHTML(elementID, rawOptions) { slideshowOptions[elementID] = processElementOptions(rawOptions); return "
"; // to maintain scroll state } function init(elementID) { var e = $('#' + elementID + '-slideshow'); var slideshow = new Slideshow(e, slideshowOptions[elementID]); slideshows[elementID] = slideshow; slideshow.render(); e.height(''); } function updatePhotos(elementID, photos) { // TODO: rename to updateImages if (slideshows[elementID]) { slideshows[elementID].destroy(); var options = slideshowOptions[elementID]; options.images = photos; slideshows[elementID] = new Slideshow($('#' + elementID + '-slideshow'), options); slideshows[elementID].render(); } } function render(rawOptions) { var options = processElementOptions(rawOptions); var elementID = options.elementID; var slideshow = new Slideshow($('#' + elementID + "-slideshow"), options); slideshows[elementID] = slideshow; slideshow.render(); } function processElementOptions(rawOptions) { var links = rawOptions.nav; var linkTiers = 1; if (links == 'double_thumbnails') { links = 'thumbnails'; linkTiers = 2; } else if (links == 'none') { links = false; } return { elementID: rawOptions.elementID, links: links, linkLocation: rawOptions.navLocation, linkTiers: linkTiers, captionLocation: rawOptions.captionLocation, slide: rawOptions.transition == 'slide', transition: rawOptions.transition, autoplay: parseInt(rawOptions.autoplay), speed: parseInt(rawOptions.speed), aspectRatio: rawOptions.aspectRatio || 'auto', // If property entries are not in DB, old version of element-content-producing // code (before element php refactor) don't replace anything. // Thus, these properties could have values of "%%SHOWCONTROLS%%" or "%%RANDOMSTART%%". // Or old published slideshows might not have these entries as all (undefined). showControls: rawOptions.showControls !== 'false', // default is true randomStart: rawOptions.randomStart === 'true', // default is false images: rawOptions.images || [] }; } var PRELOAD = 5; var ASPECT_RATIOS = { '16:9' : 16/9, '3:2' : 3/2, '4:3' : 4/3 }; var LINK_MOVE_EDGES = .40; var LINK_ACCELERATION = 1; var LINK_MAX_VELOCITY_SQRT = 4; function Slideshow(element, options) { var t = this; // public functions t.render = render; t.destroy = destroy; t.updateSize = updateSize; t.play = play; t.pause = pause; t.on = on; t.getHandlers = getHandlers; t.setHandlers = setHandlers; t.clearHandlers = clearHandlers; t.getPhotos = function() { return photos }; t.isPlaying = function () { return playing; }; t.getSlideIndex = function() { return slideIndex; }; t.gotoSlide = function(i, noTransition) { pause(); go(i, undefined, noTransition); }; element = $(element); options = options || {}; var photos = options.images || []; var content; var slideContainer; var slides = []; var slideImgs = []; var slideImgWidths = []; var slideImgHeights = []; var slideImgWraps = []; var linkContainer; var linkContainerInner; var links; var dotContainer; var isAnimating = false; var slideIndex; var horizontalLinks; // bool var overlayTopLeft, overlayTopRight, overlayLeft, overlayRight; var allOverlays; var playing = false; var playPauseID = 0; var playButton; var pauseButton; var playTimeoutID; var controlsVisible = true; var controlsFadeEffect; var contentWidth; var contentHeight; var thumbnailWidth; var thumbnailHeight; var fadeoutTimer; var linkContainerX; var linkContainerY; var linkContainerWidth; var linkContainerHeight; var linkContainerInnerWidth; var linkContainerInnerHeight; var linkX = 0; var linkY = 0; var linkMin; var linkMax; var isMouseOverLinks = false; var linkHoverID = 0; var linkTargetVelocity = 0; var linkVelocity = 0; var linkIntervalID; var colCount = 8; var rowCount = 4; var sliceCount = 15; /* rendering -------------------------------------------------------------------------------*/ function render() { element .addClass('wslide') .html( "
" ); var table = element.find('table'); var tbody = element.find('tbody'); var content = renderContent(); if (!isTouch) { content.on('mouseover', function() { if (options.showControls) { clearTimeout(fadeoutTimer); if (!controlsVisible) { showControls( allOverlays.queue() && allOverlays.queue().length // skipIndent? = if any animations in the queue ); } } }) .on('mouseout', function() { fadeoutTimer = setTimeout(function() { fadeControls(); }, 1000); }); } if (options.fillDimensions && options.useAspectRatio) { // only mobile will likey need to force the element height; element.css({ height : 'auto' }); } if (!options.links || !photos.length) { var tr = $(""); var td = $(""); td.append(content); tr.append(td); tbody.append(tr); } else { links = []; var linkLocation = options.linkLocation; horizontalLinks = linkLocation == 'top' || linkLocation == 'bottom'; var linkContainer = renderLinks(); var linkCell = $("").append(linkContainer); var contentCell = $("").append(content); if (horizontalLinks) { linkCell.width('auto'); // for IE var tr1 = $(""); var tr2 = $(""); if (linkLocation == 'top') { tr1.append(linkCell); tr2.append(contentCell); }else{ tr1.append(contentCell); tr2.append(linkCell); } tbody.append(tr1); tbody.append(tr2); }else{ var tr = $(""); if (linkLocation == 'left') { tr.append(linkCell); tr.append(contentCell); }else{ tr.append(contentCell); tr.append(linkCell); } tbody.append(tr); } } if (options.dots) { dotContainer = renderDots(); } initSize(); if (photos.length) { if (options.randomStart) { go(Math.floor(Math.random() * photos.length)); }else{ go(0); } } hideControls(); if (options.autoplay) { play(); } $(window).on('resize', windowResize); } function destroy() { element.empty(); _destroy(); } function _destroy() { pause(); $(window).on('resize', windowResize); clearHandlers(); } function renderContent() { content = $( "
" + " " + // for IE "
" + "
" + "
" + "
" + "
" + "
" + "
" + "
" ); slideContainer = content.find('div.wslide-slides'); overlayTopLeft = content.find('div.wslide-overlay-top-left'); overlayTopRight = content.find('div.wslide-overlay-top-right'); overlayLeft = content.find('div.wslide-overlay-left'); overlayRight = content.find('div.wslide-overlay-right'); allOverlays = overlayTopLeft.add(overlayTopRight).add(overlayLeft).add(overlayRight); if (photos.length > 1) { var prevSlide = function() { if (isTouch) { setControlTimeout(); } pause(); prev(); }; var nextSlide = function() { if (isTouch) { setControlTimeout(); } pause(); next(); }; var showPlayPause = function() { if (isTouch) { setControlTimeout(); } }; if (isTouch) { content.on('click', showPlayPause); } var prevButton = renderPrev(); var nextButton = renderNext(); if (options.showPlayButton !== false) { overlayTopLeft .append(renderPlay()) .append(renderPause()); } if (options.arrows !== false) { if (options.slide || options.forceSideArrows) { overlayLeft.append(prevButton).on('click', prevSlide); overlayRight.append(nextButton).on('click', nextSlide); }else{ prevButton.on('click', prevSlide); nextButton.on('click', nextSlide); overlayTopRight .append(prevButton) .append(' ') .append(nextButton); } } } allOverlays = allOverlays.find('.wslide-button-wrap'); return content; } function setControlTimeout() { clearTimeout(fadeoutTimer); showControls( allOverlays.queue().length ); fadeoutTimer = setTimeout(function() { fadeControls(); }, 1000); } function renderPlay() { var $playWrap = $( "
" + "" + "Play " + "" + "" + '
' ); $playWrap.css({display:'inline-block'}); playButton = $playWrap.find('.wslide-play'); playButton.on('click', play); return $playWrap; } function renderPause() { var $pauseWrap = $( "
" + "" + "Pause " + "" + "" + '
' ); $pauseWrap.css({display:'inline-block'}); pauseButton = $pauseWrap.find('.wslide-pause'); pauseButton.on('click', pause); return $pauseWrap; } function renderPrev() { var $prevButton = $( "
" + "" + "" + "" + "" + "
" ); $prevButton.css({display:'inline-block'}); return $prevButton; } function renderNext() { var $nextButton = $( "
" + "" + "" + "" + "" + "
" ); $nextButton.css({display:'inline-block'}); return $nextButton; } function renderLinks() { var linkLocation = options.linkLocation; var linkTiers = options.linkTiers; var classes = 'wslide-links disable-user-select wslide-links-' + options.linkLocation; if (options.links) { if (options.links == 'thumbnails') { classes += ' wslide-thumbnail-links'; }else{ classes += ' wslide-number-links'; } } linkContainer = $( "
" + "" + "
" ); if (!isTouch) { linkContainer .on('mouseover', linkContainerMouseover) .on('mousemove', linkContainerMousemove) .on('mouseout', linkContainerMouseout); } else { linkContainer .on('touchstart', linkContainerTouchStart) .on('touchmove', linkContainerTouchMove); } linkContainerInner = linkContainer.children().first(); initLinkSwiping(linkContainerInner); var tbody = linkContainer.find('tbody'); if (horizontalLinks) { var trs = []; for (var i=0; i"); tbody.append(trs[i]); } for (var i=0; i"); for (var c=0; c" ); for (var i=0; i") .on('click', function() { pause(); go(i); }) ); })(i); content.append(container); var dotPosition = options.dotPosition || 'right'; if (dotPosition == 'left') { container.css({ left: 10, bottom: 10 }); } else if (dotPosition == 'center') { container.css({ left: element.width()/2-container.width()/2, bottom: 10 }); // TODO: make update with liquid width } else if (dotPosition == 'right') { container.css({ right: 10, bottom: 10 }); } return container; } function renderLink(photo, i) { var td = $(""); if (options.links == 'numbers') { td.append( "" + "" + "" ); }else{ td.append( "" + "" + "" ); var img = td.find('img'); setTimeout(function() { loadImage(img[0], thumbnailURL(photo), function() { sizeThumbnail(img, photo); img.css('visibility', ''); }); },0); // let the first slide load first } var a = td.find('a'); if (isTouch && typeof(whenPhotoSwipeLoaded) !== "undefined") { // unencode the caption for the mobile slideshow var decodedCaption = $('