Skip to content

Instantly share code, notes, and snippets.

@moxdev

moxdev/_lightbox.scss

Last active June 23, 2017 19:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save moxdev/b5abb4fe5bcd04d873494a94a920a93b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save moxdev/b5abb4fe5bcd04d873494a94a920a93b to your computer and use it in GitHub Desktop.
Download ZIP
Image Lightbox Library: jQuery options and activation of the imagelightbox plugin, sass styles, and imagelightbox library (Chrome Windows 10 fix)
Raw
_lightbox.scss
#imagelightbox {
position: fixed;
z-index: 8000;
-ms-touch-action: none;
touch-action: none;
}
.imagelightbox-overlay {
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
z-index:7500;
background-color:rgba(255, 255, 255, .95);
}
button.imagelightbox-arrow {
position: fixed;
z-index: 9000;
top: 47.5%;
font-size: 2rem;
padding: 0;
display: flex;
justify-content:center;
align-items: flex-start;
border-radius: 50%;
color: $color__brand-1;
background-color: transparent;
box-shadow: none;
transition: color .125s;
min-width: auto;
font-family: $font__main;
&:hover {
color:$color__brand-3;
}
@include respond-to(small) {
font-size: 3rem;
}
}
.imagelightbox-arrow-left {
left: .75rem;
@include respond-to(x-small) {
left: 1.75rem;
}
}
.imagelightbox-arrow-right {
right: .75rem;
@include respond-to(x-small) {
right: 1.75rem;
}
}
.imagelightbox-close {
position: fixed;
top: 1rem;
right: 1.25rem;
z-index: 8500;
color: $color__brand-1;
background-color: transparent;
box-shadow: none;
font-size: 2rem;
line-height: 1;
padding: .5rem;
transition: color .125s;
min-width: auto;
font-family: $font__main;
&:hover {
color:$color__brand-3;
cursor: pointer;
}
@include respond-to(small) {
font-size: 2.5rem;
}
}
.imagelightbox-caption {
font-family: $font__main;
font-size: 1.25em;
line-height: 1.125;
text-align: center;
color:$color__text-main;
position: fixed;
z-index: 9999;
left: 0px;
right: 0px;
bottom: 0px;
padding: 0.625em;
}
/* Animation */
@keyframes loading {
to { transform: rotate(360deg); }
}
/* Loader (*/
.imagelightbox-loading {
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
position: fixed;
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
z-index: 9999;
border-top: 6px solid darken($color__brand-3, 20%);
border-right: 6px solid darken($color__brand-3, 20%);
border-bottom: 6px solid $color__brand-5;
border-left: 6px solid $color__brand-5;
animation: loading 1.2s infinite linear;
}
.imagelightbox-overlay,
.imagelightbox-close,
.imagelightbox-caption,
.imagelightbox-nav,
.imagelightbox-arrow {
animation: fade-in .25s linear;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
Raw
imagelightbox.js
//
// By Osvaldas Valutis, www.osvaldas.info
// Available for use under the MIT License
//
(function ($, window, document) {
'use strict';
// COMPONENTS //
var $activityObject = $('<div/>')
.attr('class','imagelightbox-loading')
.append($('<div/>')),
$arrowLeftObject = $('<button/>',{
type: 'button',
class: 'imagelightbox-arrow imagelightbox-arrow-left',
html: '&lt;'}),
$arrowRightObject = $('<button/>',{
type: 'button',
class: 'imagelightbox-arrow imagelightbox-arrow-right',
html: '&gt;'}),
$arrows = $arrowLeftObject.add($arrowRightObject),
$captionObject = $('<div/>', {
class: 'imagelightbox-caption',
html: '&nbsp;'
}),
$buttonObject = $('<a/>', {
class: 'imagelightbox-close',
html: 'X'
}),
$overlayObject = $('<div/>', {
class:'imagelightbox-overlay'
}),
$navItem = $('<a/>', {
href:'#',
class:'imagelightbox-navitem'
}),
$navObject = $('<div/>', {
class: 'imagelightbox-nav'
}),
$wrapper = $('<div/>', {
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('&nbsp;');
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 = $('<img id="' + options.id + '" />')
.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);
}
$('<img />').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);
Raw
mylightbox.js
jQuery(document).ready(function() {
jQuery('a[data-imagelightbox="a"]').imageLightbox({
activity: true,
animationSpeed: 250,
arrows: true,
button: true,
caption: true,
overlay: true
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment