diff --git a/README.md b/README.md
index 944ee6d..c63413b 100644
--- a/README.md
+++ b/README.md
@@ -79,7 +79,7 @@ For a whole example just look at the demo folder.
| preloading | true | bool | allows preloading next und previous images |
| enableKeyboard | true | bool | allow keyboard arrow navigation and close with ESC key |
| loop | true | bool | enables looping through images |
-| rel | false | mixed | This can be used as an anchor rel alternative for Simplelightbox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. Note: The value can also be set to 'nofollow' to disable grouping. |
+| rel | false | mixed | By default, false means, that the lightbox groups by rel automatically. This option can be used as an anchor rel alternative for Simplelightbox. It allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. Note: The value can also be set to 'nofollow' to disable grouping. |
| docClose | true | bool | closes the lightbox when clicking outside |
| swipeTolerance | 50 | int | how much pixel you have to swipe, until next or previous image |
| className: | 'simple-lightbox' | string | adds a class to the wrapper of the lightbox |
@@ -96,6 +96,7 @@ For a whole example just look at the demo folder.
| doubleTapZoom | 2 | int | zoom level if double tapping on image |
| maxZoom | 10 | int | maximum zoom level on pinching |
| htmlClass | 'has-lightbox' | string or false | adds class to html element if lightbox is open. If empty or false no class is set |
+| rtl | false | bool | change direction to rigth-to-left |
### Events
| Name | Description |
| ---- | ----------- |
@@ -190,7 +191,7 @@ Run `gulp watch` to enable continous watching of both src/simple-lightbox.js and
Just call `gulp build` to have all files and variants created inside dist!
### Changelog
-**2.1.0 - Added rel grouping feature #16**
+**2.1.0 - Added rel grouping feature #16 and added rtl support #161**
**2.0.0 - Complete rewrite. Now uses modern ES6 javascript, without the need of jQuery. Can use jQuery anyway. Developers can use gulp with babel to contribute. Thanks to Mtillmann #129 for the implementation**
**1.17.3 - Fixed new chrome passive error #155**
**1.17.2 - Fixed caption keeps disappeared on double click #139 and added better close symbol #133**
diff --git a/demo/index.html b/demo/index.html
index 0c3c9d3..ef1891a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -4,7 +4,7 @@
-
+
SimpleLightbox by André Rinas
@@ -368,6 +368,12 @@ JavaScript Options
string |
adds class to html element if lightbox is open. If empty or false no class is set |
+
+ | rtl |
+ false |
+ bool |
+ change direction to rigth-to-left |
+
@@ -697,7 +703,6 @@ Author/
Contributors
$('body').fadeIn(200);
var $gallery = new SimpleLightbox('.small-demo a', {});
- var $gallery2 = new SimpleLightbox('.small-demo2 a', {});
interval = window.setInterval(function(){
$('.scrollwheel').animate({
diff --git a/dist/simple-lightbox.css b/dist/simple-lightbox.css
index eb4adbc..8b3eaa2 100644
--- a/dist/simple-lightbox.css
+++ b/dist/simple-lightbox.css
@@ -95,6 +95,8 @@ body.hidden-scroll {
.sl-wrapper .sl-navigation button.sl-prev {
left: 20px;
font-size: 3rem; } }
+ .sl-wrapper.sl-dir-rtl .sl-navigation {
+ direction: ltr; }
.sl-wrapper .sl-image {
position: fixed;
-ms-touch-action: none;
diff --git a/dist/simple-lightbox.js b/dist/simple-lightbox.js
index e202c2d..f9dd5eb 100644
--- a/dist/simple-lightbox.js
+++ b/dist/simple-lightbox.js
@@ -61,7 +61,8 @@ function () {
throttleInterval: 0,
doubleTapZoom: 2,
maxZoom: 10,
- htmlClass: 'has-lightbox'
+ htmlClass: 'has-lightbox',
+ rtl: false
});
_defineProperty(this, "transitionPrefix", void 0);
@@ -237,10 +238,7 @@ function () {
if (!_this.isAnimating && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) > -1) {
_this.loadImage(event.key === 'ArrowRight' ? 1 : -1);
- } // if (['ArrowLeft', 'ArrowRight'].indexOf(event.key) > -1) {
- // this.loadImage(event.key === 'ArrowRight' ? 1 : -1);
- // }
-
+ }
}
}, this.options.throttleInterval));
}
@@ -281,6 +279,10 @@ function () {
if (this.options.className) {
this.domNodes.wrapper.classList.add(this.options.className);
}
+
+ if (this.options.rtl) {
+ this.domNodes.wrapper.classList.add('sl-dir-rtl');
+ }
}
}, {
key: "throttle",
@@ -428,6 +430,12 @@ function () {
value: function loadImage(direction) {
var _this4 = this;
+ var slideDirection = direction;
+
+ if (this.options.rtl) {
+ direction = -direction;
+ }
+
this.relatedElements[this.currentImageIndex].dispatchEvent(new Event('change.' + this.eventNamespace));
this.relatedElements[this.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'next' : 'prev') + '.' + this.eventNamespace));
var newIndex = this.currentImageIndex + direction;
@@ -440,7 +448,7 @@ function () {
this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1;
if (this.options.animationSlide) {
- this.slide(this.options.animationSpeed / 1000, -100 * direction - this.controlCoordinates.swipeDiff + 'px');
+ this.slide(this.options.animationSpeed / 1000, -100 * slideDirection - this.controlCoordinates.swipeDiff + 'px');
}
this.fadeOut(this.domNodes.image, 300, function () {
@@ -458,7 +466,7 @@ function () {
_this4.domNodes.image.removeChild(_this4.domNodes.caption);
}
- _this4.adjustImage(direction);
+ _this4.adjustImage(slideDirection);
if (_this4.options.preloading) _this4.preload();
}, 100);
diff --git a/src/simple-lightbox.js b/src/simple-lightbox.js
index 7f0106a..2c0fda2 100644
--- a/src/simple-lightbox.js
+++ b/src/simple-lightbox.js
@@ -39,7 +39,8 @@ class SimpleLightbox {
throttleInterval: 0,
doubleTapZoom: 2,
maxZoom: 10,
- htmlClass: 'has-lightbox'
+ htmlClass: 'has-lightbox',
+ rtl: false
};
transitionPrefix;
@@ -116,7 +117,7 @@ class SimpleLightbox {
constructor(elements, options) {
- this.options = Object.assign(this.defaultOptions, options)
+ this.options = Object.assign(this.defaultOptions, options);
if (typeof elements === 'string') {
this.initialSelector = elements;
@@ -208,9 +209,6 @@ class SimpleLightbox {
if(!this.isAnimating && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) > -1) {
this.loadImage(event.key === 'ArrowRight' ? 1 : -1);
}
- // if (['ArrowLeft', 'ArrowRight'].indexOf(event.key) > -1) {
- // this.loadImage(event.key === 'ArrowRight' ? 1 : -1);
- // }
}
}, this.options.throttleInterval));
}
@@ -253,6 +251,9 @@ class SimpleLightbox {
if (this.options.className) {
this.domNodes.wrapper.classList.add(this.options.className);
}
+ if(this.options.rtl) {
+ this.domNodes.wrapper.classList.add('sl-dir-rtl');
+ }
}
throttle(func, limit) {
@@ -393,6 +394,10 @@ class SimpleLightbox {
}
loadImage(direction) {
+ let slideDirection = direction;
+ if(this.options.rtl) {
+ direction = -direction;
+ }
this.relatedElements[this.currentImageIndex].dispatchEvent(new Event('change.' + this.eventNamespace));
this.relatedElements[this.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'next' : 'prev') + '.' + this.eventNamespace));
@@ -409,7 +414,7 @@ class SimpleLightbox {
if (this.options.animationSlide) {
- this.slide(this.options.animationSpeed / 1000, (-100 * direction) - this.controlCoordinates.swipeDiff + 'px');
+ this.slide(this.options.animationSpeed / 1000, (-100 * slideDirection) - this.controlCoordinates.swipeDiff + 'px');
}
this.fadeOut(this.domNodes.image, 300, () => {
@@ -426,7 +431,7 @@ class SimpleLightbox {
this.domNodes.image.removeChild(this.domNodes.caption);
}
- this.adjustImage(direction);
+ this.adjustImage(slideDirection);
if (this.options.preloading) this.preload();
}, 100);
});
diff --git a/src/simple-lightbox.scss b/src/simple-lightbox.scss
index 3741ccf..4068183 100644
--- a/src/simple-lightbox.scss
+++ b/src/simple-lightbox.scss
@@ -27,296 +27,302 @@ $sl-iframe-border-large: 0 none !default;
$add-vendor-prefixes: true !default;
body.hidden-scroll {
- overflow: hidden;
+ overflow: hidden;
}
.sl-overlay {
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background: $sl-overlay-background;
- opacity: $sl-overlay-opacity;
- display: none;
- z-index: 1035;
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: $sl-overlay-background;
+ opacity: $sl-overlay-opacity;
+ display: none;
+ z-index: 1035;
}
.sl-wrapper {
- z-index: 1040;
- * {
- box-sizing: border-box;
- }
- button {
- border: 0 none;
- background: transparent;
- font-size: 28px;
- padding: 0;
- cursor: pointer;
- &:hover {
- opacity: 0.7;
+ z-index: 1040;
+ * {
+ box-sizing: border-box;
}
- }
-
- .sl-close {
- display: none;
- position: fixed;
- right: 30px;
- top: 30px;
- z-index: 10060;
- margin-top: -14px;
- margin-right: -14px;
- height: 44px;
- width: 44px;
- line-height: 44px;
- font-family: $sl-font-family;
- color: $sl-navigation-color;
- font-size: $sl-close-fontsize;
-
- &:focus {
- outline: none;
+ button {
+ border: 0 none;
+ background: transparent;
+ font-size: 28px;
+ padding: 0;
+ cursor: pointer;
+ &:hover {
+ opacity: 0.7;
+ }
}
- }
- .sl-counter {
- display: none;
- position: fixed;
- top: 30px;
- left: 30px;
- z-index: 1060;
- color: $sl-navigation-color;
- font-size: $sl-counter-fontsize;
- }
-
- .sl-navigation {
- width: 100%;
- display: none;
- button {
- position: fixed;
- top: 50%;
- margin-top: -22px;
- height: 44px;
- width: 22px;
- line-height: 44px;
- text-align: center;
- display: block;
- z-index: 10060;
- font-family: $sl-font-family;
- color: $sl-navigation-color;
- &.sl-next {
- right: 5px;
- font-size: $sl-arrow-fontsize-small;
- }
-
- &.sl-prev {
- left: 5px;
- font-size: $sl-arrow-fontsize-small;
- }
-
- &:focus {
- outline: none;
- }
-
- @media (min-width: $sl-breakpoint-medium) {
+ .sl-close {
+ display: none;
+ position: fixed;
+ right: 30px;
+ top: 30px;
+ z-index: 10060;
+ margin-top: -14px;
+ margin-right: -14px;
+ height: 44px;
width: 44px;
+ line-height: 44px;
+ font-family: $sl-font-family;
+ color: $sl-navigation-color;
+ font-size: $sl-close-fontsize;
- &.sl-next {
- right: 10px;
- font-size: $sl-arrow-fontsize-medium;
+ &:focus {
+ outline: none;
}
+ }
- &.sl-prev {
- left: 10px;
- font-size: $sl-arrow-fontsize-medium;
- }
- }
- @media (min-width: $sl-breakpoint-large) {
- width: 44px;
+ .sl-counter {
+ display: none;
+ position: fixed;
+ top: 30px;
+ left: 30px;
+ z-index: 1060;
+ color: $sl-navigation-color;
+ font-size: $sl-counter-fontsize;
+ }
- &.sl-next {
- right: 20px;
- font-size: $sl-arrow-fontsize-large;
+ .sl-navigation {
+ width: 100%;
+ display: none;
+ button {
+ position: fixed;
+ top: 50%;
+ margin-top: -22px;
+ height: 44px;
+ width: 22px;
+ line-height: 44px;
+ text-align: center;
+ display: block;
+ z-index: 10060;
+ font-family: $sl-font-family;
+ color: $sl-navigation-color;
+ &.sl-next {
+ right: 5px;
+ font-size: $sl-arrow-fontsize-small;
+ }
+
+ &.sl-prev {
+ left: 5px;
+ font-size: $sl-arrow-fontsize-small;
+ }
+
+ &:focus {
+ outline: none;
+ }
+
+ @media (min-width: $sl-breakpoint-medium) {
+ width: 44px;
+
+ &.sl-next {
+ right: 10px;
+ font-size: $sl-arrow-fontsize-medium;
+ }
+
+ &.sl-prev {
+ left: 10px;
+ font-size: $sl-arrow-fontsize-medium;
+ }
+ }
+ @media (min-width: $sl-breakpoint-large) {
+ width: 44px;
+
+ &.sl-next {
+ right: 20px;
+ font-size: $sl-arrow-fontsize-large;
+ }
+
+ &.sl-prev {
+ left: 20px;
+ font-size: $sl-arrow-fontsize-large;
+ }
+ }
}
+ }
- &.sl-prev {
- left: 20px;
- font-size: $sl-arrow-fontsize-large;
+ &.sl-dir-rtl {
+ .sl-navigation {
+ direction: ltr;
}
- }
}
- }
- .sl-image {
- position: fixed;
- @if $add-vendor-prefixes {
- -ms-touch-action: none;
- }
- touch-action: none;
- z-index: 10000;
- img {
- margin: 0;
- padding: 0;
- display: block;
- border: $sl-img-border-small;
- width: 100%;
- height: auto;
- @media (min-width: $sl-breakpoint-medium) {
- border: $sl-img-border-medium;
- }
- @media (min-width: $sl-breakpoint-large) {
- border: $sl-img-border-large;
- }
+ .sl-image {
+ position: fixed;
+ @if $add-vendor-prefixes {
+ -ms-touch-action: none;
+ }
+ touch-action: none;
+ z-index: 10000;
+ img {
+ margin: 0;
+ padding: 0;
+ display: block;
+ border: $sl-img-border-small;
+ width: 100%;
+ height: auto;
+ @media (min-width: $sl-breakpoint-medium) {
+ border: $sl-img-border-medium;
+ }
+ @media (min-width: $sl-breakpoint-large) {
+ border: $sl-img-border-large;
+ }
- }
- iframe {
- background: #000;
- border: $sl-iframe-border-small;
- @media (min-width: $sl-breakpoint-medium) {
- border: $sl-iframe-border-medium;
- }
- @media (min-width: $sl-breakpoint-large) {
- border: $sl-iframe-border-large;
- }
- }
- .sl-caption {
- display: none;
- padding: 10px;
- color: $sl-caption-color;
- background: $sl-caption-background;
- font-size: $sl-caption-fontsize;
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
-
- &.pos-top {
- bottom: auto;
- top: 0;
- }
-
- &.pos-outside {
- bottom: auto;
- }
- }
+ }
+ iframe {
+ background: #000;
+ border: $sl-iframe-border-small;
+ @media (min-width: $sl-breakpoint-medium) {
+ border: $sl-iframe-border-medium;
+ }
+ @media (min-width: $sl-breakpoint-large) {
+ border: $sl-iframe-border-large;
+ }
+ }
+ .sl-caption {
+ display: none;
+ padding: 10px;
+ color: $sl-caption-color;
+ background: $sl-caption-background;
+ font-size: $sl-caption-fontsize;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ &.pos-top {
+ bottom: auto;
+ top: 0;
+ }
+
+ &.pos-outside {
+ bottom: auto;
+ }
+ }
- .sl-download {
- display: none;
- position: absolute;
- bottom: 5px;
- right: 5px;
- color: $sl-navigation-color;
- z-index: 1060;
+ .sl-download {
+ display: none;
+ position: absolute;
+ bottom: 5px;
+ right: 5px;
+ color: $sl-navigation-color;
+ z-index: 1060;
+ }
}
- }
}
.sl-spinner {
- display: none;
- border: 5px solid #333;
- border-radius: 40px;
- height: 40px;
- left: 50%;
- margin: -20px 0 0 -20px;
- opacity: 0;
- position: fixed;
- top: 50%;
- width: 40px;
- z-index: 1007;
- @if $add-vendor-prefixes {
- -webkit-animation: pulsate 1s ease-out infinite;
- -moz-animation: pulsate 1s ease-out infinite;
- -ms-animation: pulsate 1s ease-out infinite;
- -o-animation: pulsate 1s ease-out infinite;
- }
- animation: pulsate 1s ease-out infinite;
+ display: none;
+ border: 5px solid #333;
+ border-radius: 40px;
+ height: 40px;
+ left: 50%;
+ margin: -20px 0 0 -20px;
+ opacity: 0;
+ position: fixed;
+ top: 50%;
+ width: 40px;
+ z-index: 1007;
+ @if $add-vendor-prefixes {
+ -webkit-animation: pulsate 1s ease-out infinite;
+ -moz-animation: pulsate 1s ease-out infinite;
+ -ms-animation: pulsate 1s ease-out infinite;
+ -o-animation: pulsate 1s ease-out infinite;
+ }
+ animation: pulsate 1s ease-out infinite;
}
.sl-scrollbar-measure {
- position: absolute;
- top: -9999px;
- width: 50px;
- height: 50px;
- overflow: scroll;
+ position: absolute;
+ top: -9999px;
+ width: 50px;
+ height: 50px;
+ overflow: scroll;
}
.sl-transition {
- @if $add-vendor-prefixes {
- transition: -moz-transform ease 200ms;
- transition: -ms-transform ease 200ms;
- transition: -o-transform ease 200ms;
- transition: -webkit-transform ease 200ms;
- }
- transition: transform ease 200ms;
+ @if $add-vendor-prefixes {
+ transition: -moz-transform ease 200ms;
+ transition: -ms-transform ease 200ms;
+ transition: -o-transform ease 200ms;
+ transition: -webkit-transform ease 200ms;
+ }
+ transition: transform ease 200ms;
}
@-webkit-keyframes pulsate {
- 0% {
- transform: scale(.1);
- opacity: 0.0;
- }
- 50% {
- opacity: 1;
- }
- 100% {
- transform: scale(1.2);
- opacity: 0;
- }
-}
-
-@keyframes pulsate {
- 0% {
- transform: scale(.1);
- opacity: 0.0;
- }
- 50% {
- opacity: 1;
- }
- 100% {
- transform: scale(1.2);
- opacity: 0;
- }
-}
-
-@if $add-vendor-prefixes {
- @-moz-keyframes pulsate {
0% {
- transform: scale(.1);
- opacity: 0.0;
+ transform: scale(.1);
+ opacity: 0.0;
}
50% {
- opacity: 1;
+ opacity: 1;
}
100% {
- transform: scale(1.2);
- opacity: 0;
+ transform: scale(1.2);
+ opacity: 0;
}
- }
+}
- @-o-keyframes pulsate {
+@keyframes pulsate {
0% {
- transform: scale(.1);
- opacity: 0.0;
+ transform: scale(.1);
+ opacity: 0.0;
}
50% {
- opacity: 1;
+ opacity: 1;
}
100% {
- transform: scale(1.2);
- opacity: 0;
+ transform: scale(1.2);
+ opacity: 0;
}
- }
+}
- @-ms-keyframes pulsate {
- 0% {
- transform: scale(.1);
- opacity: 0.0;
+@if $add-vendor-prefixes {
+ @-moz-keyframes pulsate {
+ 0% {
+ transform: scale(.1);
+ opacity: 0.0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1.2);
+ opacity: 0;
+ }
}
- 50% {
- opacity: 1;
+
+ @-o-keyframes pulsate {
+ 0% {
+ transform: scale(.1);
+ opacity: 0.0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1.2);
+ opacity: 0;
+ }
}
- 100% {
- transform: scale(1.2);
- opacity: 0;
+
+ @-ms-keyframes pulsate {
+ 0% {
+ transform: scale(.1);
+ opacity: 0.0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1.2);
+ opacity: 0;
+ }
}
- }
}