diff --git a/css/b3_gallery.css b/css/b3_gallery.css
index 644e39d..b79a704 100644
--- a/css/b3_gallery.css
+++ b/css/b3_gallery.css
@@ -10,16 +10,19 @@
padding: 20px 15px;
text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
-.b3Gallery .caption {
- padding-right: 100px;
- text-align: left;
-}
@media (min-width: 768px) {
.b3Gallery .carousel-caption {
color: #313131;
background-color: rgba(255,255,255,.7);
}
}
+.b3Gallery .caption {
+ padding-right: 100px;
+ text-align: left;
+}
+.b3Gallery .modal-body {
+ background: url('../images/load.gif') center center no-repeat;
+}
.b3Gallery .carousel-inner .item {
margin: 0;
max-width: 100%;
@@ -27,25 +30,30 @@
.b3Gallery .carousel-fade .carousel-control {
z-index: 2;
}
-.b3Gallery .carousel-fade .carousel-inner .item {
- -webkit-transition-property: opacity;
- transition-property: opacity;
-}
.b3Gallery .carousel-fade .carousel-inner .item,
.b3Gallery .carousel-fade .carousel-inner .active.left,
.b3Gallery .carousel-fade .carousel-inner .active.right {
opacity: 0;
+ visibility: hidden;
+ -webkit-transition-property: visibility, opacity;
+ transition-property: visibility, opacity;
+ -webkit-transition-delay: 1000ms;
+ transition-delay: 1000ms;
}
.b3Gallery .carousel-fade .carousel-inner .active,
.b3Gallery .carousel-fade .carousel-inner .next.left,
.b3Gallery .carousel-fade .carousel-inner .prev.right {
opacity: 1;
+ visibility: visible;
}
.b3Gallery .carousel-fade .carousel-inner .next,
.b3Gallery .carousel-fade .carousel-inner .prev,
.b3Gallery .carousel-fade .carousel-inner .active.left,
.b3Gallery .carousel-fade .carousel-inner .active.right {
left: 0;
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0);
+}
+.b3Gallery .carousel-fade .carousel-inner .item img {
+ margin: auto;
}
diff --git a/images/index.html b/images/index.html
new file mode 100644
index 0000000..8047ac5
--- /dev/null
+++ b/images/index.html
@@ -0,0 +1 @@
+
diff --git a/images/load.gif b/images/load.gif
new file mode 100644
index 0000000..0080299
Binary files /dev/null and b/images/load.gif differ
diff --git a/js/b3_gallery.js b/js/b3_gallery.js
index 0821ef0..186c3ec 100644
--- a/js/b3_gallery.js
+++ b/js/b3_gallery.js
@@ -1,5 +1,5 @@
/*jslint browser: true*/
-/*global $, jQuery*/
+/*global jQuery, window, document*/
function viewport() {
'use strict';
var e = window,
@@ -11,26 +11,40 @@ function viewport() {
return { width: e[a + 'Width'], height: e[a + 'Height'] };
}
-function resizeModal(id, tam) {
+function resizeModal(id, tam, first) {
'use strict';
- var win_size = viewport(),
- view = win_size.width,
- size = tam + 32 + 'px';
+ var win_size = viewport(),
+ view = win_size.width,
+ modal = jQuery('#galleryModal-' + id),
+ modal_body = modal.find('.modal-body'),
+ pad_top = parseInt(modal_body.css('padding-top'), 0),
+ pad_right = parseInt(modal_body.css('padding-right'), 0),
+ pad_bottom = parseInt(modal_body.css('padding-bottom'), 0),
+ pad_left = parseInt(modal_body.css('padding-left'), 0),
+ nWidth = tam[0] + pad_left + pad_right + 2 + 'px',
+ nHeight = tam[1] + pad_top + pad_bottom + 'px';
+
if (view > 767) {
- jQuery('#galleryModal-' + id).find('.modal-dialog').css({
- width: size
- });
+ if (first === true) {
+ modal.find('.modal-dialog').css({width: nWidth});
+ modal_body.css({height: nHeight});
+ } else {
+ modal.find('.modal-dialog').animate({width: nWidth}, 400);
+ modal_body.animate({height: nHeight}, 400);
+ }
}
}
-function getItemIndex(id, imgs_width, subtitles) {
+function getItemIndex(index, id, imgs_dimensions, subtitles) {
'use strict';
var carousel = jQuery('#carousel-' + id);
- resizeModal(id, imgs_width[0]);
+
+ resizeModal(id, imgs_dimensions[index], true);
+
carousel.on('slid.bs.carousel', function () {
var index = jQuery(carousel).find('figure.active').index(),
currentIndex = index + 1,
- tam = imgs_width[index];
+ tam = imgs_dimensions[index];
jQuery('#counter-' + id).text(currentIndex);
jQuery('#caption-' + id).text(subtitles[index]);
diff --git a/mod_b3_gallery.xml b/mod_b3_gallery.xml
index 8ecdfdd..f34746f 100644
--- a/mod_b3_gallery.xml
+++ b/mod_b3_gallery.xml
@@ -6,7 +6,7 @@
Copyright (C) 2017 Hugo Fittipaldi. All rights reserved.
GNU General Public License version 2 or later
hugo.fittipaldi@gmail.com
- 2.0.0-rc
+ 2.0.0
Place a Bootstrap 3 gallery in a module position.
script.php
@@ -22,6 +22,7 @@
index.html
css
+ images
js
diff --git a/tmpl/default.php b/tmpl/default.php
index 3e652a8..20097ed 100644
--- a/tmpl/default.php
+++ b/tmpl/default.php
@@ -54,7 +54,7 @@
foreach ($gallery as $image) :
$file = $image->image;
list($width, $height) = getimagesize($file);
- $imgs_width[] = $width;
+ $imgs_dimensions[$k] = '[' . $width . ', ' . $height . ']';
?>
@@ -96,7 +96,7 @@