jQuery自动化图片比例焦点图slider轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery自动化图片比例焦点图slider轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
    <meta name="description" content="此代码内容为jQuery自动化图片比例焦点图slider效果" />
    <title>jQuery自动化图片比例焦点图slider效果</title>
	<link href="css/slideshow.css" rel="stylesheet" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/slideshow-jq.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
	<div  class="mySlideWrap"><div id='mysite-slideshow'></div></div>
	<style type="text/css">
		.mySlideWrap{
			height:300px;
			width:500px;
		}
	</style>
    <script type='text/javascript'>
	(function(jQuery) {
		function init() { 
			wSlideshow.render({
			elementID:"mysite",//Dom 渲染的容器
			nav:"double_thumbnails",//看你是否需要有导航功能如果参数配置参数:[none,double_thumbnails] 则会显示图片导航条
			navLocation:"left", //自定标题的位置参数:[top,bottomm,left,right]
			captionLocation:"bottom",//自定标题的位置参数:[top,bottom]
			transition:"fade",//自定效果参数:[top,bottom]slide fade] 
			autoplay:"1",//自定义auto play 的次数
			speed:"5",
			aspectRatio:"auto",
			showControls:"true",
			randomStart:"false",
			images:[
			{"url":"images/5568730.jpg","width":"333","height":"244","caption":"Foreign staff, Chinese Imperial Maritime Customs, Tientsin, 1877 or 1878 Photographed by William Francis Stevenson Collected by Peter Hodge"},
			{"url":"images/1676626.jpg","width":"319","height":"250","caption":"The Bund, Shanghai, 1890s Photographed by William Francis Stevenson Collected by Peter Hodge"},
			{"url":"images/6765636.jpg","width":"160","height":"250","caption":"Chinese farmers collected by #"},
			{"url":"images/4735676.jpg","width":"207","height":"250","caption":"Chinese coolie collected by #"},
			{"url":"images/474001.jpg","width":"332","height":"250","caption":"The Bund, Shanghai, 1890s Photographed by William Francis Stevenson Collected by Peter Hodge"},
			{"url":"images/5145203.jpg","width":"157","height":"250","caption":"Chinese empress in Qing Dynasty collected by #"},
			{"url":"images/1363237.jpg","width":"333","height":"238","caption":"Nanking Road, Shanghai, looking towards the Bund, 1890s Photographed by William Francis Stevenson Collected by Peter Hodge"},
			{"url":"images/652076.jpg","width":"166","height":"250","caption":"Chinese emperor in Qing Dynasty collected by #"},
			{"url":"images/7168681.jpg","width":"178","height":"250","caption":"Chinese women raising cocoons collected by #"}
			]//定义图片url caption widh height 
			})
		}
		jQuery ? jQuery(init) : document.observe('dom:loaded', init)
	})(window._W && _W.jQuery)
	</script>
</body>
</html>

JS代码(slideshow-jq.js):

// console.log calls wont fatal-error when it doesn't exist// TODO:put this in the weebly editor jsif (!window.console){
	window.console ={
}
;
}
if (!window.console.log){
	window.console.log = function(){
}
;
}
// -----------------------------------------------------------------------------------------------------// Copied and pasted from libraries/jquery_utils.js!!!!!! (TODO:better JS build system)// -----------------------------------------------------------------------------------------------------Weebly = _W = window.Weebly ||{
}
;
	Weebly.jQuery = jQuery.noConflict(true);
	// relinquish control of `$` and `jQuery` and save reference// FOR EDITOR:make plain-old `jQuery` available again// FOR PUBLISHED SITES:if a different version of jQuery wasn't previously defined,// make it available for end-developer conveniencejQuery = window.jQuery || Weebly.jQuery;
	(function($){
	$.fn.up = function(selector){
	// note:doesn't support index argumentreturn this.eq(0).parent().closest(selector || '*');
}
;
	$.fn.down = function(selector){
	// note:doesn't support index argumentif (!selector){
	return this.eq(0).children(':first');
}
return this.eq(0).find(selector || '*').eq(0);
}
;
	var idCounter = 1;
	$.fn.identify = function(){
	var id = this.attr('id');
	if (!id && this.length){
	do{
	id = 'anonymous_element_' + idCounter++;
}
while ($('#' + id).length);
	this.attr('id',id);
}
return id;
}
;
	/** * HTML5 Placeholder polyfill */
$.fn.placeholder = function(){
	if (!('placeholder' in document.createElement('input'))){
	var $el,placeholder;
	this.each(function(i,el){
	placeholder = el.getAttribute('placeholder');
	if (placeholder && el.nodeName.toLowerCase() === 'input'){
	$el = $(el).on({
	'focus':function(ev){
	if (el.value === placeholder){
	$(el).removeClass('wsite-placeholder');
	el.value = '';
}
}
,'blur':function(ev){
	if (!el.value.length){
	el.value = placeholder;
	el.className += ' wsite-placeholder';
}
}
}
);
	// Initialize Inputel.className += ' wsite-placeholder';
	el.value = placeholder;
}
}
);
}
}
;
	// we need the Prototype document.observe('dom:loaded') to work because slideshow JS relies on it// and often slideshow HTML/JS is cached in blog post HTMLif (!document.observe){
	document.observe = function(eventName,callback){
	if (eventName == 'dom:loaded'){
	$(document).ready(callback);
}
}
;
}
}
)(Weebly.jQuery);
	Weebly.evalJSON = function(json){
	// not related to jQuery,but Prototype had it,so keep it here for now// adapted from https://github.com/sstephenson/prototype/blob/master/src/prototype/lang/string.jsvar cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
	if (cx.test(json)){
	json = json.replace(cx,function(a){
	return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
}
);
}
try{
	return eval('(' + json + ')');
}
catch (e){
}
throw new SyntaxError('Badly formed JSON string:' + json);
}
;
	// -----------------------------------------------------------------------------------------------------// General Initializations// -----------------------------------------------------------------------------------------------------(function($){
	/** * Initialize the full/mobile version chooser when the url changes */
var initializeVersion = function(){
	var updateLinks = function(){
	var fullLink = $('.wsite-view-link-full');
	var mobileLink = $('.wsite-view-link-mobile');
	var windowhref = window.location.href || '';
	if (windowhref.indexOf('?') > -1){
	windowhref += '&';
}
else{
	windowhref += '?';
}
fullLink.attr('href',windowhref + 'view=full');
	mobileLink.attr('href',windowhref + 'view=mobile');
}
;
	updateLinks();
	var history = window.History;
	if (!history || !history.enabled){
	return;
}
History.Adapter.bind(window,'statechange',updateLinks);
}
;
	/** * Initialize HTML5 placeholder polyfill for browsers that do not * support the the 'placeholder' attribute (eg:IE < 10) */
function initializePlaceholders(){
	if (!('placeholder' in document.createElement('input'))){
	$(this).find('input[placeholder]').placeholder();
}
}
$(document).ready(initializeVersion);
	$(document).ready(initializePlaceholders);
}
)(Weebly.jQuery);
	// -----------------------------------------------------------------------------------------------------// Comments// -----------------------------------------------------------------------------------------------------(function($){
	window.blogCommentDisplayForm = function(url,wrapperId,commentId){
	var wrapper = $('#' + wrapperId);
	var isOpen = wrapper.data('isReplyFormOpen') || false;
	var replyButton = wrapper.prev('.reply-comment').find('span').first();
	var cancelText = /*tl(*/
'Cancel Reply'/*)tl*/
;
	if (wrapper.data('locked')) return;
	wrapper.data('locked',true);
	var replyText = wrapper.data('replyText');
	if (!replyText){
	replyText = replyButton.html();
	wrapper.data('replyText',replyText);
}
var iframe = $('#' + wrapperId + ' iframe');
	if (!iframe.length){
	iframe = $('<iframe src="' + url + '" frameborder="0" allowtransparency="true" scrolling="no"></iframe>');
	$('#' + wrapperId + ' > div > div').first().append(iframe);
}
if (isOpen){
	replyButton.html(replyText);
	wrapper.data('isReplyFormOpen',false);
	wrapper.down().hide('slide',{
	wrapper:wrapper,direction:'up',duration:1000,complete:function(){
	wrapper.data('locked',false);
}
}
);
}
else{
	replyButton.html(cancelText);
	wrapper.data('isReplyFormOpen',true);
	wrapper.down().show('slide',{
	wrapper:wrapper,direction:'up',duration:1000,complete:function(){
	wrapper.data('locked',false);
}
}
);
}
return false;
}
;
}
)(Weebly.jQuery);
	// -----------------------------------------------------------------------------------------------------// Form Submission// -----------------------------------------------------------------------------------------------------(function(Weebly,$){
	var stylePrefix = window.STYLE_PREFIX || 'weebly';
	var currentlyFocusedFormElement = null;
	function updateForm(){
	if (window.location.href.match(/posted=(.*)$/)){
	var posted = Weebly.evalJSON(decodeURIComponent(window.location.href.match(/posted=(.*)$/)[1].replace(/\+/g,' ')));
	$('form').each(function(i,formNode){
	var form = $(formNode);
	$.each(posted,function(key,value){
	if (typeof value === 'object'){
	$.each(value,function(subKey,subValue){
	form.find('input').each(function(i,inputNode){
	if (inputNode.name.replace(/_u\d*/
,'') == key + '[' + subKey + ']'|| inputNode.name == key + '[' + subKey + ']'){
	if (inputNode.type === 'checkbox'){
	inputNode.checked = 1;
}
else{
	inputNode.value = subValue;
}
}
}
);
}
);
}
else{
	form.find('input,textarea,select,button').each(function(i,inputNode){
	if (inputNode.name.replace(/_u\d*/
,'') == key|| inputNode.name == key){
	var realName = inputNode.name;
	if (formNode[realName][0] && formNode[realName][0].type === 'radio'){
	form.find('radio[name=' + realName + ']').each(function(i,radioNode){
	if (radioNode.value == value){
	radioNode.checked = true;
}
}
);
}
else{
	inputNode.value = value;
}
}
}
);
}
}
);
}
);
}
if (window.location.href.match(/form-errors=(.*?)&/) && window.location.href.match(/ucfid%22%3A%22(.*?)%/) ){
	var errors = window.location.href.match(/form\-errors=(.*?)&/)[1].split(',');
	var ucfid = window.location.href.match(/ucfid%22%3A%22(.*?)%/)[1];
	var form = $('#form-' + ucfid);
	$.each(errors,function(i,field){
	field = decodeURIComponent(field);
	form.find('input,textarea,select,button').each(function(i,inputNode){
	if (inputNode.name.replace(/_u\d*/
,'') == field|| inputNode.name.replace(/.*_u/,'_u') == field|| inputNode.name.replace(/\[.*\]$/,'') == field){
	$(inputNode).addClass('form-input-error').up('.' + stylePrefix + '-form-field').addClass('form-field-error');
}
}
);
}
);
	$('#' + ucfid + '-form-parent').after('<div>Please correct the highlighted fields</div>');
}
if (window.location.href.match(/success\=1/) && window.location.href.match(/ucfid\=(.*)/)){
	var ucfid = window.location.href.match(/ucfid\=(.*?)&/)[1];
	var form = $('#form-'+ucfid);
	var confText = 'Your data was successfully submitted.';
	var textMatch = window.location.href.match(/text=(.*?)&/);
	if (textMatch){
	confText = decodeURIComponent(textMatch[1].replace(/\+/g,' '));
}
form.html('<div>' + confText + '</div>');
}
}
function listenToResponse(){
	function receiveMessage(message){
	var sameOrigin = message.origin == location.protocol + location.port + '//' + location.hostname;
	if (!sameOrigin)return;
	// could be facebook or something?var response = Weebly.evalJSON(message.data);
	switch (response.action){
	case "finished":var ucfid = response.data.ucfid;
	var form = $("#form-" + ucfid);
	form.hide();
	var msgElm = $('#' + ucfid + '-msg');
	if (!msgElm.length){
	msgElm = $('<div id="'+ucfid+'-msg"/>').insertAfter(form);
}
msgElm.html(response.data.message);
	msgElm.effect('highlight',{
}
,2000);
	$('body').animate({
	scrollTop:msgElm.offset().top}
,{
	easing:'easeOutQuart',duration:2000}
);
	return;
	case "redirect":window.location = response.data.location;
	return;
	case "error":var errors = response.data['error-fields'];
	var ucfid = response.data.ucfid;
	var form = $("#form-" + ucfid);
	form.find('input,textarea,select,button').filter('.form-input-error').each(function(i,inputNode){
	$(inputNode).removeClass('form-input-error').up('.' + stylePrefix + '-form-field').removeClass('form-field-error');
}
);
	$.each(errors,function(i,field){
	form.find('input,textarea,select,button').each(function(i,inputNode){
	if (inputNode.name.replace(/_u\d*/
,'') == field|| inputNode.name.replace(/.*_u/,'_u') == field|| inputNode.name.replace(/\[.*\]$/,'') == field){
	$(inputNode).addClass('form-input-error').up('.' + stylePrefix + '-form-field').addClass('form-field-error');
}
}
);
}
);
	var msgElm = $('#' + ucfid + '-msg');
	if (!msgElm.length){
	msgElm = $('<div id="' + ucfid + '-msg"/>').insertAfter(form);
}
msgElm.html(response.data.message);
	return;
}
}
$('form').each(function(i,formNode){
	var form = $(formNode);
	var formAction = form.attr('action') || '';
	if (formAction.match(/formSubmit\.php$/)){
	formAction = formAction.replace(/(.*)\/formSubmit\.php$/,window.location.protocol + "//" + window.location.host +"/ajax/apps/formSubmitAjax.php");
	form.attr('action',formAction);
	form.attr('accept-charset','UTF-8');
	var name = form.attr('id') + "-target";
	var iframe = $('<iframe name="' + name + '"/>').hide().attr('id',name).insertAfter(form);
	var iframeNode = iframe[0];
	form.attr('target',iframeNode.id);
	if (!window.postMessage){
	iframe.on('load',function(){
	try{
	var location = (iframeNode.contentDocument || iframeNode.contentWindow.document).location.href;
	var data = (iframeNode.contentDocument || iframeNode.contentWindow.document).body.firstChild.nodeValue;
	if (location != "about:blank"){
	receiveMessage({
	data:data,source:iframeNode.contentWindow}
);
}
}
catch(e){
}
}
);
}
}
}
);
	if (window.postMessage){
	$(window).on('message',function(event){
	try{
	receiveMessage(event.originalEvent);
}
catch(e){
	//console.log(e);
}
}
);
}
}
function showFieldInstructions(msg,pointTo){
	removeFieldInstructions();
	var target = $(pointTo);
	target.identify();
	var image = false;
	var el =$("<div/>",{
	'class':'instructions-container','id':target.attr('id') + '-instructions'}
).html(msg).appendTo('body').on('click',function(){
	el.hide().remove();
}
);
	currentVisibleError = el.identify();
	var elWidth = el.outerWidth();
	var elHeight = el.outerHeight();
	var targetWidth = target.outerWidth();
	var targetHeight = target.outerHeight();
	var targetOffset = target.offset();
	el.css({
	top:targetOffset.top + targetHeight/2 - elHeight/2,left:targetOffset.left + targetWidth + 20}
);
	//set arrow positionvar imageTop = Math.floor(elHeight/2) - 10;
	var imageLeft = '-13';
	el.append('<img' +' src="http://www.weebly.com/images/error_arrow_left.gif"' +' style="position:absolute;
	left:'+ imageLeft + 'px;
	top:' + imageTop + 'px;
	"' +'/>');
}
function handlerRemoveFieldInstructions(event){
	var el = $(event.target);
	if (!el.hasClass(stylePrefix + '-form-field') &&!el.up('.' + stylePrefix + '-form-field').length){
	$(document).off('mousemove',handlerRemoveFieldInstructions);
	removeFieldInstructions();
}
}
function removeFieldInstructions(){
	$('.instructions-container').each(function(i,node){
	var inputID = node.id.replace('-instructions','');
	if (!currentlyFocusedFormElement ||$('#' + inputID).up('.' + stylePrefix + '-form-field').identify() != currentlyFocusedFormElement){
	$(node).remove();
}
}
);
}
function fieldInstructionsHandler(){
	// Mouse hover is preventing clicksif ('ontouchstart' in document.documentElement){
	return;
}
$('.' + stylePrefix + '-form-instructions').each(function(i,elNode){
	var el = $(elNode);
	if (el.html()){
	// Escape special characters for jQueryvar instructions = elNode.id.replace('instructions','input').replace(/(#|;
	|&|,|\.|\+|\*|~|\'|\:|\"|\!|\^|\$|[|]|\(|\)|\=|\>|\||\/|\?|\s)/g,'\\$1'),pointTo = $('#' + instructions);
	// select inputsif (!pointTo.length){
	pointTo = el.up('.' + stylePrefix + '-form-field').down('.form-select');
}
// radio/checkbox inputsif (!pointTo.length){
	pointTo = el.up('.' + stylePrefix + '-form-field').down('.' + stylePrefix + '-form-label');
}
var container = pointTo.up('.' + stylePrefix + '-form-field');
	if (pointTo.up('.' + stylePrefix + '-form-input-container').length &&pointTo.up('.' + stylePrefix + '-form-input-container').hasClass(stylePrefix + '-form-left')){
	pointTo = pointTo.up('.' + stylePrefix + '-form-input-container').next('.' + stylePrefix + '-form-right');
}
container.on('mouseover',function(event){
	if ($(this).hasClass(stylePrefix + '-form-field')){
	if (!container.down('.instructions-container').length){
	showFieldInstructions(el.html(),pointTo);
}
$(document).on('mousemove',handlerRemoveFieldInstructions);
}
}
);
}
}
);
}
function setWeeblyApproved(){
	$("input[name=" + stylePrefix + "_approved]").val('weebly');
	$(document).off('mousedown',setWeeblyApproved).off('keydown',setWeeblyApproved);
}
$(document).ready(updateForm).ready(fieldInstructionsHandler).ready(listenToResponse).on('mousedown',setWeeblyApproved).on('keydown',setWeeblyApproved).on('click',function(event){
	var el = $(event.target);
	var up = el.up('.' + stylePrefix + '-form-field');
	if (el.hasClass(stylePrefix + '-form-field')){
	up = el;
}
if (up.length){
	currentlyFocusedFormElement = up.identify();
}
else{
	currentlyFocusedFormElement = null;
}
removeFieldInstructions();
}
);
}
)(Weebly,Weebly.jQuery);
	// -----------------------------------------------------------------------------------------------------// Search Header and Element// -----------------------------------------------------------------------------------------------------(function($){
	/** * Set up handlers for our search field. We have to do this because * the 'submit' / 'search' button isn't a button but a span. Which * makes it easier to stylize,but harder to convert into a button. */
function listenToSearchSubmit(){
	// Header search form// ------------------$('#wsite-header-search-form').on('click','span.wsite-search-button',function(ev){
	$(ev.delegateTarget).submit();
}
).on('submit',function(ev){
	// Disable search from Theme Previewsreturn !window.document.body.className.match(/wsite-page-theme_browser\/preview/);
}
);
	// Search element// ------------------$('form.wsite-search-element-form').on('click','span.wsite-search-element-submit',function(ev){
	$(ev.delegateTarget).submit();
}
).on('submit',function(){
	// Disable search from Theme Previewsreturn !window.document.body.className.match(/wsite-page-theme_browser\/preview/);
}
);
}
$(document).ready(listenToSearchSubmit);
}
)(Weebly.jQuery);
	// -----------------------------------------------------------------------------------------------------// Fancybox// -----------------------------------------------------------------------------------------------------(function($){
	$(document).ready(function(){
	$('a[rel=lightbox]') // ...standalone lightbox <a>'s.removeAttr('rel') // don't group them by rel (fancybox will want to).add('a[rel^="lightbox["]') // ...select gallery <a>'s too.addClass('w-fancybox');
	if ($.fn.fancybox){
	// mobile doesn't have fancybox. uses photoswipe instead// it's best to use a global selector to initialize fancybox so that it can use event delegation internally.// PS- fancybox's same event delegation is buggy when used like this:// $('.whatever').removeClass('whatever').fancybox()$('.w-fancybox').fancybox({
	prevEffect:'none',nextEffect:'none',padding:10,helpers:{
	title:{
	type:'inside'}
,thumbs:{
	width:50,height:50}
}
}
);
	window.lightboxLoaded = true;
}
}
);
}
)(Weebly.jQuery);
	// -----------------------------------------------------------------------------------------------------// PhotoSwipe// -----------------------------------------------------------------------------------------------------(function($){
	var callbacks = [];
	var insertedTags = false;
	var isTouch = 'ontouchstart' in document.documentElement;
	window.whenPhotoSwipeLoaded = function(callback){
	// TODO:could jqueryify thisif (window.Code && window.Code.PhotoSwipe){
	callback();
}
else{
	callbacks.push(callback);
	if (!insertedTags){
	insertedTags = true;
	var head = document.getElementsByTagName('head')[0];
	var script = document.createElement('script');
	var cssLink = document.createElement('link');
	script.type = 'text/javascript';
	script.async = true;
	script.src = STATIC_BASE + "weebly/libraries/photoswipe/code.photoswipe-3.0.4-custom.min.js";
	cssLink.setAttribute('rel','stylesheet');
	cssLink.setAttribute('type','text/css');
	cssLink.setAttribute('href',STATIC_BASE + "weebly/libraries/photoswipe/photoswipe.css");
	head.insertBefore(cssLink,head.firstChild);
	head.insertBefore(script,head.firstChild);
}
}
}
;
	window._photoSwipeLoaded = function(){
	// called by the photoswipe JS filefor (var i=0;
	i<callbacks.length;
	i++){
	callbacks[i]();
}
}
;
	function initPhotoSwipeAnchors(anchorNodes){
	// kill lightbox onclick$(anchorNodes).removeClass('w-fancybox').attr('onclick','').off('click');
	whenPhotoSwipeLoaded(function(){
	Code.PhotoSwipe.attach(anchorNodes,{
	captionAndToolbarFlipPosition:true,captionAndToolbarAutoHideDelay:0,// always showloop:false}
);
}
);
}
if (isTouch && !$.fn.fancybox){
	$(document).ready(function(){
	var anchorGroups ={
}
;
	$('a.w-fancybox').each(function(i,anchorNode){
	var match = ($(anchorNode).attr('rel') || '').match(/^lightbox\[(.*)\]/);
	if (match){
	var groupName = match[1];
	anchorGroups[groupName] = anchorGroups[groupName] || [];
	anchorGroups[groupName].push(anchorNode);
}
else{
	initPhotoSwipeAnchors([ anchorNode ]);
}
}
);
	$.each(anchorGroups,function(name,anchorNodes){
	initPhotoSwipeAnchors(anchorNodes);
}
);
}
);
}
}
)(Weebly.jQuery);
	(function(){
	var stylePrefix = window.STYLE_PREFIX || 'weebly';
	var isThemeCSSLoaded = function(){
	for (var i=0;
	i<document.styleSheets.length;
	i++){
	try{
	if (document.styleSheets[i].title == stylePrefix+'-theme-css'){
	var sheet = document.styleSheets[i];
	var rules = sheet.cssRules || sheet.rules;
	return rules && rules.length > 0;
}
}
catch (err){
}
}
return false;
}
var whenThemeCSSLoaded = function(callback){
	if (isThemeCSSLoaded()){
	callback();
}
else{
	var intervalID = setInterval(function(){
	if (isThemeCSSLoaded()){
	clearInterval(intervalID);
	callback();
}
}
,200);
}
}
if (!window.whenThemeCSSLoaded){
	window.whenThemeCSSLoaded = whenThemeCSSLoaded;
}
}
());
	/// FAST CLICK/** * @preserve FastClick:polyfill to remove click delays on browsers with touch UIs. * * @version 0.6.7 * @codingstandard ftlabs-jsv2 * @copyright The Financial Times Limited [All Rights Reserved] * @license MIT License (see LICENSE.txt) */
