/**
* pgwslideshow - version 2.0
*
* copyright 2014, jonathan m. piat
* http://pgwjs.com - http://pagawa.com
*
* released under the gnu gplv3 license - http://opensource.org/licenses/gpl-3.0
*/
;
(function ($) {
$.fn.pgwslideshow = function (options) {
var defaults = {
mainclassname: 'pgwslideshow',
transitioneffect: 'sliding',
displaylist: true,
displaycontrols: true,
touchcontrols: true,
autoslide: false,
beforeslide: false,
afterslide: false,
maxheight: null,
adaptiveduration: 200,
transitionduration: 500,
intervalduration: 3000
};
if (this.length == 0) {
return this;
} else if (this.length > 1) {
this.each(function () {
$(this).pgwslideshow(options);
});
return this;
}
var pgwslideshow = this;
pgwslideshow.plugin = this;
pgwslideshow.config = {};
pgwslideshow.data = [];
pgwslideshow.currentslide = 0;
pgwslideshow.slidecount = 0;
pgwslideshow.resizeevent = null;
pgwslideshow.intervalevent = null;
pgwslideshow.touchfirstposition = null;
pgwslideshow.touchlistlastposition = false;
pgwslideshow.window = $(window);
// init
var init = function () {
// merge user options with the default configuration
pgwslideshow.config = $.extend({}, defaults, options);
// setup
setup();
// check list
if (pgwslideshow.config.displaylist) {
checklist();
}
// resize trigger
pgwslideshow.window.resize(function () {
cleartimeout(pgwslideshow.resizeevent);
pgwslideshow.resizeevent = settimeout(function () {
setsizeclass();
var maxheight = pgwslideshow.plugin.find('.ps-current > ul > li.elt_' + pgwslideshow.currentslide + ' img').height();
updateheight(maxheight);
if (pgwslideshow.config.displaylist) {
checklist();
checkselecteditem();
}
}, 100);
});
// activate interval
if (pgwslideshow.config.autoslide) {
activateinterval();
}
return true;
};
// update the current height
var updateheight = function (height, animate) {
// check maxheight
if (pgwslideshow.config.maxheight) {
if (height + pgwslideshow.plugin.find('.ps-list').height() > pgwslideshow.config.maxheight) {
height = pgwslideshow.config.maxheight - pgwslideshow.plugin.find('.ps-list').height();
}
}
if (typeof pgwslideshow.plugin.find('.ps-current').animate == 'function') {
pgwslideshow.plugin.find('.ps-current').stop().animate({
height: height
}, pgwslideshow.config.adaptiveduration, function () {
if (pgwslideshow.config.maxheight) {
pgwslideshow.plugin.find('.ps-current > ul > li img').css('max-height', height + 'px');
}
});
} else {
pgwslideshow.plugin.find('.ps-current').css('height', height);
if (pgwslideshow.config.maxheight) {
pgwslideshow.plugin.find('.ps-current > ul > li img').css('max-height', height + 'px');
}
}
return true;
};
// set list width
var setlistwidth = function () {
var listwidth = 0;
// the plugin must be visible for a correct calculation
pgwslideshow.plugin.show();
pgwslideshow.plugin.find('.ps-list > ul > li').show().each(function () {
listwidth += $(this).width();
});
pgwslideshow.plugin.find('.ps-list > ul').width(listwidth);
return true;
}
// set size class
var setsizeclass = function () {
if (pgwslideshow.plugin.width() <= 480) {
pgwslideshow.plugin.addclass('narrow').removeclass('wide');
} else {
pgwslideshow.plugin.addclass('wide').removeclass('narrow');
}
return true;
};
// setup
var setup = function () {
// create container
pgwslideshow.plugin.removeclass('pgwslideshow').removeclass(pgwslideshow.config.mainclassname);
pgwslideshow.plugin.wrap('
');
pgwslideshow.plugin = pgwslideshow.plugin.parent();
pgwslideshow.plugin.wrap('');
pgwslideshow.plugin = pgwslideshow.plugin.parent();
pgwslideshow.plugin.prepend('');
pgwslideshow.slidecount = pgwslideshow.plugin.find('.ps-list > ul > li').length;
if (pgwslideshow.slidecount == 0) {
throw new error('pgwslideshow - no slider item has been found');
return false;
}
// prev / next icons
if (pgwslideshow.slidecount > 1) {
// slider controls
if (pgwslideshow.config.displaycontrols) {
pgwslideshow.plugin.find('.ps-current').prepend('');
pgwslideshow.plugin.find('.ps-current').append('');
pgwslideshow.plugin.find('.ps-current .ps-prev').click(function () {
pgwslideshow.previousslide();
});
pgwslideshow.plugin.find('.ps-current .ps-next').click(function () {
pgwslideshow.nextslide();
});
}
// touch controls for current image
if (pgwslideshow.config.touchcontrols) {
pgwslideshow.plugin.find('.ps-current').on('touchstart', function (e) {
try {
if (e.originalevent.touches[0].clientx && pgwslideshow.touchfirstposition == null) {
pgwslideshow.touchfirstposition = e.originalevent.touches[0].clientx;
}
} catch (e) {
pgwslideshow.touchfirstposition = null;
}
});
pgwslideshow.plugin.find('.ps-current').on('touchmove', function (e) {
try {
if (e.originalevent.touches[0].clientx && pgwslideshow.touchfirstposition != null) {
if (e.originalevent.touches[0].clientx > (pgwslideshow.touchfirstposition + 50)) {
pgwslideshow.touchfirstposition = null;
pgwslideshow.previousslide();
} else if (e.originalevent.touches[0].clientx < (pgwslideshow.touchfirstposition - 50)) {
pgwslideshow.touchfirstposition = null;
pgwslideshow.nextslide();
}
}
} catch (e) {
pgwslideshow.touchfirstposition = null;
}
});
pgwslideshow.plugin.find('.ps-current').on('touchend', function (e) {
pgwslideshow.touchfirstposition = null;
});
}
}
// get slideshow elements
var elementid = 1;
pgwslideshow.plugin.find('.ps-list > ul > li').each(function () {
var element = getelement($(this));
element.id = elementid;
pgwslideshow.data.push(element);
$(this).addclass('elt_' + element.id);
$(this).wrapinner('');
// set element in the current list
var currentelement = $('');
var picdescription = element.picdescription;
if (element.image) {
currentelement.html(''+ element.description);
} else if (element.thumbnail) {
currentelement.html('' + '' + picdescription + '
'+ element.description);
}
if (element.link) {
currentelement.html('' + currentelement.html() + '');
}
pgwslideshow.plugin.find('.ps-current > ul').append(currentelement);
$(this).css('cursor', 'pointer').click(function (event) {
event.preventdefault();
displayelement(element.id);
});
elementid++;
});
// set list elements
if (pgwslideshow.config.displaylist) {
setlistwidth();
pgwslideshow.plugin.find('.ps-list').prepend('');
pgwslideshow.plugin.find('.ps-list').append('');
pgwslideshow.plugin.find('.ps-list').show();
} else {
pgwslideshow.plugin.find('.ps-list').hide();
}
// attach slide events
if (pgwslideshow.config.autoslide) {
pgwslideshow.plugin.on('mouseenter', function () {
clearinterval(pgwslideshow.intervalevent);
pgwslideshow.intervalevent = null;
}).on('mouseleave', function () {
activateinterval();
});
}
// disable current elements
pgwslideshow.plugin.find('.ps-current > ul > li').hide();
// display the first element
displayelement(1);
// set the first height
pgwslideshow.plugin.find('.ps-current > ul > li.elt_1 img').on('load', function () {
setsizeclass();
var maxheight = pgwslideshow.plugin.find('.ps-current > ul > li.elt_1 img').height();
updateheight(maxheight);
});
// enable slideshow
setsizeclass();
pgwslideshow.plugin.show();
return true;
};
// get element
var getelement = function (obj) {
var element = {};
// get link
var elementlink = obj.find('a').attr('href');
if ((typeof elementlink != 'undefined') && (elementlink != '')) {
element.link = elementlink;
var elementlinktarget = obj.find('a').attr('target');
if ((typeof elementlinktarget != 'undefined') && (elementlinktarget != '')) {
element.linktarget = elementlinktarget;
}
}
// get image
var elementthumbnail = obj.find('img').attr('src');
if ((typeof elementthumbnail != 'undefined') && (elementthumbnail != '')) {
element.thumbnail = elementthumbnail;
}
var elementimage = obj.find('img').attr('data-large-src');
if ((typeof elementimage != 'undefined') && (elementimage != '')) {
element.image = elementimage;
}
// get title
var elementtitle = obj.find('img').attr('alt');
if ((typeof elementtitle != 'undefined') && (elementtitle != '')) {
element.title = elementtitle;
}
// get description
var elementdescription = obj.find('img').attr('data-description');
if ((typeof elementdescription != 'undefined') && (elementdescription != '')) {
element.description = elementdescription;
console.log(elementdescription);
}
// get description
var pictxtdescription = obj.find('img').attr('data-text');
if ((typeof pictxtdescription != 'undefined') && (pictxtdescription != '')) {
element.picdescription = pictxtdescription;
}
return element;
};
// finish element
var finishelement = function (element) {
// element caption
var elementtext = '';
if (element.title) {
elementtext += '' + element.title + '';
}
if (element.description) {
if (elementtext != '') elementtext += '
';
elementtext += element.description;
}
if (elementtext != '') {
if (element.link) {
elementtext = '' + elementtext + '';
}
if (typeof pgwslideshow.plugin.find('.ps-caption').fadein == 'function') {
pgwslideshow.plugin.find('.ps-caption').html(elementtext);
pgwslideshow.plugin.find('.ps-caption').fadein(pgwslideshow.config.transitionduration / 2);
} else {
pgwslideshow.plugin.find('.ps-caption').html(elementtext);
pgwslideshow.plugin.find('.ps-caption').show();
}
}
// update list items
pgwslideshow.plugin.find('.ps-list > ul > li .ps-item').removeclass('ps-selected');
pgwslideshow.plugin.find('.ps-list > ul > li.elt_' + element.id + ' .ps-item').addclass('ps-selected');
// check selected item
if (pgwslideshow.config.displaylist) {
checklist();
checkselecteditem();
}
// slideshow controls
if (pgwslideshow.config.displaycontrols) {
if (typeof pgwslideshow.plugin.find('.ps-current > .ps-prev').fadein == 'function') {
pgwslideshow.plugin.find('.ps-current > .ps-prev, .ps-current > .ps-next').fadein(pgwslideshow.config.transitionduration / 2);
} else {
pgwslideshow.plugin.find('.ps-current > .ps-prev, .ps-current > .ps-next').show();
}
}
// after slide
if (typeof pgwslideshow.config.afterslide == 'function') {
pgwslideshow.config.afterslide(element.id);
}
// set the container height
var maxheight = pgwslideshow.plugin.find('.ps-current .elt_' + element.id + ' img').height();
updateheight(maxheight, true);
return true;
}
// fade an element
var fadeelement = function (element) {
var elementcontainer = pgwslideshow.plugin.find('.ps-current > ul');
elementcontainer.find('li').not('.elt_' + pgwslideshow.currentslide).not('.elt_' + element.id).each(function () {
if (typeof $(this).stop == 'function') {
$(this).stop();
}
$(this).css('position', '').css('z-index', 1).hide();
});
// current element
if (pgwslideshow.currentslide > 0) {
var currentelement = elementcontainer.find('.elt_' + pgwslideshow.currentslide);
if (typeof currentelement.animate != 'function') {
currentelement.animate = function (css, duration, callback) {
currentelement.css(css);
if (callback) {
callback();
}
};
}
if (typeof currentelement.stop == 'function') {
currentelement.stop();
}
currentelement.css('position', 'absolute').animate({
opacity: 0,
}, pgwslideshow.config.transitionduration, function () {
currentelement.css('position', '').css('z-index', 1).hide();
});
}
// update current id
pgwslideshow.currentslide = element.id;
// next element
var nextelement = elementcontainer.find('.elt_' + element.id);
if (typeof nextelement.animate != 'function') {
nextelement.animate = function (css, duration, callback) {
nextelement.css(css);
if (callback) {
callback();
}
};
}
if (typeof nextelement.stop == 'function') {
nextelement.stop();
}
nextelement.css('position', 'absolute').show().animate({
opacity: 1,
}, pgwslideshow.config.transitionduration, function () {
nextelement.css('position', '').css('z-index', 2).css('display', 'block');
finishelement(element);
});
return true;
}
// slide an element
var slideelement = function (element, direction) {
var elementcontainer = pgwslideshow.plugin.find('.ps-current > ul');
if (typeof direction == 'undefined') {
direction = 'left';
}
if (pgwslideshow.currentslide == 0) {
elementcontainer.find('.elt_1').css({
position: '',
left: '',
opacity: 1,
'z-index': 2
}).show();
pgwslideshow.plugin.find('.ps-list > li.elt_1').css('opacity', '1');
finishelement(element);
} else {
if (pgwslideshow.transitioninprogress) {
return false;
}
pgwslideshow.transitioninprogress = true;
// get direction details
var elementwidth = elementcontainer.width();
if (direction == 'left') {
var elementdest = -elementwidth;
var nextorigin = elementwidth;
} else {
var elementdest = elementwidth;
var nextorigin = -elementwidth;
}
var currentelement = elementcontainer.find('.elt_' + pgwslideshow.currentslide);
if (typeof currentelement.animate != 'function') {
currentelement.animate = function (css, duration, callback) {
currentelement.css(css);
if (callback) {
callback();
}
};
}
currentelement.css('position', 'absolute').animate({
left: elementdest,
}, pgwslideshow.config.transitionduration, function () {
currentelement.css('position', '').css('z-index', 1).css('left', '').css('opacity', 0).hide();
});
// next element
var nextelement = elementcontainer.find('.elt_' + element.id);
if (typeof nextelement.animate != 'function') {
nextelement.animate = function (css, duration, callback) {
nextelement.css(css);
if (callback) {
callback();
}
};
}
nextelement.css('position', 'absolute').css('left', nextorigin).css('opacity', 1).show().animate({
left: 0,
}, pgwslideshow.config.transitionduration, function () {
nextelement.css('position', '').css('left', '').css('z-index', 2).show();
pgwslideshow.transitioninprogress = false;
finishelement(element);
});
}
// update current id
pgwslideshow.currentslide = element.id;
return true;
}
// display current element
var displayelement = function (elementid, apicontroller, direction) {
if (elementid == pgwslideshow.currentslide) {
return false;
}
var element = pgwslideshow.data[elementid - 1];
if (typeof element == 'undefined') {
throw new error('pgwslideshow - the element ' + elementid + ' is undefined');
return false;
}
if (typeof direction == 'undefined') {
direction = 'left';
}
// before slide
if (typeof pgwslideshow.config.beforeslide == 'function') {
pgwslideshow.config.beforeslide(elementid);
}
/* if (typeof pgwslideshow.plugin.find('.ps-caption').fadeout == 'function') {
pgwslideshow.plugin.find('.ps-caption, .ps-prev, .ps-next').fadeout(pgwslideshow.config.transitionduration / 2);
} else {
pgwslideshow.plugin.find('.ps-caption, .ps-prev, .ps-next').hide();
} */
// choose the transition effect
if (pgwslideshow.config.transitioneffect == 'sliding') {
slideelement(element, direction);
} else {
fadeelement(element);
}
// reset interval to avoid a half interval after an api control
if (typeof apicontroller != 'undefined' && pgwslideshow.config.autoslide) {
activateinterval();
}
return true;
};
// activate interval
var activateinterval = function () {
clearinterval(pgwslideshow.intervalevent);
if (pgwslideshow.slidecount > 1 && pgwslideshow.config.autoslide) {
pgwslideshow.intervalevent = setinterval(function () {
if (pgwslideshow.currentslide + 1 <= pgwslideshow.slidecount) {
var nextitem = pgwslideshow.currentslide + 1;
} else {
var nextitem = 1;
}
displayelement(nextitem);
}, pgwslideshow.config.intervalduration);
}
return true;
};
// check slide list
var checklist = function () {
if (!pgwslideshow.config.displaylist) return false;
// refresh list width
setlistwidth();
var containerobject = pgwslideshow.plugin.find('.ps-list');
var containerwidth = containerobject.width();
var listobject = pgwslideshow.plugin.find('.ps-list > ul');
var listwidth = listobject.width();
if (listwidth > containerwidth) {
listobject.css('margin', '0');
var marginleft = parseint(listobject.css('margin-left'));
var marginright = parseint(listobject.css('margin-right'));
containerwidth -= (marginleft + marginright);
// left button
containerobject.find('.ps-prev').show().unbind('click').click(function () {
var oldposition = parseint(listobject.css('left'));
var newposition = oldposition + containerwidth;
if (oldposition == 0) {
newposition = -(listwidth - containerwidth);
} else if (newposition > 0) {
newposition = 0;
}
if (typeof listobject.animate == 'function') {
listobject.animate({
left: newposition
}, pgwslideshow.config.transitionduration);
} else {
listobject.css('left', newposition);
}
});
// right button
containerobject.find('.ps-next').show().unbind('click').click(function () {
var oldposition = parseint(listobject.css('left'));
var newposition = oldposition - containerwidth;
var maxposition = -(listwidth - containerwidth);
if (oldposition == maxposition) {
newposition = 0;
} else if (newposition < maxposition) {
newposition = maxposition;
}
if (typeof listobject.animate == 'function') {
listobject.animate({
left: newposition
}, pgwslideshow.config.transitionduration);
} else {
listobject.css('left', newposition);
}
});
// touch controls for the list
if (pgwslideshow.config.touchcontrols) {
pgwslideshow.plugin.find('.ps-list > ul').on('touchmove', function (e) {
try {
if (e.originalevent.touches[0].clientx) {
var lastposition = (pgwslideshow.touchlistlastposition == false ? 0 : pgwslideshow.touchlistlastposition);
nbpixels = (pgwslideshow.touchlistlastposition == false ? 1 : math.abs(lastposition - e.originalevent.touches[0].clientx));
pgwslideshow.touchlistlastposition = e.originalevent.touches[0].clientx;
var touchdirection = '';
if (lastposition > e.originalevent.touches[0].clientx) {
touchdirection = 'left';
} else if (lastposition < e.originalevent.touches[0].clientx) {
touchdirection = 'right';
}
}
var oldposition = parseint(listobject.css('left'));
if (touchdirection == 'left') {
var containerwidth = containerobject.width();
var listwidth = listobject.width();
var marginleft = parseint(listobject.css('margin-left'));
var marginright = parseint(listobject.css('margin-right'));
containerwidth -= (marginleft + marginright);
var maxposition = -(listwidth - containerwidth);
var newposition = oldposition - nbpixels;
if (newposition > maxposition) {
listobject.css('left', newposition);
}
} else if (touchdirection == 'right') {
var newposition = oldposition + nbpixels;
if (newposition < 0) {
listobject.css('left', newposition);
} else {
listobject.css('left', 0);
}
}
} catch (e) {
pgwslideshow.touchlistlastposition = false;
}
});
pgwslideshow.plugin.find('.ps-list > ul').on('touchend', function (e) {
pgwslideshow.touchlistlastposition = false;
});
}
} else {
var marginleft = parseint((containerwidth - listwidth) / 2);
listobject.css('left', 0).css('margin-left', marginleft);
containerobject.find('.ps-prev').hide();
containerobject.find('.ps-next').hide();
pgwslideshow.plugin.find('.ps-list > ul').unbind('touchstart touchmove touchend');
}
return true;
};
// check the visibility of the selected item
var checkselecteditem = function () {
var containerwidth = pgwslideshow.plugin.find('.ps-list').width();
var listobject = pgwslideshow.plugin.find('.ps-list > ul');
var listwidth = listobject.width();
var marginleft = parseint(listobject.css('margin-left'));
var marginright = parseint(listobject.css('margin-right'));
containerwidth -= (marginleft + marginright);
var visiblezonestart = math.abs(parseint(listobject.css('left')));
var visiblezoneend = visiblezonestart + containerwidth;
var elementzonestart = pgwslideshow.plugin.find('.ps-list .ps-selected').position().left;
var elementzoneend = elementzonestart + pgwslideshow.plugin.find('.ps-list .ps-selected').width();
if ((elementzonestart < visiblezonestart) || (elementzoneend > visiblezoneend) || (listwidth > containerwidth && visiblezoneend > elementzoneend)) {
var maxposition = -(listwidth - containerwidth);
if (-elementzonestart < maxposition) {
listobject.css('left', maxposition);
} else {
listobject.css('left', -elementzonestart);
}
}
return true;
};
// start auto slide
pgwslideshow.startslide = function () {
pgwslideshow.config.autoslide = true;
activateinterval();
return true;
};
// stop auto slide
pgwslideshow.stopslide = function () {
pgwslideshow.config.autoslide = false;
clearinterval(pgwslideshow.intervalevent);
return true;
};
// get current slide
pgwslideshow.getcurrentslide = function () {
return pgwslideshow.currentslide;
};
// get slide count
pgwslideshow.getslidecount = function () {
return pgwslideshow.slidecount;
};
// display slide
pgwslideshow.displayslide = function (itemid) {
displayelement(itemid, true);
return true;
};
// next slide
pgwslideshow.nextslide = function () {
if (pgwslideshow.currentslide + 1 <= pgwslideshow.slidecount) {
var nextitem = pgwslideshow.currentslide + 1;
} else {
var nextitem = 1;
}
displayelement(nextitem, true, 'left');
return true;
};
// previous slide
pgwslideshow.previousslide = function () {
if (pgwslideshow.currentslide - 1 >= 1) {
var previousitem = pgwslideshow.currentslide - 1;
} else {
var previousitem = pgwslideshow.slidecount;
}
displayelement(previousitem, true, 'right');
return true;
};
// destroy slider
pgwslideshow.destroy = function (soft) {
clearinterval(pgwslideshow.intervalevent);
if (typeof soft != 'undefined') {
pgwslideshow.plugin.find('.ps-list > ul > li').each(function () {
$(this).attr('style', null).removeclass().unbind('click');
$(this).html($(this).find('span').html());
});
pgwslideshow.plugin.find('.ps-current').remove();
pgwslideshow.plugin.find('.ps-list').find('.ps-prev, .ps-next').remove();
pgwslideshow.plugin.find('.ps-list > ul').addclass(pgwslideshow.config.mainclassname).attr('style', '');
pgwslideshow.plugin.find('.ps-list > ul').unwrap().unwrap();
pgwslideshow.hide();
} else {
pgwslideshow.parent().parent().remove();
}
pgwslideshow.plugin = null;
pgwslideshow.data = [];
pgwslideshow.config = {};
pgwslideshow.currentslide = 0;
pgwslideshow.slidecount = 0;
pgwslideshow.resizeevent = null;
pgwslideshow.intervalevent = null;
pgwslideshow.touchfirstposition = null;
pgwslideshow.window = null;
return true;
};
// reload slider
pgwslideshow.reload = function (newoptions) {
pgwslideshow.destroy(true);
pgwslideshow = this;
pgwslideshow.plugin = this;
pgwslideshow.window = $(window);
pgwslideshow.plugin.show();
// merge new options with the default configuration
pgwslideshow.config = $.extend({}, defaults, newoptions);
// setup
setup();
// resize listener
pgwslideshow.window.resize(function () {
cleartimeout(pgwslideshow.resizeevent);
pgwslideshow.resizeevent = settimeout(function () {
setsizeclass();
var maxheight = pgwslideshow.plugin.find('.ps-current > ul > li.elt_' + pgwslideshow.currentslide + ' img').css('max-height', '').height();
updateheight(maxheight);
if (pgwslideshow.config.displaylist) {
checklist();
checkselecteditem();
}
}, 100);
});
// activate interval
if (pgwslideshow.config.autoslide) {
activateinterval();
}
return true;
};
// slideshow initialization
init();
return this;
}
})(window.zepto || window.jquery);