Skip to content

Commit a046496

Browse files
ggppdkggppdk
committed
Responsive height for gallerific (inline slideshow) layout for the image gallery field (first image decides the height of the slideshow)
1 parent 547a00e commit a046496

File tree

4 files changed

+87
-53
lines changed

4 files changed

+87
-53
lines changed

‎plugins/flexicontent_fields/image/tmpl/value_gallery_galleriffic.php‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
$thumb_display = (int) $field->parameters->get( $PPFX_ . 'thumb-display', 1 ); //0:none, 1:images, 2:dots //TODO check dots and none
3333
$thumb_position = (int) $field->parameters->get( $PPFX_ . 'thumb-position', 1 ); //0:top, 1:bottom
3434
$thumb_height = (int) $field->parameters->get( $PPFX_ . 'thumb_height', 86 );
35-
$slide_height = (int) $field->parameters->get( $PPFX_ . 'slide_height', 600 );//TODO check solution for responsive height
35+
$slide_height_max = $field->parameters->get( $PPFX_ . 'slide_height_max', '' );
3636

3737
$use_pages = (int) $field->parameters->get( $PPFX_ . 'use_pages', 0 );
3838
$number_thumbs = !$use_pages ? 9999 : (int) $field->parameters->get( $PPFX_ . 'number_thumbs', 5 );
@@ -50,6 +50,7 @@
5050

5151
$thumb_container_height = $thumb_height + (!$use_pages ? 32 : 0) + ($use_pages && $enable_top_pager === 0 ? 40 : 0) + ($use_pages && $enable_bottom_pager === 1 ? 40 : 0);
5252

53+
$firstImage = '';
5354
foreach ($values as $n => $value)
5455
{
5556
// Include common layout code for preparing values, but you may copy here to customize
@@ -71,15 +72,16 @@
7172
'<a class="thumb" name="drop" href="'.\Joomla\CMS\Uri\Uri::root(true).'/'.$srcl.'" data-width="' . $size_w_l . '" data-height="' . $size_h_l . '" title="' . $title_encoded . '">
7273
'.$img_legend.'
7374
</a>
74-
<a class="gf_fancybox" href="'.\Joomla\CMS\Uri\Uri::root(true).'/'.$srcl.'" data-title="' . $title_encoded . '" data-caption="' . $desc_encoded . '"' . $group_str . '
75-
onclick="if (gf_gallery_' . $uid . '.mSlider.isDragging) {event.preventDefault(); event.stopPropagation(); return false; }"; style="display: none;">
75+
<a class="gf_fancybox" href="'.\Joomla\CMS\Uri\Uri::root(true).'/'.$srcl.'" data-title="' . $title_encoded . '" data-caption="' . $desc_encoded . '" ' . $group_str . '
76+
onclick="if (gf_gallery_' . $uid . '.mSlider.isDragging) {event.preventDefault(); event.stopPropagation(); return false; }" style="display: none;">
7677
</a>
7778
' . ($display_title || $display_desc ? '
7879
<div class="caption">
7980
' . ($display_title && $title ? '<div class="image-title">' . $title_encoded .'</div>' : '') . '
8081
' . ($display_desc && $desc ? '<div class="image-desc">' . nl2br(preg_replace("/(\r\n|\r|\n){3,}/", "\n\n", $desc_encoded)) . '</div>' : '') . '
8182
</div>' : '') .'
8283
';
84+
$firstImageHtml = $firstImage ?: '<img class="image-fist-image" src="'.\Joomla\CMS\Uri\Uri::root(true).'/'.$srcl.'" alt="' . $title_encoded . '" style="width: 100%; height: 100%;" />';
8385
}
8486
$js = "
8587
var gf_gallery_" . $uid . ";
@@ -217,7 +219,7 @@
217219
$field->{$prop}[$_i] = preg_replace('/<img[^>]+>/i', '.', $field->{$prop}[$_i]);
218220
}
219221
$thumbs_display_html ='
220-
<div id="gf_thumbs_' . $uid . '" class="navigation' . (!$use_pages ? ' no_pagination' : '') . '" style="display: none;">
222+
<div id="gf_thumbs_' . $uid . '" class="navigation' . (!$use_pages ? ' no_pagination' : '') . '">
221223
<ul class="thumbs noscript dot">
222224
<li>
223225
'. implode("</li><li>", $field->{$prop}) .'
@@ -241,17 +243,17 @@
241243
$field->{$prop} = '
242244
243245
<style>
244-
div#gf_thumbs_' . $uid . '{' . ($use_pages ? 'min-height: ' : 'height: ') . $thumb_container_height . 'px; }
245-
div#gf_thumbs_' . $uid . ' ul.thumbs li a {
246-
height:' . $thumb_height . 'px !important;
247-
max-width:' . $thumb_height . 'px !important;
248-
}
249246
div#gf_thumbs_' . $uid . ' ul.thumbs li a img {
250247
width:' . $thumb_height . 'px !important;
251248
}
252-
div#gf_container_' . $uid . ' div.slideshow-container .image-wrapper a,
253-
div#gf_container_' . $uid . ' div.slideshow-container {
254-
height: ' . $slide_height . 'px;
249+
'. ($slide_height_max ? '
250+
div#gf_container_' . $uid . ' div.slideshow-wrapper-first-image img,
251+
div#gf_container_' . $uid . ' div.slideshow-container .image-wrapper a img {
252+
max-height: ' . $slide_height_max . ';
253+
}' : '') . '
254+
255+
div#gf_container_' . $uid . ' {
256+
--transition-duration: ' . $transition_duration . 'ms;
255257
}
256258
</style>
257259
@@ -267,6 +269,9 @@
267269
</div>
268270
269271
<div id="gf_content_' . $uid . '" class="content">
272+
<div class="slideshow-wrapper-first-image" style="opacity: 0; height:unset; position: relative; z-index: -1;">
273+
' . $firstImageHtml . '
274+
</div>
270275
<div class="slideshow-container">
271276
' . ($over_image_btns ? '
272277
<div id="gf_navcontrols_' . $uid . '" class="controls nav-controls-box"></div>

