From 394a17cf972f64c1f8200acf0f455dd939a1f6ea Mon Sep 17 00:00:00 2001 From: Stephan Wagner Date: Sun, 10 Mar 2019 20:37:10 +0100 Subject: [PATCH] Add option for responsive images --- dist/jBox.all.js | 29 +++++++++++++++++++---------- dist/jBox.all.min.js | 2 +- dist/plugins/jBox.Image.js | 29 +++++++++++++++++++---------- dist/plugins/jBox.Image.min.js | 2 +- src/js/jBox.d.ts | 6 ++++++ src/js/plugins/jBox.Image.js | 29 +++++++++++++++++++---------- 6 files changed, 65 insertions(+), 32 deletions(-) diff --git a/dist/jBox.all.js b/dist/jBox.all.js index 12d511b..83005fe 100755 --- a/dist/jBox.all.js +++ b/dist/jBox.all.js @@ -2209,16 +2209,18 @@ jQuery(document).ready(function () { // Options (https://stephanwagner.me/jBox/options#options-confirm) - src: 'href', // The attribute where jBox gets the image source from, e.g. href="/path_to_image/image.jpg" - gallery: 'data-jbox-image', // The attribute to set the galleries, e.g. data-jbox-image="gallery1" - imageLabel: 'title', // The attribute where jBox gets the image label from, e.g. title="My label" - imageFade: 360, // The fade duration for images in ms - imageSize: 'contain', // How to display the images. Use CSS background-position values, e.g. 'cover', 'contain', 'auto', 'initial', '50% 50%' - imageCounter: false, // Set to true to add an image counter, e.g. 4/20 - imageCounterSeparator: '/', // HTML to separate the current image number from all image numbers, e.g. '/' or ' of ' - downloadButton: false, // Adds a download button - downloadButtonText: null, // Text for the download button - downloadButtonUrl: null, // The attribute at the source element where to find the image to download, e.g. data-download="/path_to_image/image.jpg". If none provided, the currently active image will be downloaded + src: 'href', // The attribute where jBox gets the image source from, e.g. href="/path_to_image/image.jpg" + gallery: 'data-jbox-image', // The attribute to set the galleries, e.g. data-jbox-image="gallery1" + imageLabel: 'title', // The attribute where jBox gets the image label from, e.g. title="My label" + imageFade: 360, // The fade duration for images in ms + imageSize: 'contain', // How to display the images. Use CSS background-position values, e.g. 'cover', 'contain', 'auto', 'initial', '50% 50%' + imageCounter: false, // Set to true to add an image counter, e.g. 4/20 + imageCounterSeparator: '/', // HTML to separate the current image number from all image numbers, e.g. '/' or ' of ' + downloadButton: false, // Adds a download button + downloadButtonText: null, // Text for the download button + downloadButtonUrl: null, // The attribute at the source element where to find the image to download, e.g. data-download="/path_to_image/image.jpg". If none provided, the currently active image will be downloaded + mobileImageAttr: null, // The attribute to look for an mobile version of the image + mobileImageBreakpoint: null, // The upper breakpoint to load the mobile image target: window, attach: '[data-jbox-image]', fixed: true, @@ -2253,6 +2255,13 @@ jQuery(document).ready(function () { // Abort if the item was added to a gallery already if (item.data('jBox-image-gallery')) return; + // Update responsive image src + if (this.options.mobileImageAttr && this.options.mobileImageBreakpoint) { + if (jQuery(window).width() <= this.options.mobileImageBreakpoint) { + this.options.src = this.options.mobileImageAttr; + } + } + // Add item to a gallery var gallery = item.attr(this.options.gallery) || 'default'; !this.images[gallery] && (this.images[gallery] = []); diff --git a/dist/jBox.all.min.js b/dist/jBox.all.min.js index 6305bc2..1c16ee9 100755 --- a/dist/jBox.all.min.js +++ b/dist/jBox.all.min.js @@ -1 +1 @@ -!function(t,i){"function"==typeof define&&define.amd?define([],i):"object"==typeof module&&module.exports?module.exports=i():t.unscroll=i()}("undefined"!=typeof self?self:this,function(){function t(t){if(this.set=function(t,i){window.unscrollStore||(window.unscrollStore={}),window.unscrollStore[t]=i},this.get=function(t){return window.unscrollStore?window.unscrollStore[t]:null},this.getScrollbarWidth=function(){if(this.get("scrollbarWidth"))return this.get("scrollbarWidth")+"px";var t=document.createElement("div");t.style.width="100px",t.style.height="100px",t.style.overflow="scroll",t.style.position="absolute",t.style.top="-10000",document.body.appendChild(t);var i=t.offsetWidth-t.clientWidth;return document.body.removeChild(t),this.set("scrollbarWidth",i),i+"px"},this.getElementsToAdjust=function(o){!o&&(o=[]),"string"==typeof o&&(o=[[o,"padding-right"]]),o.forEach(function(t,i){"string"==typeof t&&(o[i]=[t,"padding-right"])});for(var t=!1,i=0;iwindow.innerHeight},this.pageHasScrollbar()){t=this.getElementsToAdjust(t);for(var i=0;i