/** * 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.title ? element.title : '') + ''+ element.description); } else if (element.thumbnail) { currentelement.html('' + (element.title ? element.title : '') + '' + '
    ' + 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);