‎plugins/flexicontent_fields/image/tmpl/value_gallery_galleriffic.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343

4444
<field name="" type="separator" default="FLEXI_FIELD_IMAGE_IMG_SIZE_NOTE" level="level3 alert-info fcpadded" />
4545

46+
<field name="PPFX_slide_height_max" type="text" default="" label="Image max height (CSS expression)" description="" depend_class="" />
4647
<field name="PPFX_thumb_height" type="number" default="86" label="FLEXI_FIELD_IMAGE_THUMBNAIL_HEIGHT_PX" description="" depend_class="" />
47-
<field name="PPFX_slide_height" type="number" default="600" label="FLEXI_FIELD_IMAGE_SLIDESHOW_HEIGHT_PX" description="" depend_class="" />
4848

4949
<field name="" type="separator" default="FLEXI_FIELD_THUMBS_PAGES" level="level2" />
5050

‎site/librairies/galleriffic/css/basic.css‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ div.gf_container * {
77
margin: 0;
88
padding: 0;
99
/*text-align: center;*/
10-
/* font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;*/
10+
/* font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;*/
1111
background: none;
1212
color: #555;
1313
line-height: 100%;
@@ -142,13 +142,14 @@ div.gf_container div.navigation div.pagination.top.gf_inline_nav .gf_pagination_
142142
color: white;
143143
text-shadow: 0px 1px 1px #aaa, 0px -1px 1px #aaa;
144144
font-weight: bold;
145-
height: 1.5em;
146145
line-height: 1em;
147146
padding: 4px;
148147
border-radius: 0;
149148
border: none;
150149
font-size: 12px;
151150
z-index: 20;
151+
height: 100%;
152+
align-items: center;
152153
}
153154
div.gf_container div.navigation div.pagination.bottom .gf_pagination_info {
154155
padding: 0.5em 0.5em 0 0.5em;
@@ -242,14 +243,15 @@ div.gf_container div.slideshow-container div.controls div.nav-controls a:hover >
242243
background-color: rgba(0,0,0, 0.9);
243244
}
244245
div.gf_container ul.thumbs.dot li a {
245-
max-height: 20px !important;
246-
width: 20px !important;
247-
background: #ccc !important;
248-
border-radius: 50% !important;
246+
max-height: 20px !important;
247+
width: 20px !important;
248+
background: #ccc !important;
249+
border-radius: 50% !important;
249250
font-size:0;
251+
transition: opacity var(--transition-duration) linear;
250252
}
251253
div.gf_container ul.thumbs.dot {
252-
margin-top: 20px !important;
254+
margin-top: 20px !important;
253255
text-align: center;
254256
}
255257
div.gf_container ul.thumbs.dot li.selected a {
@@ -335,10 +337,12 @@ div.gf_container > div.navigation:not(.no_pagination) > ul.thumbs {
335337
margin-bottom: 12px !important;
336338
}*/
337339
div.gf_container > div.navigation.no_pagination > ul.thumbs {
338-
display: block;
339-
flex-direction: unset;
340-
justify-content: unset;
340+
display: flex;
341+
flex-direction: row;
342+
justify-content: center;
341343
white-space: nowrap;
344+
height: fit-content;
345+
max-height: fit-content;
342346
}
343347

344348

@@ -403,8 +407,8 @@ div.gf_container > div.navigation > ul.thumbs > li img {
403407
width: auto;
404408
height: auto !important;
405409
min-height: 100% !important;
406-
transition: opacity 0.4s ease-in-out;
407-
opacity: 0.7;
410+
opacity: 0.65;
411+
transition: opacity var(--transition-duration) linear;
408412
}
409413
div.gf_container > div.navigation > ul.thumbs > li img:hover,
410414
div.gf_container > div.navigation > ul.thumbs > li.selected img {
@@ -422,12 +426,11 @@ div.gf_container > div.navigation > ul.thumbs > li.selected a.thumb:focus {
422426

423427

424428
div.gf_container > .content > div.slideshow-container {
425-
position: relative;
429+
position: absolute;
426430
clear: both;
427431
width: 100%;
428432
/*overflow: hidden; /* avoid */
429-
/*height: 100%;*/
430-
/*height: 400px;*/ /* This is just the default */
433+
height: 100%;
431434
}
432435

433436
div.gf_container > .content > div.slideshow-container > div.loader {
@@ -445,14 +448,22 @@ div.gf_container > .content > div.slideshow-container > div.slideshow {
445448
height: 100%;
446449
}
447450

451+
/**
452+
* Override this via configuration parameter ...
453+
*/
454+
div.gf_container {
455+
--transition-duration: 0.4s;
456+
}
457+
448458
div.gf_container > .content > div.slideshow-container > div.slideshow span.image-wrapper {
449459
width: 100%;
450-
height: 100%;
451-
display: block;
460+
height: fit-content;
461+
display: block !important;
452462
position: absolute;
453463
top: 0;
454464
left: 0;
455465
overflow: hidden;
466+
transition: opacity var(--transition-duration) linear;
456467
}
457468

458469
div.gf_container > .content > div.slideshow-container > div.slideshow span.image-wrapper a {
@@ -468,12 +479,12 @@ div.gf_container > .content > div.slideshow-container > div.slideshow span.imag
468479
}
469480

470481
div.gf_container div.slideshow img {
471-
display: inline-block;
472-
align-self: auto;
482+
display: inline-block;
483+
align-self: auto;
473484
border: 4px solid #ccc;
474485
max-height: 100% !important;
475486
max-width: 100% !important;
476-
width: auto;
487+
width: 100%;
477488
}
478489

479490
div.gf_container > .content > div.slideshow-container > div.slideshow span.image-wrapper img {
@@ -486,7 +497,7 @@ div.gf_container div.caption-container {
486497
bottom: 0;
487498
clear: left;*/
488499
margin: auto;
489-
width: 100%;
500+
width: 100%;
490501
}
491502
div.gf_container div.caption-container span.image-caption {
492503
display: none; /* hide until this is positioned via JS*/
@@ -524,7 +535,7 @@ div.gf_container div.caption-container div.caption > div.image-desc {
524535
}
525536

526537
div.gf_container div.caption-container div.caption > * {
527-
color: white;
538+
color: white;
528539
text-shadow: 1px 1px 0px #000, -1px -1px 0px #000;
529540
letter-spacing: 2px;
530541
font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;

‎site/librairies/galleriffic/js/jquery.galleriffic.js‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -107,30 +107,37 @@
107107
// accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
108108
onTransitionOut: function(slide, caption, isSync, callback)
109109
{
110-
slide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, callback);
111-
caption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
110+
//slide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, callback);
111+
//caption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
112+
113+
slide.css('opacity', 0.0);
114+
caption.css('opacity', 0.0);
115+
116+
setTimeout(function() {
117+
typeof callback === 'function' && callback();
118+
}, this.getDefaultTransitionDuration(isSync));
112119
},
113120

114121
// accepts a delegate like such: function(slide, caption, isSync) { ... }
115122
onTransitionIn: function(slide, caption, isSync)
116123
{
117-
var duration = this.getDefaultTransitionDuration(isSync);
118-
slide.fadeTo(duration, 1.0);
124+
const duration = this.getDefaultTransitionDuration(isSync);
125+
//slide.fadeTo(duration, 1.0);
126+
slide.css('opacity', 1.0);
119127

120128
// Position the caption at the bottom of the image and set its opacity
121-
var slideImage = slide.find('img');
129+
const slideImage = slide.find('img');
122130

123-
var left = Math.ceil((slide.width() - slideImage.width()) / 2),
131+
const left = Math.ceil((slide.width() - slideImage.width()) / 2),
124132
offTop = slideImage.get(0).offsetTop,
125-
height = Math.floor( slideImage.outerHeight(true) ),
133+
height = Math.floor(slideImage.outerHeight(true)),
126134
bottom = Math.ceil(slide.height() - slideImage.outerHeight(true)),
127-
left = Math.ceil((slide.width() - slideImage.width()) / 2),
128-
width = slideImage.width() < slide.width() ? slideImage.width() : slide.width();
135+
width = slideImage.width() < slide.width() ? slideImage.width() : slide.width();
129136

130137
//slide.closest('.slideshow-container').find('.nav-controls-box').find('a').css({'height': height});
131138
//slide.closest('.slideshow-container').find('.loader').css({'height': height});
132139

133-
var caption_el = caption.get(0);
140+
const caption_el = caption.get(0);
134141
caption_el.style.width = width + 'px';
135142
caption_el.style.display = 'block';
136143
caption_el.style.bottom = (bottom - offTop) + 'px';
@@ -676,9 +683,14 @@
676683
if (this.onTransitionOut) {
677684
this.onTransitionOut(previousSlide, previousCaption, isSync, transitionOutCallback);
678685
} else {
679-
previousSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, transitionOutCallback);
680-
if (previousCaption)
681-
previousCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
686+
//previousSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, transitionOutCallback);
687+
previousSlide.css('opacity', 0.0);
688+
setTimeout(function() {
689+
typeof transitionOutCallback === 'function' && transitionOutCallback();
690+
}, this.getDefaultTransitionDuration(isSync));
691+
692+
//previousCaption && previousCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
693+
previousCaption && previousCaption.css('opacity', 0.0);
682694
}
683695
}
684696

@@ -768,8 +780,12 @@
768780
.append(imageData.caption);
769781
}
770782

771-
newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
772-
setTimeout(function() { newCaption.removeClass('transitioning'); }, this.getDefaultTransitionDuration(isSync));
783+
//newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
784+
785+
newCaption.css('opacity', 1.0);
786+
setTimeout(function() {
787+
newCaption.removeClass('transitioning');
788+
}, this.getDefaultTransitionDuration(isSync));
773789
}
774790

775791
// Hide the loading conatiner
@@ -781,9 +797,11 @@
781797
if (this.onTransitionIn) {
782798
this.onTransitionIn(newSlide, newCaption, isSync);
783799
} else {
784-
newSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
785-
if (newCaption)
786-
newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
800+
//newSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
801+
//newCaption && newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
802+
803+
newSlide.css('opacity', 1.0);
804+
newCaption && newCaption.css('opacity', 1.0);
787805
}
788806

789807
if (this.isSlideshowRunning) {

0 commit comments

Comments
 (0)