/*jslint browser:true,node:true*/
/*global define,Event,Node*/
/** * Instantiate fast-clicking listeners on the specificed layer. * * @constructor * @param{
	Element}
layer The layer to listen on */
function FastClick(layer){
	'use strict';
	var oldOnClick,self = this;
	/** * Whether a click is currently being tracked. * * @type boolean */
this.trackingClick = false;
	/** * Timestamp for when when click tracking started. * * @type number */
this.trackingClickStart = 0;
	/** * The element being tracked for a click. * * @type EventTarget */
this.targetElement = null;
	/** * X-coordinate of touch start event. * * @type number */
this.touchStartX = 0;
	/** * Y-coordinate of touch start event. * * @type number */
this.touchStartY = 0;
	/** * ID of the last touch,retrieved from Touch.identifier. * * @type number */
this.lastTouchIdentifier = 0;
	/** * Touchmove boundary,beyond which a click will be cancelled. * * @type number */
this.touchBoundary = 10;
	/** * The FastClick layer. * * @type Element */
this.layer = layer;
	if (!layer || !layer.nodeType){
	throw new TypeError('Layer must be a document node');
}
/** @type function() */
this.onClick = function(){
	return FastClick.prototype.onClick.apply(self,arguments);
}
;
	/** @type function() */
this.onMouse = function(){
	return FastClick.prototype.onMouse.apply(self,arguments);
}
;
	/** @type function() */
this.onTouchStart = function(){
	return FastClick.prototype.onTouchStart.apply(self,arguments);
}
;
	/** @type function() */
this.onTouchEnd = function(){
	return FastClick.prototype.onTouchEnd.apply(self,arguments);
}
;
	/** @type function() */
this.onTouchCancel = function(){
	return FastClick.prototype.onTouchCancel.apply(self,arguments);
}
;
	if (FastClick.notNeeded(layer)){
	return;
}
// Set up event handlers as requiredif (this.deviceIsAndroid){
	layer.addEventListener('mouseover',this.onMouse,true);
	layer.addEventListener('mousedown',this.onMouse,true);
	layer.addEventListener('mouseup',this.onMouse,true);
}
layer.addEventListener('click',this.onClick,true);
	layer.addEventListener('touchstart',this.onTouchStart,false);
	layer.addEventListener('touchend',this.onTouchEnd,false);
	layer.addEventListener('touchcancel',this.onTouchCancel,false);
	// Hack is required for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)// which is how FastClick normally stops click events bubbling to callbacks registered on the FastClick// layer when they are cancelled.if (!Event.prototype.stopImmediatePropagation){
	layer.removeEventListener = function(type,callback,capture){
	var rmv = Node.prototype.removeEventListener;
	if (type === 'click'){
	rmv.call(layer,type,callback.hijacked || callback,capture);
}
else{
	rmv.call(layer,type,callback,capture);
}
}
;
	layer.addEventListener = function(type,callback,capture){
	var adv = Node.prototype.addEventListener;
	if (type === 'click'){
	adv.call(layer,type,callback.hijacked || (callback.hijacked = function(event){
	if (!event.propagationStopped){
	callback(event);
}
}
),capture);
}
else{
	adv.call(layer,type,callback,capture);
}
}
;
}
// If a handler is already declared in the element's onclick attribute,it will be fired before// FastClick's onClick handler. Fix this by pulling out the user-defined handler function and// adding it as listener.if (typeof layer.onclick === 'function'){
	// Android browser on at least 3.2 requires a new reference to the function in layer.onclick// - the old one won't work if passed to addEventListener directly.oldOnClick = layer.onclick;
	layer.addEventListener('click',function(event){
	oldOnClick(event);
}
,false);
	layer.onclick = null;
}
}
/** * Android requires exceptions. * * @type boolean */
FastClick.prototype.deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0;
	/** * iOS requires exceptions. * * @type boolean */
FastClick.prototype.deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent);
	/** * iOS 4 requires an exception for select elements. * * @type boolean */
FastClick.prototype.deviceIsIOS4 = FastClick.prototype.deviceIsIOS && (/OS 4_\d(_\d)?/).test(navigator.userAgent);
	/** * iOS 6.0(+?) requires the target element to be manually derived * * @type boolean */
