// // by osvaldas valutis, www.osvaldas.info // available for use under the mit license // (function ($, window, document) { 'use strict'; // components // var $activityobject = $('
') .attr('class','imagelightbox-loading') .append($('')), $arrowleftobject = $('',{ type: 'button', class: 'imagelightbox-arrow imagelightbox-arrow-left'}), $arrowrightobject = $('',{ type: 'button', class: 'imagelightbox-arrow imagelightbox-arrow-right'}), $arrows = $arrowleftobject.add($arrowrightobject), $captionobject = $('', { class: 'imagelightbox-caption', html: ' ' }), $buttonobject = $('', { class: 'imagelightbox-close' }), $overlayobject = $('', { class:'imagelightbox-overlay' }), $navitem = $('', { href:'#', class:'imagelightbox-navitem' }), $navobject = $('', { class: 'imagelightbox-nav' }), $wrapper = $('', { class: 'imagelightbox-wrapper' }); var csstransitionsupport = function () { var s = document.body || document.documentelement; s = s.style; if (s.webkittransition === '') { return '-webkit-'; } if (s.moztransition === '') { return '-moz-'; } if (s.otransition === '') { return '-o-'; } if (s.transition === '') { return ''; } return false; }, hascsstransitionsupport = csstransitionsupport() !== false, csstransitiontranslatex = function (element, positionx, speed) { var options = {}, prefix = csstransitionsupport(); options[prefix + 'transform'] = 'translatex(' + positionx + ')'; options[prefix + 'transition'] = prefix + 'transform ' + speed + 's linear'; element.css(options); }, hastouch = ( 'ontouchstart' in window ), haspointers = window.navigator.pointerenabled || window.navigator.mspointerenabled, wastouched = function (event) { if (hastouch) { return true; } if (!haspointers || typeof event === 'undefined' || typeof event.pointertype === 'undefined') { return false; } if (typeof event.mspointer_type_mouse !== 'undefined') { if (event.mspointer_type_mouse !== event.pointertype) { return true; } } else if (event.pointertype !== 'mouse') { return true; } return false; }; $.fn.imagelightbox = function (opts) { var options = $.extend({ selector: 'a[data-imagelightbox]', id: 'imagelightbox', allowedtypes: 'png|jpg|jpeg|gif', // todo make it work again animationspeed: 250, activity: false, arrows: false, button: false, caption: false, enablekeyboard: true, lockbody: false, navigation: false, overlay: false, preloadnext: true, quitonend: false, quitonimgclick: false, quitondocclick: true, quitonesckey: true }, opts), _onstart = function () { if (options.arrows) { arrowson(this); } if (options.navigation) { navigationon(); } if (options.overlay) { overlayon(); } if (options.button) { closebuttonon(); } if (options.caption) { $wrapper.append($captionobject); } }, _onloadstart = function () { if (options.activity) { activityindicatoron(); } if (options.caption) { captionreset(); } }, _onloadend = function () { if (options.activity) { activityindicatoroff(); } if (options.arrows) { $arrows.css('display', 'block'); } }, _previoustarget = function () { var targetindex = targets.index(target) - 1; if (targetindex < 0) { if (options.quitonend === true) { _quitimagelightbox(); return false; } else { targetindex = targets.length - 1; } } target = targets.eq(targetindex); $wrapper.trigger('previous.ilb2'); _loadimage(-1); }, _nexttarget = function () { var targetindex = targets.index(target) + 1; if (targetindex >= targets.length) { if (options.quitonend === true) { _quitimagelightbox(); return false; } else { targetindex = 0; } } target = targets.eq(targetindex); $wrapper.trigger('next.ilb2'); _loadimage(+1); }, activityindicatoron = function () { $wrapper.append($activityobject); }, activityindicatoroff = function () { $('.imagelightbox-loading').remove(); }, overlayon = function () { $wrapper.append($overlayobject); }, closebuttonon = function () { $buttonobject.appendto($wrapper).on('click.ilb7', function () { _quitimagelightbox(); return false; }); }, captionreset = function () { $captionobject.html(' '); if ($(target).data('ilb2-caption')) { $captionobject.html($(target).data('ilb2-caption')); } else if ($(target).find('img').length > 0) { $captionobject.html($(target).find('img').attr('alt')); } }, navigationon = function () { if (targets.length) { for (var i = 0; i < targets.length; i++) { $navobject.append($navitem.clone()); } var $navitems = $navobject.children('a'); $navitems.eq(targets.index(target)).addclass('active'); // $wrapper.on('previous.ilb2 next.ilb2', function () { $navitems.removeclass('active').eq(targets.index(target)).addclass('active'); }); $wrapper.append($navobject); //// $navobject .on('click.ilb7 touchend.ilb7', function () { return false; }) .on('click.ilb7 touchend.ilb7', 'a', function () { var $this = $(this); if (targets.eq($this.index()).attr('href') !== $('.imagelightbox').attr('src')) { var tmptarget = targets.eq($this.index()); if (tmptarget.length) { currentindex = targets.index(target); target = tmptarget; _loadimage($this.index() < currentindex ? -1 : 1); } } $this.addclass('active').siblings().removeclass('active'); }); } }, arrowson = function () { $wrapper.append($arrows); $arrows.on('click.ilb7 touchend.ilb7', function (e) { e.stopimmediatepropagation(); e.preventdefault(); if ($(this).hasclass('imagelightbox-arrow-left')) { _previoustarget(); } else { _nexttarget(); } return false; }); }, targetset = '', targets = $([]), target = $(), image = $(), imagewidth = 0, imageheight = 0, swipediff = 0, inprogress = false, currentindex = 0, istargetvalid = function (validimage) { var allowedtypes = options.allowedtypes; //test that regexp is restricted to disjunction format var isgoodre = /^(?!\|)[\w\|]+(?!\|)$/.test(allowedtypes); // if (!isgoodre) { //allowedtypes = 'png|jpg|jpeg|gif'; return false; } // var url = validimage.attr('href'); var ext = parseurl(url).pathname; var re = new regexp(allowedtypes,'i'); // var isallowed = re.test(ext); // function by cory laviska function parseurl(url) { var parser = document.createelement('a'), searchobject = {}, queries, split, i; // let the browser do the work parser.href = url; // convert query string to object queries = parser.search.replace(/^\?/, '').split('&'); for( i = 0; i < queries.length; i++ ) { split = queries[i].split('='); searchobject[split[0]] = split[1]; } return { protocol: parser.protocol, host: parser.host, hostname: parser.hostname, port: parser.port, pathname: parser.pathname, search: parser.search, searchobject: searchobject, hash: parser.hash }; } return isallowed; }, // todo make it work again // istargetvalid = function (element) { // var classic = $(element).prop('tagname').tolowercase() === 'a' && ( new regexp('.(' + options.allowedtypes + ')$', 'i') ).test($(element).attr('href')); // var html5 = $(element).attr('data-lightbox') !== undefined; // return classic || html5; // }, _setimage = function () { if (!image.length) { return true; } var captionheight = $captionobject.outerheight(); var screenwidth = $(window).width() * 0.8, wheight = ((window.innerheight) ? window.innerheight : $(window).height()) - captionheight, screenheight = wheight * 0.9, tmpimage = new image(); tmpimage.src = image.attr('src'); tmpimage.onload = function () { imagewidth = tmpimage.width; imageheight = tmpimage.height; if (imagewidth > screenwidth || imageheight > screenheight) { var ratio = imagewidth / imageheight > screenwidth / screenheight ? imagewidth / screenwidth : imageheight / screenheight; imagewidth /= ratio; imageheight /= ratio; } image.css({ 'width': imagewidth + 'px', 'height': imageheight + 'px', 'top': ( wheight - imageheight ) / 2 + 'px', 'left': ( $(window).width() - imagewidth ) / 2 + 'px' }); }; }, _loadimage = function (direction) { if (inprogress) { return false; } if (image.length) { var params = {'opacity': 0}; if (hascsstransitionsupport) { csstransitiontranslatex(image, ( 100 * direction ) - swipediff + 'px', options.animationspeed / 1000); } else { params.left = parseint(image.css('left')) + 100 * direction + 'px'; } image.animate(params, options.animationspeed, function () { _removeimage(); }); swipediff = 0; } inprogress = true; _onloadstart(); settimeout(function () { var imgpath = target.attr('href'); // if ( imgpath === undefined ) { // imgpath = target.attr( 'data-lightbox' ); // } image = $('') .attr('src', imgpath) .on('load.ilb7', function () { $wrapper.trigger('loaded.ilb2'); var params = {'opacity': 1}; image.appendto($wrapper); _setimage(); image.css('opacity', 0); if (hascsstransitionsupport) { csstransitiontranslatex(image, -100 * direction + 'px', 0); settimeout(function () { csstransitiontranslatex(image, 0 + 'px', options.animationspeed / 1000); }, 50); } else { var imageposleft = parseint(image.css('left')); params.left = imageposleft + 'px'; image.css('left', imageposleft - 100 * direction + 'px'); } image.animate(params, options.animationspeed, function () { inprogress = false; _onloadend(); }); if (options.preloadnext) { var nexttarget = targets.eq(targets.index(target) + 1); if (!nexttarget.length) { nexttarget = targets.eq(0); } $('').attr('src', nexttarget.attr('href')); } }) .on('error.ilb7', function () { _onloadend(); }); var swipestart = 0, swipeend = 0, imageposleft = 0; image.on(haspointers ? 'pointerup.ilb7 mspointerup.ilb7' : 'click.ilb7', function (e) { e.preventdefault(); if (options.quitonimgclick) { _quitimagelightbox(); return false; } if (wastouched(e.originalevent)) { return true; } var posx = ( e.pagex || e.originalevent.pagex ) - e.target.offsetleft; if (imagewidth / 2 > posx) { _previoustarget(); } else { _nexttarget(); } }) .on('touchstart.ilb7 pointerdown.ilb7 mspointerdown.ilb7', function (e) { if (!wastouched(e.originalevent) || options.quitonimgclick) { return true; } if (hascsstransitionsupport) { imageposleft = parseint(image.css('left')); } swipestart = e.originalevent.pagex || e.originalevent.touches[0].pagex; }) .on('touchmove.ilb7 pointermove.ilb7 mspointermove.ilb7', function (e) { if ((!haspointers && e.type === 'pointermove') || !wastouched(e.originalevent) || options.quitonimgclick) { return true; } e.preventdefault(); swipeend = e.originalevent.pagex || e.originalevent.touches[0].pagex; swipediff = swipestart - swipeend; if (hascsstransitionsupport) { csstransitiontranslatex(image, -swipediff + 'px', 0); } else { image.css('left', imageposleft - swipediff + 'px'); } }) .on('touchend.ilb7 touchcancel.ilb7 pointerup.ilb7 pointercancel.ilb7 mspointerup.ilb7 mspointercancel.ilb7', function (e) { if (!wastouched(e.originalevent) || options.quitonimgclick) { return true; } if (math.abs(swipediff) > 50) { if (swipediff < 0) { _previoustarget(); } else { _nexttarget(); } } else { if (hascsstransitionsupport) { csstransitiontranslatex(image, 0 + 'px', options.animationspeed / 1000); } else { image.animate({'left': imageposleft + 'px'}, options.animationspeed / 2); } } }); }, options.animationspeed + 100); }, _removeimage = function () { if (!image.length) { return false; } image.remove(); image = $(); }, _openimagelightbox = function ($target) { if (inprogress) { return false; } inprogress = false; target = $target; _onstart(); $('body').append($wrapper); if (options.lockbody) { $('body').addclass('imagelightbox-scroll-lock'); } $wrapper.trigger('start.ilb2'); _loadimage(0); }, _quitimagelightbox = function () { $wrapper.trigger('quit.ilb2'); if (options.lockbody) { $('body').removeclass('imagelightbox-scroll-lock'); } if (!image.length) { return false; } image.animate({'opacity': 0}, options.animationspeed, function () { _removeimage(); inprogress = false; targets = $([]); $wrapper.remove().find('*').remove(); }); }, _addtargets = function( newtargets ) { newtargets.on('click.ilb7', {set: targetset}, function (e) { e.preventdefault(); targetset = $(e.currenttarget).data('imagelightbox'); filtertargets(); if (targets.length < 1) { _quitimagelightbox(); } else { _openimagelightbox($(this)); } }); function filtertargets () { newtargets .filter(function () { return $(this).data('imagelightbox') === targetset; }) .filter(function () { return istargetvalid($(this)); }) .each(function () { targets = targets.add($(this)); }); } }; $(window).on('resize.ilb7', _setimage); $(document).ready(function() { if (options.quitondocclick) { $(document).on(hastouch ? 'touchend.ilb7' : 'click.ilb7', function (e) { if (image.length && !$(e.target).is(image)) { e.preventdefault(); _quitimagelightbox(); } }); } if (options.lockbody) { $(document).on('keydown.ilb7', function (e) { if (!image.length) { return true; } if([9,32,38,40].indexof(e.which) > -1) { e.preventdefault(); return false; } }); } if (options.enablekeyboard) { $(document).on('keyup.ilb7', function (e) { if (!image.length) { return true; } e.preventdefault(); if ([27].indexof(e.which) > -1 && options.quitonesckey) { _quitimagelightbox(); } if ([37].indexof(e.which) > -1) { _previoustarget(); } else if ([39].indexof(e.which) > -1) { _nexttarget(); } }); } }); $(document).off('click', options.selector); _addtargets($(this)); this.addtoimagelightbox = function(elements) { _addtargets(elements); }; this.loadpreviousimage = function () { _previoustarget(); }; this.loadnextimage = function () { _nexttarget(); }; this.quitimagelightbox = function () { _quitimagelightbox(); return this; }; this.startimagelightbox = function () { $(this).trigger('click.ilb7'); }; return this; }; })(jquery, window, document);