FastClick.prototype.deviceIsIOSWithBadTarget = FastClick.prototype.deviceIsIOS && (/OS ([6-9]|\d{
	2}
)_\d/).test(navigator.userAgent);
	/** * Determine whether a given element requires a native click. * * @param{
	EventTarget|Element}
target Target DOM element * @returns{
	boolean}
Returns true if the element needs a native click */
FastClick.prototype.needsClick = function(target){
	'use strict';
	switch (target.nodeName.toLowerCase()){
	// Don't send a synthetic click to disabled inputs (issue #62)case 'button':case 'select':case 'textarea':if (target.disabled){
	return true;
}
break;
	case 'input':// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)if ((this.deviceIsIOS && target.type === 'file') || target.disabled){
	return true;
}
break;
	case 'label':case 'video':return true;
}
return (/\bneedsclick\b/).test(target.className);
}
;
	/** * Determine whether a given element requires a call to focus to simulate click into element. * * @param{
	EventTarget|Element}
target Target DOM element * @returns{
	boolean}
Returns true if the element requires a call to focus to simulate native click. */
FastClick.prototype.needsFocus = function(target){
	'use strict';
	switch (target.nodeName.toLowerCase()){
	case 'textarea':case 'select':return true;
	case 'input':switch (target.type){
	case 'button':case 'checkbox':case 'file':case 'image':case 'radio':case 'submit':return false;
}
// No point in attempting to focus disabled inputsreturn !target.disabled && !target.readOnly;
	default:return (/\bneedsfocus\b/).test(target.className);
}
}
;
	/** * Send a click event to the specified element. * * @param{
	EventTarget|Element}
targetElement * @param{
	Event}
event */
FastClick.prototype.sendClick = function(targetElement,event){
	'use strict';
	var clickEvent,touch;
	// On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)if (document.activeElement && document.activeElement !== targetElement){
	document.activeElement.blur();
}
touch = event.changedTouches[0];
	// Synthesise a click event,with an extra attribute so it can be trackedclickEvent = document.createEvent('MouseEvents');
	clickEvent.initMouseEvent('click',true,true,window,1,touch.screenX,touch.screenY,touch.clientX,touch.clientY,false,false,false,false,0,null);
	clickEvent.forwardedTouchEvent = true;
	targetElement.dispatchEvent(clickEvent);
}
;
	/** * @param{
	EventTarget|Element}
targetElement */
FastClick.prototype.focus = function(targetElement){
	'use strict';
	var length;
	if (this.deviceIsIOS && targetElement.setSelectionRange){
	length = targetElement.value.length;
	targetElement.setSelectionRange(length,length);
}
else{
	targetElement.focus();
}
}
;
	/** * Check whether the given target element is a child of a scrollable layer and if so,set a flag on it. * * @param{
	EventTarget|Element}
targetElement */
FastClick.prototype.updateScrollParent = function(targetElement){
	'use strict';
	var scrollParent,parentElement;
	scrollParent = targetElement.fastClickScrollParent;
	// Attempt to discover whether the target element is contained within a scrollable layer. Re-check if the// target element was moved to another parent.if (!scrollParent || !scrollParent.contains(targetElement)){
	parentElement = targetElement;
	do{
	if (parentElement.scrollHeight > parentElement.offsetHeight){
	scrollParent = parentElement;
	targetElement.fastClickScrollParent = parentElement;
	break;
}
parentElement = parentElement.parentElement;
}
while (parentElement);
}
// Always update the scroll top tracker if possible.if (scrollParent){
	scrollParent.fastClickLastScrollTop = scrollParent.scrollTop;
}
}
;
	/** * @param{
	EventTarget}
targetElement * @returns{
	Element|EventTarget}
*/
FastClick.prototype.getTargetElementFromEventTarget = function(eventTarget){
	'use strict';
	// On some older browsers (notably Safari on iOS 4.1 - see issue #56) the event target may be a text node.if (eventTarget.nodeType === Node.TEXT_NODE){
	return eventTarget.parentNode;
}
return eventTarget;
}
;
	/** * On touch start,record the position and scroll offset. * * @param{
	Event}
event * @returns{
	boolean}
*/
FastClick.prototype.onTouchStart = function(event){
	'use strict';
	var targetElement,touch,selection;
	// Ignore multiple touches,otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111).if (event.targetTouches.length > 1){
	return true;
}
targetElement = this.getTargetElementFromEventTarget(event.target);
	touch = event.targetTouches[0];
	if (this.deviceIsIOS){
	// Only trusted events will deselect text on iOS (issue #49)selection = window.getSelection();
	if (selection.rangeCount && !selection.isCollapsed){
	return true;
}
if (!this.deviceIsIOS4){
	// Weird things happen on iOS when an alert or confirm dialog is opened from a click event callback (issue #23):// when the user next taps anywhere else on the page,new touchstart and touchend events are dispatched// with the same identifier as the touch event that previously triggered the click that triggered the alert.// Sadly,there is an issue on iOS 4 that causes some normal touch events to have the same identifier as an// immediately preceeding touch event (issue #52),so this fix is unavailable on that platform.if (touch.identifier === this.lastTouchIdentifier){
	event.preventDefault();
	return false;
}
this.lastTouchIdentifier = touch.identifier;
	// If the target element is a child of a scrollable layer (using -webkit-overflow-scrolling:touch) and:// 1) the user does a fling scroll on the scrollable layer// 2) the user stops the fling scroll with another tap// then the event.target of the last 'touchend' event will be the element that was under the user's finger// when the fling scroll was started,causing FastClick to send a click event to that layer - unless a check// is made to ensure that a parent layer was not scrolled before sending a synthetic click (issue #42).this.updateScrollParent(targetElement);
}
}
this.trackingClick = true;
	this.trackingClickStart = event.timeStamp;
	this.targetElement = targetElement;
	this.touchStartX = touch.pageX;
	this.touchStartY = touch.pageY;
	// Prevent phantom clicks on fast double-tap (issue #36)if ((event.timeStamp - this.lastClickTime) < 200){
	event.preventDefault();
}
return true;
}
;
	/** * Based on a touchmove event object,check whether the touch has moved past a boundary since it started. * * @param{
	Event}
event * @returns{
	boolean}
*/
FastClick.prototype.touchHasMoved = function(event){
	'use strict';
	var touch = event.changedTouches[0],boundary = this.touchBoundary;
	if (Math.abs(touch.pageX - this.touchStartX) > boundary || Math.abs(touch.pageY - this.touchStartY) > boundary){
	return true;
}
return false;
}
;
	/** * Attempt to find the labelled control for the given label element. * * @param{
	EventTarget|HTMLLabelElement}
labelElement * @returns{
	Element|null}
*/
FastClick.prototype.findControl = function(labelElement){
	'use strict';
	// Fast path for newer browsers supporting the HTML5 control attributeif (labelElement.control !== undefined){
	return labelElement.control;
}
// All browsers under test that support touch events also support the HTML5 htmlFor attributeif (labelElement.htmlFor){
	return document.getElementById(labelElement.htmlFor);
}
// If no for attribute exists,attempt to retrieve the first labellable descendant element// the list of which is defined here:http://www.w3.org/TR/html5/forms.html#category-labelreturn labelElement.querySelector('button,input:not([type=hidden]),keygen,meter,output,progress,select,textarea');
}
;
	/** * On touch end,determine whether to send a click event at once. * * @param{
	Event}
event * @returns{
	boolean}
*/
FastClick.prototype.onTouchEnd = function(event){
	'use strict';
	var forElement,trackingClickStart,targetTagName,scrollParent,touch,targetElement = this.targetElement;
	// If the touch has moved,cancel the click trackingif (this.touchHasMoved(event)){
	this.trackingClick = false;
	this.targetElement = null;
}
if (!this.trackingClick){
	return true;
}
// Prevent phantom clicks on fast double-tap (issue #36)if ((event.timeStamp - this.lastClickTime) < 200){
	this.cancelNextClick = true;
	return true;
}
this.lastClickTime = event.timeStamp;
	trackingClickStart = this.trackingClickStart;
	this.trackingClick = false;
	this.trackingClickStart = 0;
	// On some iOS devices,the targetElement supplied with the event is invalid if the layer// is performing a transition or scroll,and has to be re-detected manually. Note that// for this to function correctly,it must be called *after* the event target is checked!// See issue #57;
	also filed as rdar://13048589 .if (this.deviceIsIOSWithBadTarget){
	touch = event.changedTouches[0];
	targetElement = document.elementFromPoint(touch.pageX - window.pageXOffset,touch.pageY - window.pageYOffset);
}
targetTagName = targetElement.tagName.toLowerCase();
	if (targetTagName === 'label'){
	forElement = this.findControl(targetElement);
	if (forElement){
	this.focus(targetElement);
	if (this.deviceIsAndroid){
	return false;
}
targetElement = forElement;
}
}
else if (this.needsFocus(targetElement)){
	// Case 1:If the touch started a while ago (best guess is 100ms based on tests for issue #36) then focus will be triggered anyway. Return early and unset the target element reference so that the subsequent click will be allowed through.// Case 2:Without this exception for input elements tapped when the document is contained in an iframe,then any inputted text won't be visible even though the value attribute is updated as the user types (issue #37).if ((event.timeStamp - trackingClickStart) > 100 || (this.deviceIsIOS && window.top !== window && targetTagName === 'input')){
	this.targetElement = null;
	return false;
}
this.focus(targetElement);
	// Select elements need the event to go through on iOS 4,otherwise the selector menu won't open.if (!this.deviceIsIOS4 || targetTagName !== 'select'){
	this.targetElement = null;
	event.preventDefault();
}
return false;
}
if (this.deviceIsIOS && !this.deviceIsIOS4){
	// Don't send a synthetic click event if the target element is contained within a parent layer that was scrolled// and this tap is being used to stop the scrolling (usually initiated by a fling - issue #42).scrollParent = targetElement.fastClickScrollParent;
	if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop){
	return true;
}
}
// Prevent the actual click from going though - unless the target node is marked as requiring// real clicks or if it is in the whitelist in which case only non-programmatic clicks are permitted.if (!this.needsClick(targetElement)){
	event.preventDefault();
	this.sendClick(targetElement,event);
}
return false;
}
;
	/** * On touch cancel,stop tracking the click. * * @returns{
	void}
*/
FastClick.prototype.onTouchCancel = function(){
	'use strict';
	this.trackingClick = false;
	this.targetElement = null;
}
;
	/** * Determine mouse events which should be permitted. * * @param{
	Event}
event * @returns{
	boolean}
*/
FastClick.prototype.onMouse = function(event){
	'use strict';
	// If a target element was never set (because a touch event was never fired) allow the eventif (!this.targetElement){
	return true;
}
if (event.forwardedTouchEvent){
	return true;
}
// Programmatically generated events targeting a specific element should be permittedif (!event.cancelable){
	return true;
}
// Derive and check the target element to see whether the mouse event needs to be permitted;
	// unless explicitly enabled,prevent non-touch click events from triggering actions,// to prevent ghost/doubleclicks.if (!this.needsClick(this.targetElement) || this.cancelNextClick){
	// Prevent any user-added listeners declared on FastClick element from being fired.if (event.stopImmediatePropagation){
	event.stopImmediatePropagation();
}
else{
	// Part of the hack for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)event.propagationStopped = true;
}
// Cancel the eventevent.stopPropagation();
	event.preventDefault();
	return false;
}
// If the mouse event is permitted,return true for the action to go through.return true;
}
;
	/** * On actual clicks,determine whether this is a touch-generated click,a click action occurring * naturally after a delay after a touch (which needs to be cancelled to avoid duplication),or * an actual click which should be permitted. * * @param{
	Event}
event * @returns{
	boolean}
*/
FastClick.prototype.onClick = function(event){
	'use strict';
	var permitted;
	// It's possible for another FastClick-like library delivered with third-party code to fire a click event before FastClick does (issue #44). In that case,set the click-tracking flag back to false and return early. This will cause onTouchEnd to return early.if (this.trackingClick){
	this.targetElement = null;
	this.trackingClick = false;
	return true;
}
// Very odd behaviour on iOS (issue #18):if a submit element is present inside a form and the user hits enter in the iOS simulator or clicks the Go button on the pop-up OS keyboard the a kind of 'fake' click event will be triggered with the submit-type input element as the target.if (event.target.type === 'submit' && event.detail === 0){
	return true;
}
permitted = this.onMouse(event);
	// Only unset targetElement if the click is not permitted. This will ensure that the check for !targetElement in onMouse fails and the browser's click doesn't go through.if (!permitted){
	this.targetElement = null;
}
// If clicks are permitted,return true for the action to go through.return permitted;
}
;
	/** * Remove all FastClick's event listeners. * * @returns{
	void}
*/
FastClick.prototype.destroy = function(){
	'use strict';
	var layer = this.layer;
	if (this.deviceIsAndroid){
	layer.removeEventListener('mouseover',this.onMouse,true);
	layer.removeEventListener('mousedown',this.onMouse,true);
	layer.removeEventListener('mouseup',this.onMouse,true);
}
layer.removeEventListener('click',this.onClick,true);
	layer.removeEventListener('touchstart',this.onTouchStart,false);
	layer.removeEventListener('touchend',this.onTouchEnd,false);
	layer.removeEventListener('touchcancel',this.onTouchCancel,false);
}
;
	/** * Check whether FastClick is needed. * * @param{
	Element}
layer The layer to listen on */
FastClick.notNeeded = function(layer){
	'use strict';
	var metaViewport;
	// Devices that don't support touch don't need FastClickif (typeof window.ontouchstart === 'undefined'){
	return true;
}
if ((/Chrome\/[0-9]+/).test(navigator.userAgent)){
	// Chrome on Android with user-scalable="no" doesn't need FastClick (issue #89)if (FastClick.prototype.deviceIsAndroid){
	metaViewport = document.querySelector('meta[name=viewport]');
	if (metaViewport && metaViewport.content.indexOf('user-scalable=no') !== -1){
	return true;
}
// Chrome desktop doesn't need FastClick (issue #15)}
else{
	return true;
}
}
// IE10 with -ms-touch-action:none,which disables double-tap-to-zoom (issue #97)if (layer.style.msTouchAction === 'none'){
	return true;
}
return false;
}
;
	/** * Factory method for creating a FastClick object * * @param{
	Element}
layer The layer to listen on */
FastClick.attach = function(layer){
	'use strict';
	return new FastClick(layer);
}
;
	if (typeof define !== 'undefined' && define.amd){
	// AMD. Register as an anonymous module.define(function(){
	'use strict';
	return FastClick;
}
);
}
else if (typeof module !== 'undefined' && module.exports){
	module.exports = FastClick.attach;
	module.exports.FastClick = FastClick;
}
else{
	window.FastClick = FastClick;
}
//// END FASTCLICK(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','#000')[0];
	if (slideshowElement){
	var slideshow = new Slideshow(slideshowElement,{
	fillDimensions:true,autoplay:true,speed:options.speed || 5,slide:options.slide,// leaving for backwards compatibilitytransition: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 updateSizesvar changed = false;
	$.each(slideshows,function(i,slideshow){
	slideshow.updateSize();
	changed = true;
}
);
	return changed;
}
function generateHTML(elementID,rawOptions){
	slideshowOptions[elementID] = processElementOptions(rawOptions);
	return "<div id='" + elementID + "-slideshow' style='height:1000px'></div>";
	// 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 updateImagesif (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 truerandomStart:rawOptions.randomStart === 'true',// default is falseimages: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 functionst.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;
	// boolvar 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("<table class='wslide-main'><tbody></tbody></table>");
	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 = $("<tr/>");
	var td = $("<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 = $("<td class='wslide-link-cell'/>").append(linkContainer);
	var contentCell = $("<td/>").append(content);
	if (horizontalLinks){
	linkCell.width('auto');
	// for IEvar tr1 = $("<tr/>");
	var tr2 = $("<tr/>");
	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 = $("<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 = $("<div class='wslide-content disable-user-select'>" +"&nbsp;
	" + // for IE"<div class='wslide-content-inner'>" +"<div class='wslide-slides'></div>" +"</div>" +"<div class='wslide-overlay-top-left disable-user-select'></div>" +"<div class='wslide-overlay-top-right disable-user-select'></div>" +"<div class='wslide-overlay-left disable-user-select'></div>" +"<div class='wslide-overlay-right disable-user-select'></div>" +"</div>");
	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('&nbsp;
	').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 = $("<div class='wslide-button-wrap'>" +"<span class='wslide-play wslide-button disable-user-select'>" +"<span class='wslide-button-inner'>Play <span class='wslide-button-icon'></span></span>" +"<span class='wslide-button-bg'></span>" +"</span>" +'</div>');
	$playWrap.css({
	display:'inline-block'}
);
	playButton = $playWrap.find('.wslide-play');
	playButton.on('click',play);
	return $playWrap;
}
function renderPause(){
	var $pauseWrap = $("<div class='wslide-button-wrap'>" +"<span class='wslide-pause wslide-button disable-user-select'>" +"<span class='wslide-button-inner'>Pause <span class='wslide-button-icon'></span></span>" +"<span class='wslide-button-bg'></span>" +"</span>" +'</div>');
	$pauseWrap.css({
	display:'inline-block'}
);
	pauseButton = $pauseWrap.find('.wslide-pause');
	pauseButton.on('click',pause);
	return $pauseWrap;
}
function renderPrev(){
	var $prevButton = $("<div class='wslide-button-wrap'>" +"<span class='wslide-prev wslide-button disable-user-select'>" +"<span class='wslide-button-inner'><span class='wslide-button-icon'></span></span>" +"<span class='wslide-button-bg'></span>" +"</span>" +"</div>");
	$prevButton.css({
	display:'inline-block'}
);
	return $prevButton;
}
function renderNext(){
	var $nextButton = $("<div class='wslide-button-wrap'>" +"<span class='wslide-next wslide-button disable-user-select'>" +"<span class='wslide-button-inner'><span class='wslide-button-icon'></span></span>" +"<span class='wslide-button-bg'></span>" +"</span>" +"</div>");
	$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 = $("<div class='" + classes + "'>" +"<div class='wslide-links-inner'>" +"<table><tbody></tbody></table>" +"</div>" +"</div>");
	if (!isTouch){
	linkContainer.on('mouseover',linkContainerMouseover).on('mousemove',linkContainerMousemove).on('mouseout',linkContainerMouseout);
}
linkContainerInner = linkContainer.children().first();
	initLinkSwiping(linkContainerInner);
	var tbody = linkContainer.find('tbody');
	if (horizontalLinks){
	var trs = [];
	for (var i=0;
	i<linkTiers;
	i++){
	trs[i] = $("<tr/>");
	tbody.append(trs[i]);
}
for (var i=0;
	i<photos.length;
	i++){
	trs[i % linkTiers].append(renderLink(photos[i],i));
}
}
else{
	var photoCnt = photos.length;
	for (var r=0,i=0;
	i<photoCnt;
	r++){
	var tr = $("<tr/>");
	for (var c=0;
	c<linkTiers && i<photoCnt;
	c++,i++){
	tr.append(renderLink(photos[i],i));
}
tbody.append(tr);
}
}
if (isTouch && typeof(whenPhotoSwipeLoaded) !== "undefined"){
	whenPhotoSwipeLoaded(function(){
	Code.PhotoSwipe.attach(linkContainer.find('a').toArray(),{
	captionAndToolbarFlipPosition:true,captionAndToolbarAutoHideDelay:0,// always showloop:false}
);
}
);
}
return linkContainer;
}
function renderDots(){
	var container = $("<div class='wslide-dots'></div>");
	for (var i=0;
	i<photos.length;
	i++) (function(i){
	container.append($("<div class='wslide-dot' />").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 = $("<td/>");
	if (options.links == 'numbers'){
	td.append("<a class='wslide-link wslide-link-number'>" +"<div class='wslide-link-inner1'>" +"<div class='wslide-link-inner2'>" +(i + 1) +"</div>" +"</div>" +"</a>");
}
else{
	td.append("<a class='wslide-link wslide-link-thumbnail'>" +"<div class='wslide-link-inner1'>" +"<div class='wslide-link-inner2'>" +"<img style='visibility:hidden' />" +"</div>" +"</div>" +"</a>");
	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){
	// unencode the caption for the mobile slideshowvar decodedCaption = $('<textarea />').html(photo.caption || '').val();
	a.attr('href',largeURL(photo)) .attr('title',decodedCaption);
}
else{
	a.on('click',function(){
	pause();
	go(i);
}
);
}
initLinkSwiping(a);
	links[i] = a;
	return td;
}
function addSlide(photo,i,navigateOnLoad){
	var linkNewWindow = false;
	var link = photo.link;
	if (link){
	var origLink = link;
	link = link.replace('weeblylink_new_window','');
	if (link != origLink){
	linkNewWindow = true;
}
}
var captionHTML =photo.caption ?"<div style='display:none;
	' class='wslide-caption " +(options.captionLocation=='top' ? 'wslide-caption-top':'wslide-caption-bottom') + "'>" +"<div class='wslide-caption-text'>" + photo.caption + "</div>" + // already escaped"<div class='wslide-caption-bg'></div>" +"</div>":'';
	var slide = $("<div class='wslide-slide wslide-slide-loading'>" +(link ? "<a>":'') +(options.fillDimensions ? captionHTML:'') +"<div class='wslide-slide-inner1'>" +"<div class='wslide-slide-inner2' style='visibility:hidden'>" +"<img />" +(options.fillDimensions ? '':captionHTML) +"</div>" +"</div>" +(link ? "</a>":'') +"</div>");
	if (!isIElt9){
	slide.find('.wslide-caption').css({
	opacity:.99}
);
}
slide.hide();
	slideContainer.append(slide);
	var img = slide.find('img');
	var imgWrap = img.up('.wslide-slide-inner2');
	slides[i] = slide;
	slideImgs[i] = img;
	slideImgWraps[i] = imgWrap;
	slide.find('a').each(function(i,a){
	a = $(a);
	if (window.currentSite){
	// in editora.attr('href','#');
	a.on('click',function(){
	return false}
);
	a.attr('title',/*tl(*/
"Links active once published"/*)tl*/
);
}
else{
	if (link){
	a.attr('href',link);
	if (linkNewWindow){
	a.attr('target','_blank');
}
}
}
}
);
	loadImage(img[0],largeURL(photo),function(){
	slide.removeClass('wslide-slide-loading');
	// Only IE does not give the original image width when hidden.// The show method has some issues when getting the image width and height// with Adblock for Safari,and possibly some other plugins.slideImgWidths[i] = img[0].width;
	slideImgHeights[i] = img[0].height;
	if (slideImgWidths[i] === 0 || slideImgHeights[i] === 0){
	slide.show(0);
	slideImgWidths[i] = img[0].width;
	slideImgHeights[i] = img[0].height;
	slide.hide(0);
}
sizeContentArea();
	sizeImage(i);
	if (i == slideIndex){
	// is current slidesizeOverlays(i);
	if (playing){
	timedNext();
}
}
imgWrap.css('visibility','');
	if (navigateOnLoad){
	go(i);
}
}
);
	return slide;
}
/* sizing------------------------------------------------------------------------------------*/
function initSize(){
	calcThumbnailDims();
	updateSize();
}
function updateSize(){
	if (isDead() || !content){
	return;
}
if (linkContainer && !horizontalLinks){
	// need to set width of vertical link containerlinkContainerWidth = linkContainerInner.outerWidth();
	linkContainer.width(linkContainerWidth);
}
sizeContentArea();
	if (linkContainer){
	linkContainerInnerWidth = linkContainerInner.outerWidth();
	linkContainerInnerHeight = linkContainerInner.outerHeight();
	if (horizontalLinks){
	linkContainerWidth = contentWidth;
	linkContainerHeight = linkContainerInner.outerHeight();
	linkContainer.height(linkContainerHeight);
	linkMin = linkContainerWidth - linkContainerInnerWidth;
	linkMax = 0;
	/* centerif (linkContainerInnerWidth < linkContainerWidth){
	linkContainerInner.css('left',linkContainerWidth/2 - linkContainerInnerWidth/2);
}
*/
}
else{
	// (linkContainerWidth calculated above)linkContainerHeight = contentHeight;
	linkContainer.height(linkContainerHeight);
	linkMin = linkContainerHeight - linkContainerInnerHeight;
	linkMax = 0;
}
}
/* ratio for captions to be tall enough to not block dots */
var dots = $('.wslide-dots');
	var bottomPx = (contentHeight < 200) ? contentHeight / 20:10;
	if (options.dotPosition == 'center'){
	dots.css({
	left:element.width()/2-dots.width()/2,bottom:bottomPx}
);
	// TODO:make update with liquid width}
else{
	dots.css({
	bottom:bottomPx}
);
}
if (slideImgWidths[slideIndex] && slideImgHeights[slideIndex]){
	// is current image loaded?sizeContentArea();
	sizeImage(slideIndex);
	sizeOverlays(slideIndex);
}
}
function sizeContentArea(){
	contentWidth = content.outerWidth();
	if (options.fillDimensions && !options.useAspectRatio){
	contentHeight = element.height();
	if (linkContainer && horizontalLinks){
	contentHeight -= linkContainerInner.outerHeight();
	// BAD because we also query this below}
}
else{
	contentHeight = Math.round(contentWidth / getAspectRatio());
	// Revisit this// limit contentHeight to the shortest photo (after we have calculated it's scaled down dimension)// for (var i = 0;
	i < photos.length;
	i++){
	//var photoNaturalWidth = photos[i].fullWidth || slideImgWidths[i];
	//var photoNaturalHeight = photos[i].fullHeight || slideImgHeights[i];
	//if (photoNaturalWidth && photoNaturalHeight){
	//// find the height of the photo (`photoHeight`) after it is scaled down//var photoScale = Math.min(//contentWidth / photoNaturalWidth,//contentHeight / photoNaturalHeight,//1 // makes sure we don't scale up//);
	//var photoHeight = (photoNaturalHeight * photoScale) + 1;
	//// limit contentHeight!//contentHeight = Math.min(contentHeight,photoHeight);
	//}
//}
}
content.height(contentHeight);
}
function getAspectRatio(){
	if (options.aspectRatio == 'auto'){
	if (!photos.length){
	return 16/9;
}
var scores ={
}
;
	for (var i=0;
	i<photos.length;
	i++){
	var photoRatio = photos[i].width / photos[i].height;
	var bestKey;
	var bestDiff = false;
	$.each(ASPECT_RATIOS,function(key,value){
	var aspectRatio = value;
	var diff = Math.abs(aspectRatio - photoRatio);
	if (bestDiff === false || diff < bestDiff){
	bestDiff = diff;
	bestKey = key;
}
}
);
	scores[bestKey] = (scores[bestKey] || 0) + 1;
}
var winnerKey;
	var winnerScore = false;
	$.each(scores,function(key,value){
	if (winnerScore === false || value > winnerScore){
	winnerScore = value;
	winnerKey = key;
}
}
);
	return ASPECT_RATIOS[winnerKey];
	// TODO:Revisit this// if (!photos.length){
	//return 16/9;
	//}
// var maxRatio = -1;
	// for (var i = 0;
	i < photos.length;
	i++){
	//// add plus one to height to account for rounding errors on the server//var photoRatio = photos[i].width / (1 + parseInt(photos[i].height));
	//if (photoRatio > maxRatio){
	//maxRatio = photoRatio;
	//}
//}
// return maxRatio;
}
else if ($.isNumeric(options.aspectRatio)){
	return Number(options.aspectRatio);
}
else{
	return ASPECT_RATIOS[options.aspectRatio];
}
}
function calcThumbnailDims(){
	thumbnailWidth = 0;
	thumbnailHeight = 0;
	if (linkContainer){
	var thumbnails = linkContainer.find('a.wslide-link-thumbnail').first();
	if (thumbnails.length){
	var inner = thumbnails.children().first();
	thumbnailWidth = inner.outerWidth();
	thumbnailHeight = inner.outerHeight();
}
}
}
function sizeThumbnail(img,photo){
	var naturalWidth = parseInt(photo.width);
	var naturalHeight = parseInt(photo.height);
	var sx = thumbnailWidth / naturalWidth;
	var sy = thumbnailHeight / naturalHeight;
	var s = Math.max(sx,sy);
	var w = Math.ceil(naturalWidth * s);
	var h = Math.ceil(naturalHeight * s);
	img.attr('width',w);
	img.attr('height',h);
	img.css('top',-Math.round(h/2) + 'px');
	img.css('left',-Math.round(w/2) + 'px');
}
function sizeImage(i){
	var slideElement = slides[i];
	var captionElement = slideElement.find('.wslide-caption');
	var imgWrap = slideImgWraps[i];
	var img = slideImgs[i];
	var scale;
	if (options.fillDimensions){
	scale = Math.max(contentWidth / slideImgWidths[i],contentHeight / slideImgHeights[i]);
}
else{
	scale = Math.min(contentWidth / slideImgWidths[i],contentHeight / slideImgHeights[i],1);
}
var h,w;
	w = Math.ceil(slideImgWidths[i] * scale);
	h = Math.ceil(slideImgHeights[i] * scale);
	if (w+1 <= slideImgWidths[i]){
	w++;
	h++;
}
img.width(w);
	imgWrap.css('width',w);
	imgWrap.css('left',-Math.round(w / 2));
	imgWrap.css('top',-Math.ceil(h / 2));
	if (captionElement.length && options.fillDimensions){
	// options.fillDimensions is a stand-in for "is this a header slideshow?"var captionHeight;
	if (slideElement.is(':hidden')){
	slideElement.show();
	captionHeight = captionElement.outerHeight();
	slideElement.hide();
}
else{
	captionHeight = captionElement.outerHeight();
}
var captionMeasurement = contentHeight * .25 - captionHeight / 2;
	var minHeight = .13 * contentHeight;
	captionMeasurement = Math.max(minHeight,captionMeasurement);
	captionElement.css('bottom',captionMeasurement);
}
captionElement.show();
}
var indentLeft = 0;
	var indentRight = 0;
	var indentTop = 0;
	var indentBottom = 0;
	function sizeOverlays(i){
	var slide = slides[i];
	var slideOffset = slide.offset();
	var slideWidth = slide.outerWidth();
	var slideHeight = slide.outerHeight();
	var img = slideImgs[i];
	var imgOffset = img.offset();
	var imgWidth = img.outerWidth();
	var imgHeight = img.outerHeight();
	indentLeft = Math.max(0,imgOffset.left - slideOffset.left);
	indentRight = Math.max(0,(slideOffset.left + slideWidth) - (imgOffset.left + imgWidth));
	indentTop = Math.max(0,imgOffset.top - slideOffset.top);
	// TODO:won't work very well with fillDimensionsif (photos[i].caption && options.captionLocation == 'top'){
	indentTop += slides[i].find('div.wslide-caption').outerHeight();
}
indentBottom = Math.max(0,(slideOffset.top + slideHeight) - (imgOffset.top + imgHeight));
	// TODO:won't work very well with fillDimensions}
/* slide transition-----------------------------------------------------------------------------------*/
function _go(newIndex){
	var needSizeOverlays = false;
	var oldIndex = slideIndex;
	slideIndex = newIndex;
	if (slides[newIndex]){
	if (slideImgWidths[newIndex] && slideImgHeights[newIndex]){
	// is loaded?sizeContentArea();
	sizeImage(newIndex);
	needSizeOverlays = true;
	if (playing){
	timedNext();
}
}
}
if (links){
	if (oldIndex !== undefined){
	links[oldIndex].removeClass('wslide-link-active');
}
links[newIndex].addClass('wslide-link-active');
	if (playing){
	element.find('.wslide-link-thumbnail img').css({
	opacity:.5}
);
	element.find('.wslide-thumbnail-links .wslide-link-active img').css({
	opacity:1}
);
}
}
if (dotContainer){
	dotContainer.find('.wslide-dot').removeClass('wslide-dot-current').eq(newIndex).addClass('wslide-dot-current');
}
updatePlayPauseButtons();
	return needSizeOverlays;
}
function go(newIndex,forceDirection,noTransition){
	// forceDirection = 1 (forward) or -1 (backward)if (!photos.length || isAnimating){
	return;
}
newIndex = Math.min(photos.length-1,Math.max(0,newIndex));
	var needsPreload = preloadSlides(newIndex,newIndex);
	if (needsPreload){
	return;
}
if (newIndex != slideIndex){
	var oldIndex = slideIndex;
	var needSizeOverlays = _go(newIndex);
	var sign = forceDirection;
	if (!sign){
	sign = newIndex > oldIndex ? 1:-1;
}
if (noTransition || oldIndex === undefined){
	if (oldIndex !== undefined){
	slides[oldIndex].hide();
}
slides[newIndex].show();
	if (needSizeOverlays){
	sizeOverlays(newIndex);
}
}
else if (options.transition == 'mosaic'){
	//box invar reverse = (sign < 0);
	createBoxes(newIndex);
	var $boxes = $('.wslide-box',slideContainer);
	var finished = 0;
	var timeBuff = (reverse) ? (colCount - 1) * 150:0;
	fadeCaptions(newIndex,oldIndex);
	isAnimating = true;
	$boxes.each(function(index){
	var box = $(this);
	setTimeout(function(){
	box.animate({
	opacity:'1.0'}
,500,function(){
	finished++;
	if (finished == $boxes.length){
	slides[oldIndex].hide();
	isAnimating = false;
	slides[newIndex].find('img').show();
	// Mobile Safari will flicker when trying to remove// hardware accelerated dom elements at the same time as regular// dom elementssetTimeout(function(){
	$boxes.remove();
}
,50);
}
}
);
}
,(timeBuff));
	if ( (index + 1) % colCount == 0){
	// new columntimeBuff = (index + 1) / colCount * 75;
	if (reverse){
	timeBuff += (colCount - 1) * 150;
}
}
else{
	timeBuff = (reverse) ? timeBuff - 150:timeBuff + 150;
}
}
);
}
else if (options.transition == 'slice'){
	//slice infadeCaptions(newIndex,oldIndex);
	animateSlices(newIndex,oldIndex,(sign < 0),false);
}
else if (options.transition == 'fold'){
	// foldfadeCaptions(newIndex,oldIndex);
	animateSlices(newIndex,oldIndex,(sign < 0),true);
}
else if (options.transition == 'slide' || options.slide){
	//slide invar newSlide = slides[newIndex];
	var oldSlide = slides[oldIndex];
	newSlide.css({
	left:sign * contentWidth + 'px'}
).show();
	isAnimating = true;
	slideContainer.css({
	left:0}
).animate({
	left:-sign * contentWidth + 'px'}
,{
	duration:500,complete:function(){
	if (needSizeOverlays){
	sizeOverlays(newIndex);
}
oldSlide.hide();
	slideContainer.css({
	left:0}
);
	newSlide.css({
	left:0}
);
	isAnimating = false;
}
}
);
}
else{
	// IE8 and below has a bug if we change opacity of entire slide.// so,let's just fade the image + caption individuallyvar oldOpacityElements = slides[oldIndex].find('.wslide-slide-inner2').add(slides[oldIndex].find('.wslide-caption'));
	var newOpacityElements = slides[newIndex].find('.wslide-slide-inner2').add(slides[newIndex].find('.wslide-caption'));
	var opacityComplete = function(){
	if (needSizeOverlays){
	sizeOverlays(newIndex);
}
slides[oldIndex].hide();
	isAnimating = false;
}
;
	slides[newIndex].show();
	isAnimating = true;
	var opacity = .99;
	if (isIElt9){
	opacity = 1;
}
oldOpacityElements.css({
	opacity:opacity}
).animate({
	opacity:0}
,{
	duration:500,complete:opacityComplete}
);
	newOpacityElements.css({
	opacity:0}
).animate({
	opacity:opacity}
,{
	duration:500,complete:opacityComplete}
);
}
}
trigger('slideChange',newIndex);
}
;
	var fadeCaptions = function(newIndex,oldIndex){
	var $captionNew = slides[newIndex].find('.wslide-caption');
	var $captionOld = slides[oldIndex].find('.wslide-caption');
	var opacity = .99;
	if (isIElt9){
	opacity = 1;
}
$captionOld.css({
	'z-index':3,opacity:opacity}
).animate({
	opacity:0}
,{
	duration:1000}
);
	$captionNew.css({
	'z-index':3,opacity:0}
).animate({
	opacity:opacity}
,{
	duration:1000}
);
}
;
	var animateSlices = function(newIndex,oldIndex,reverse,growWidth){
	createSlices(newIndex);
	var timeBuff = 0;
	var $slices = $('.wslide-slice',slideContainer);
	if (reverse){
	if (Array.prototype._reverse){
	Array.prototype._reverse.call($slices);
}
else{
	Array.prototype.reverse.call($slices);
}
}
var finished = 0;
	isAnimating = true;
	$slices.each(function(){
	var $slice = $(this);
	var toCSS ={
	opacity:'1.0'}
;
	if (growWidth){
	var origWidth = $slice.width();
	$slice.css({
	width:'0px'}
);
	toCSS.width = origWidth;
}
setTimeout(function(){
	$slice.animate(toCSS,500,function(){
	finished++;
	if (finished == $slices.length){
	slides[oldIndex].hide();
	isAnimating = false;
	slides[newIndex].find('img').css('visibility','visible');
	setTimeout(function(){
	$slices.remove();
}
,50);
}
}
);
}
,(timeBuff));
	timeBuff += 65;
}
);
}
;
	// Heavily modified from Nivo Slider// Copyright 2012,Dev7studios// Add slices for slice animationsvar createSlices = function(newIndex,alignRight){
	var $newSlide = slides[newIndex];
	var $currentImage = $newSlide.find('img');
	var currentImageSrc = $currentImage.attr('src');
	var $imageWrap = $currentImage.up('.wslide-slide-inner2');
	$newSlide.show();
	var sliceHeight = $currentImage.height();
	var sliceWidth = Math.round($imageWrap.width() / sliceCount);
	$currentImage.css('visibility','hidden');
	for (var i = 0;
	i < sliceCount;
	i++){
	var $img = $('<img>').attr({
	src:currentImageSrc}
).css({
	position:'absolute',width:$imageWrap.width() + 'px',height:'auto',display:'block !important',top:0}
);
	var $sliceHTML = $('<div class="wslide-slice"></div>');
	$sliceHTML.css({
	position:'absolute',height:sliceHeight + 'px',opacity:'0',overflow:'hidden','z-index':'2','-webkit-backface-visibility':'hidden'}
);
	// alignright is really buggy in chrome right now so animations will// have to grow from the left at the momentif (alignRight){
	$img.css({
	left:-((sliceCount - i - 1) * sliceWidth) + 'px'}
);
	$sliceHTML.css({
	right:(sliceWidth * i) + 'px'}
);
}
else{
	$img.css({
	left:(-i * sliceWidth) + 'px'}
);
	$sliceHTML.css({
	left:(sliceWidth * i) + 'px'}
);
}
if (i === sliceCount - 1){
	$sliceHTML.css({
	width:($imageWrap.width() - (sliceWidth * i)) + 'px'}
);
}
else{
	$sliceHTML.css({
	width:sliceWidth + 'px'}
);
}
$sliceHTML.append($img);
	$imageWrap.append($sliceHTML);
}
}
;
	var createBoxes = function(newIndex){
	var $newSlide = slides[newIndex];
	var $currentImage = $newSlide.find('img');
	var currentImageSrc = $currentImage.attr('src');
	//var $imageWrap = $currentImage.up('.wslide-slide-inner2');
	var $imageWrap = $currentImage.up('.wslide-slide');
	$newSlide.show();
	var boxWidth = Math.round($imageWrap.width() / colCount);
	var boxHeight = Math.round($imageWrap.height() / rowCount);
	var offsetLeft = Math.floor($currentImage.offset().left - $imageWrap.offset().left);
	var offsetTop = Math.ceil($currentImage.offset().top - $imageWrap.offset().top);
	$currentImage.hide();
	for (var rows = 0;
	rows < rowCount;
	rows++){
	for (var cols = 0;
	cols < colCount;
	cols++){
	var $img = $('<img>').attr({
	src:currentImageSrc}
).css({
	position:'absolute',width:$currentImage.width() + 'px',height:'auto',display:'block !important',top:-(boxHeight * rows) + offsetTop + 'px',left:-(boxWidth * cols) + offsetLeft + 'px'}
);
	var $boxHTML = $('<div class="wslide-box"></div>').append($img);
	$boxHTML.css({
	position:'absolute',opacity:0,left:(boxWidth * cols) + 'px',top:(boxHeight * rows) + 'px',overflow:'hidden','z-index':'2','-webkit-backface-visibility':'hidden'}
);
	if (cols === colCount - 1){
	$boxHTML.css({
	width:($imageWrap.width() - (boxWidth * cols)) + 'px'}
);
}
else{
	$boxHTML.css({
	width:boxWidth + 'px'}
);
}
if (rows === rowCount - 1){
	$boxHTML.css({
	height:($imageWrap.height() - (boxHeight * rows)) + 'px'}
);
}
else{
	$boxHTML.css({
	height:boxHeight + 'px'}
);
}
$imageWrap.append($boxHTML);
}
}
}
;
	function preloadSlides(startingAt,navigateTo){
	var needsPreload = false;
	for (var i=startingAt;
	i<=startingAt+PRELOAD && i<photos.length;
	i++){
	if (i>=0 && !slides[i]){
	addSlide(photos[i],i,i === navigateTo);
	// populates slides[i]needsPreload = (startingAt === i) ? true:false;
}
}
return needsPreload;
}
/*navigation methods-----------------------------------------------------------------------*/
function prev(){
	var i = (slideIndex - 1 + photos.length) % photos.length;
	if (i >= 0){
	go(i,-1);
	putLinkInView(i,false);
}
}
function next(){
	var i = (slideIndex + 1) % photos.length;
	go(i,1);
	putLinkInView(i,true);
}
function timedNext(){
	playTimeoutID = setTimeout(function(){
	if (!isDead()){
	next();
}
}
,options.speed * 1000);
}
/* link mouseover sliding--------------------------------------------------------------------------*/
function linkContainerMouseover(ev){
	isMouseOverLinks = true;
	linkHoverID++;
	if (horizontalLinks){
	linkContainerX = linkContainer.offset().left;
}
else{
	linkContainerY = linkContainer.offset().top;
}
}
function linkContainerMousemove(ev){
	if (horizontalLinks && linkContainerInnerWidth < linkContainerWidth ||!horizontalLinks && linkContainerInnerHeight < linkContainerHeight){
	return;
}
var n;
	if (horizontalLinks){
	n = (ev.pageX - linkContainerX) / linkContainerWidth;
}
else{
	n = (ev.pageY - linkContainerY) / linkContainerHeight;
}
var v;
	if (n < LINK_MOVE_EDGES){
	v = (1 - (n / LINK_MOVE_EDGES)) * LINK_MAX_VELOCITY_SQRT;
	v *= v;
}
else if (n > (1-LINK_MOVE_EDGES)){
	v = ((n - (1-LINK_MOVE_EDGES)) / LINK_MOVE_EDGES) * LINK_MAX_VELOCITY_SQRT;
	v *= -v;
}
else{
	v = 0;
}
v = Math.round(v);
	if (linkTargetVelocity != v){
	linkTargetVelocity = v;
	if (!linkIntervalID){
	linkIntervalID = setInterval(linkMove,35);
}
}
}
function linkMove(){
	if (linkVelocity < linkTargetVelocity){
	linkVelocity += LINK_ACCELERATION;
}
else if (linkVelocity > linkTargetVelocity){
	linkVelocity -= LINK_ACCELERATION;
}
if (!linkVelocity && !linkTargetVelocity){
	clearInterval(linkIntervalID);
	linkIntervalID = null;
}
else{
	if (horizontalLinks){
	linkX = Math.min(linkMax,Math.max(linkMin,linkX + linkVelocity));
	linkContainerInner.css('left',linkX);
}
else{
	linkY = Math.min(linkMax,Math.max(linkMin,linkY + linkVelocity));
	linkContainerInner.css('top',linkY);
}
}
}
function linkContainerMouseout(ev){
	var savedID = ++linkHoverID;
	setTimeout(function(){
	if (savedID == linkHoverID){
	linkTargetVelocity = 0;
	isMouseOverLinks = false;
}
}
,10);
}
/* putting links in view---------------------------------------------------------------------------*/
function putLinkInView(i,toFront){
	if (links && !isMouseOverLinks){
	var link = links[i];
	if (horizontalLinks){
	var localLeft = link.position().left;
	var left = localLeft + linkContainerInner.position().left;
	var width = link.outerWidth();
	if (left < 0 || left + width > linkContainerWidth){
	if (toFront){
	tweenLinkX(-localLeft);
}
else{
	tweenLinkX(-(localLeft + width - linkContainerWidth));
}
}
}
else{
	var localTop = link.position().top;
	var top = localTop + linkContainerInner.position().top;
	var height = link.outerHeight();
	if (top < 0 || top + height > linkContainerHeight){
	if (toFront){
	tweenLinkY(-localTop);
}
else{
	tweenLinkY(-(localTop + height - linkContainerHeight));
}
}
}
}
}
function tweenLinkX(newX){
	newX = Math.min(linkMax,Math.max(linkMin,newX));
	linkContainerInner.animate({
	left:newX}
,500);
}
function tweenLinkY(newY){
	newY = Math.min(linkMax,Math.max(linkMin,newY));
	linkContainerInner.animate({
	top:newY}
,500);
}
function isDead(){
	if (!element.parents('body').length){
	// element is gone now (might have switched to a different page in editor)_destroy();
	return true;
}
return false;
}
/* playing / pausing-------------------------------------------------------------------------*/
function play(immediate){
	if (photos.length > 1 && !playing){
	playing = true;
	updatePlayPauseButtons();
	if (slideImgWidths[slideIndex] && slideImgHeights[slideIndex]){
	// current slide already loadedif (immediate){
	next()}
else{
	timedNext();
}
}
trigger('play');
}
}
function pause(){
	if (playing){
	element.find('.wslide-link-thumbnail img').css({
	opacity:1}
);
	playing = false;
	updatePlayPauseButtons();
	clearTimeout(playTimeoutID);
	playTimeoutID = null;
	playPauseID++;
	trigger('pause');
}
}
function updatePlayPauseButtons(){
	if (photos.length > 1 && options.showPlayButton !== false){
	if (playing){
	playButton.css('opacity',0).hide();
	pauseButton.css('opacity',1).show();
}
else{
	playButton.css('opacity',1).show();
	pauseButton.css('opacity',0).hide();
}
}
}
/* control fading---------------------------------------------------------------------------*/
function showControls(skipIndent){
	stopFadeControls();
	if (!skipIndent){
	indentControls();
}
allOverlays.show().css('opacity',1);
	controlsVisible = true;
}
function indentControls(){
	overlayTopLeft.css('padding-top',indentTop);
	overlayTopLeft.css('padding-left',indentLeft);
	overlayTopRight.css('padding-top',indentTop);
	overlayTopRight.css('padding-right',indentRight);
	overlayLeft.css('padding-left',indentLeft);
	overlayRight.css('padding-right',indentRight);
}
function hideControls(){
	stopFadeControls();
	allOverlays.hide();
	controlsVisible = false;
}
function fadeControls(){
	if (controlsVisible){
	controlsVisible = false;
	allOverlays.animate({
	opacity:0}
,{
	duration:1000,complete:function(){
	hideControls();
}
}
);
}
}
function stopFadeControls(){
	allOverlays.stop(true);
	// true = clear queue}
/* Touchscreen Swiping-----------------------------------------------------------------------------*/
var IS_DEBUGGING = true;
	var TOUCHSTART = IS_DEBUGGING ? 'mousedown':'touchstart';
	var TOUCHMOVE = IS_DEBUGGING ? 'mousemove':'touchmove';
	var TOUCHEND = IS_DEBUGGING ? 'mouseup':'touchend';
	var TOUCHCANCEL = IS_DEBUGGING ? 'xxx':'touchcancel';
	// fuck:http://code.google.com/p/android/issues/detail?id=19827function initLinkSwiping(elm){
	function touchstart(ev){
	pause();
	if (linkIntervalID){
	clearInterval(linkIntervalID);
	linkIntervalID = null;
	linkVelocity = 0;
}
var origCoord = getCoord(ev);
	var origLinkX = linkX;
	var origLinkY = linkY;
	var delta;
	var p0 = null;
	var p1 = null;
	var simulateClick = true;
	function touchmove(ev){
	var coord = getCoord(ev);
	p0 = p1;
	p1 = coord;
	delta = coord - origCoord;
	if (Math.abs(delta) > 15){
	simulateClick = false;
}
if (horizontalLinks){
	linkX = origLinkX + delta;
	linkX = Math.max(linkMin,linkX);
	linkX = Math.min(linkMax,linkX);
	linkContainerInner.css('left',linkX);
}
else{
	linkY = origLinkY + delta;
	linkY = Math.max(linkMin,linkY);
	linkY = Math.min(linkMax,linkY);
	linkContainerInner.css('top',linkY);
}
}
function touchend(ev){
	if (simulateClick && elm.is('a')){
	// make photoswipe show upwindow.Code.Util.Events.fire(elm[0],'click');
}
if (p1 === null || p0 === null){
	linkVelocity = 0;
}
else{
	linkVelocity = p1 - p0;
	linkVelocity = Math.max(-15,linkVelocity);
	linkVelocity = Math.min(15,linkVelocity);
}
linkTargetVelocity = 0;
	if (!linkIntervalID){
	linkIntervalID = setInterval(linkMove,35);
}
$(document).off(TOUCHMOVE,touchmove).off(TOUCHEND,touchend).off(TOUCHCANCEL,touchend);
}
$(document).off(TOUCHMOVE,touchmove).off(TOUCHEND,touchend).off(TOUCHCANCEL,touchend);
	return false;
}
elm.on(TOUCHSTART,touchstart);
}
function getCoord(ev){
	if (horizontalLinks){
	return touchCoordObj(ev).pageX;
}
else{
	return touchCoordObj(ev).pageY;
}
}
function touchCoordObj(ev){
	if (IS_DEBUGGING){
	return ev;
}
return ev.touches[0];
}
/* rudimentary event triggering system,for public use------------------------------------------------------------*/
var handlersByName ={
}
;
	function on(name,handler){
	var handlers = handlersByName[name] || [];
	handlers.push(handler);
	handlersByName[name] = handlers;
}
function trigger(name){
	var slideshow = this;
	var args = Array.prototype.slice.call(arguments,1);
	$.each(handlersByName[name] || [],function(i,handler){
	handler.apply(slideshow,args);
}
);
}
function getHandlers(){
	return handlersByName;
}
function setHandlers(_handlersByName){
	handlersByName = _handlersByName;
}
function clearHandlers(){
	handlersByName ={
}
;
}
/* window resizing--------------------------------------------------------------*/
var windowResizeID = 0;
	function windowResize(){
	var savedID = ++windowResizeID;
	setTimeout(function(){
	if (savedID == windowResizeID){
	if (!isDead()){
	updateSize();
}
}
}
,500);
}
}
function thumbnailURL(photo){
	var url = photo.url;
	// if (!url.match("/weebly/images/")){
	// url = '/uploads/' + url.replace(/^\/uploads\//,'');
	//}
return url;
}
function largeURL(photo){
	var url = photo.url;
	// if (!url.match("/weebly/images/")){
	// url = '/uploads/' + url.replace(/^\/uploads\//,'');
	// if (photo.thumbnail !== false){
	// url = url.replace(/^(.*)\.([^\.]+)$/,"$1_orig.$2");
	//}
//}
return url;
}
function loadImage(imgNode,src,onload){
	var intervalID = null;
	var called = false;
	function done(){
	if (intervalID){
	clearInterval(intervalID);
	intervalID = null;
}
if (!called){
	called = true;
	onload();
}
}
;
	imgNode.onload = done;
	imgNode.src = src;
	if (imgNode.complete){
	done();
}
else{
	intervalID = setInterval(function(){
	if (imgNode.complete){
	done();
}
}
,500);
}
}
}
)(Weebly,Weebly.jQuery);

CSS代码(slideshow.css):

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div.paragraph,blockquote,fieldset,input{margin:0;padding:0;}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0;}
a img{border:0;}
a{text-decoration:none;}
body{font-family:'Open Sans',sans-serif;font-size:14px;background:#fff;color:#555;line-height:24px;}
.container{margin:0 auto;width:960px;}
#header-wrap,#banner-wrap,#nav-wrap,#main-wrap,#footer-wrap{width:100%;}
#main-wrap .container{min-height:450px;}
h3{font-size:22px;padding:.2em 0 .2em 0;line-height:1.2;font-weight:normal;letter-spacing:-1px;color:#333;margin-bottom:20px;}
a{color:#0370EA;}
a:hover{color:#0052ad;}
hr{background:#ddd !important;}
h2{font-size:22px;padding:.8em 0 .2em 0;line-height:1.2;font-weight:normal;letter-spacing:-1px;color:#333;margin-bottom:20px;}
div.paragraph{color:#777;font:13px/22px 'Open Sans',arial,sans-serif;font-weight:400;}
p{color:#777;font:13px/22px 'Open Sans',arial,sans-serif;font-weight:400;}
.wslide{font-family:arial;font-size:13px;color:#fff;cursor:default;}
.wslide-main{position:relative;z-index:2;width:100%;}
.wslide-link-cell{width:1px;}
.wslide table{border-collapse:collapse;border-spacing:0;}
.wslide td{padding:0 !important;vertical-align:top;}
.wslide-button{position:relative;display:inline-block;height:25px;overflow:hidden;cursor:pointer;}
.wslide-button-inner{position:relative;z-index:2;float:left;padding:0 14px !important;height:25px;line-height:25px;color:#fff;font-weight:bold;white-space:nowrap;}
.wslide-button-icon{display:inline-block;height:25px;vertical-align:top;*vertical-align:middle;}
.wslide-button-bg{position:absolute;z-index:1;top:0;left:0;display:block;width:100%;height:25px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#333;opacity:.8;filter:alpha(opacity=80);}
.wslide-play .wslide-button-icon{width:5px;background:url(../images/control_icons.gif) no-repeat -14px 50%;margin-left:2px;}
.wslide-pause .wslide-button-icon{width:6px;background:url(../images/control_icons.gif) no-repeat -19px 50%;margin-left:2px;}
.wslide-prev .wslide-button-icon{width:7px;background:url(../images/control_icons.gif) no-repeat 0 50%;}
.wslide-next .wslide-button-icon{width:7px;background:url(../images/control_icons.gif) no-repeat -7px 50%;}
.wslide-content{position:relative;overflow:hidden;}
.wslide-content-inner{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.wslide-overlay-top-left{position:absolute;z-index:2;top:10px;left:10px;}
.wslide-overlay-top-right{position:absolute;z-index:2;top:10px;right:10px;}
.wslide-overlay-left{position:absolute;z-index:2;top:50%;left:10px;}
.wslide-overlay-right{position:absolute;z-index:2;top:50%;right:10px;}
.wslide-overlay-left .wslide-button,.wslide-overlay-right .wslide-button{position:relative;top:-13px;}
/* header-slideshow prev/next styling */
.wsite-header .wslide-overlay-left,.wsite-header .wslide-overlay-right{position:absolute;width:100px;}
.wsite-header .wslide-overlay-left{top:0;left:0;bottom:0;}
.wsite-header .wslide-overlay-right{top:0;right:0;bottom:0;}
.wsite-header .wslide-prev,.wsite-header .wslide-next{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;}
.wsite-header .wslide-prev .wslide-button-inner,.wsite-header .wslide-next .wslide-button-inner{position:absolute;top:50%;height:auto;line-height:100%;padding:0 !important;}
.wsite-header .wslide-prev .wslide-button-inner{left:10px;}
.wsite-header .wslide-next .wslide-button-inner{right:10px;}
.wsite-header .wslide-prev .wslide-button-icon,.wsite-header .wslide-next .wslide-button-icon{position:relative;top:-20px;width:40px;height:40px;background:url(header_slideshow_sprites.png) no-repeat;}
.wsite-header .wslide-prev .wslide-button-icon{background-position:0 0;}
.wsite-header .wslide-prev:hover .wslide-button-icon{background-position:-40px 0;}
.wsite-header .wslide-next .wslide-button-icon{background-position:-120px 0;}
.wsite-header .wslide-next:hover .wslide-button-icon{background-position:-80px 0;}
.wsite-header .wslide-prev .wslide-button-bg,.wsite-header .wslide-next .wslide-button-bg{display:none;}
.wslide-slides{position:absolute;top:0;left:0;width:100%;height:100%;}
.wslide-slide{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.wslide-slide-loading{background:url(loading.gif) no-repeat 50% 50%;}
.wslide-slide-inner1{position:absolute;top:50%;left:50%;}
.wslide-slide-inner2{position:absolute;}
html body .wslide-slide a,html body #secondlist .wslide-slide a,html body #wsite-content .wslide-slide a{/* do #wsite-content to overpower design options color */
color:#fff !important;font-weight:normal !important;text-decoration:none !important;cursor:pointer !important;}
html body .wslide-slide a:hover,html body #secondlist .wslide-slide a:hover,html body #wsite-content .wslide-slide a:hover{/* do #wsite-content to overpower design options color */
color:#fff !important;font-weight:normal !important;text-decoration:underline !important;}
.wslide-slide-inner2 img{float:left;}
.wslide-caption{position:absolute;z-index:1;left:0;width:100%;overflow:hidden;_background:#333;/* bg wasn't working in IE6 */
}
.wslide-caption-top{top:0;}
.wslide-caption-bottom{bottom:0;}
.wslide-caption-text{position:relative;z-index:2;padding:.7em 1em !important;line-height:1.6em;text-align:left;text-shadow:0 0 5px #000;}
.wslide-caption-bg{_display:none;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;filter:alpha(opacity=50);}
/* header slideshow caption */
.wsite-header .wslide-caption{width:auto;min-width:25%;max-width:75%;}
.wsite-header .wslide-caption-text{font-size:25px;}
.wslide-links{position:relative;overflow:hidden;width:100%;height:100%;}
.wslide-links-top .wslide-link{margin:0 5px 5px 0 !important;}
.wslide-links-bottom .wslide-link{margin:5px 5px 0 0 !important;}
.wslide-links-left .wslide-link{margin:0 5px 5px 0 !important;}
.wslide-links-right .wslide-link{margin:0 0 5px 5px !important;}
.wslide-links-top table,.wslide-links-bottom table{margin-right:-5px;}
.wslide-links-left table,.wslide-links-right table{margin-bottom:-5px;}
.wslide-links-inner{position:absolute;top:0;left:0;}
.wslide-link{position:relative;display:block;cursor:pointer;}
.wslide-link-thumbnail .wslide-link-inner1{position:relative;width:70px;height:70px;overflow:hidden;}
.wslide-link-thumbnail .wslide-link-inner2{position:absolute;top:50%;left:50%;}
.wslide-link-thumbnail img{position:absolute;}
.wslide-playing .wslide-link-thumbnail img{opacity:.5;filter:alpha(opacity=50);}
.wslide-playing .wslide-thumbnail-links .wslide-link-active img{opacity:1;filter:none;}
.wslide-link-number{border:0;padding:0 .6em !important;height:2em;line-height:2em;background:#333;color:#ddd !important;opacity:.7;filter:alpha(opacity=70);text-align:center;text-decoration:none !important;}
.wslide-number-links .wslide-link-active,.wslide-number-links a:hover{color:#fff !important;opacity:1;filter:none;}
.wslide-dots{position:absolute;z-index:3;}
.wslide-dot{float:left;width:15px;height:15px;background:url(header_slideshow_sprites.png) no-repeat 0 -40px;cursor:pointer;margin:0 3px;}
.wslide-dot-current{background-position:-15px -40px;}
.wsite-mobile .wslide-dot{float:left;width:7px;height:8px;background:url(header_slideshow_sprites1x.png) no-repeat 0 -20px;cursor:pointer;margin:0 3px;}
.wsite-mobile .wsite-header .wslide-prev .wslide-button-icon,.wsite-mobile .wsite-header .wslide-next .wslide-button-icon{position:relative;top:-10px;width:20px;height:20px;background:url(header_slideshow_sprites1x.png) no-repeat;}
/* image retina display */
@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min--moz-device-pixel-ratio:2){.wsite-mobile .wslide-dot{background:url(header_slideshow_sprites.png) no-repeat 0 -20px;background-size:76px 28px;}
.wsite-mobile .wsite-header .wslide-prev .wslide-button-icon,.wsite-mobile .wsite-header .wslide-next .wslide-button-icon{background:url(header_slideshow_sprites.png) no-repeat;background-size:76px 28px;}
}
.wsite-mobile .wslide-dot-current{background-position:-7px -20px;}
.wsite-mobile .wsite-header .wslide-prev .wslide-button-icon{background-position:0 0;}
.wsite-mobile .wsite-header .wslide-prev:hover .wslide-button-icon{background-position:-20px 0;}
.wsite-mobile .wsite-header .wslide-next .wslide-button-icon{background-position:-60px 0;}
.wsite-mobile .wsite-header .wslide-next:hover .wslide-button-icon{background-position:-40px 0;}

附件:下载该文件资源,减少时间成本(增值服务)