Zwei gallery_revoslider (Eclipse) auf einer Seite

[D@TK]

Hallo Leute, ein gesundes neues Jahr!

Wir haben hier eine Landingpage auf der zwei Galerien mit dem gallery_revoslider Template zum Einsatz kommen. Das führt zu einem ungewünschten Verhalten.

In beiden Galerien sind je 5 Bilder platziert. Nach dem Laden der Seite werden am Ende 3 weitere, weiße Bildbereiche (src="unknown") platziert.

Wieso kommt es zu diesem Verhalten, ist es ein Bug wenn 2 Galerien auf einer Seite platziert werden? Wie können wir das Problem beheben?

Im Quelltext-Ausschnitt sieht das dann so aus:

<div class="ce_gallery negative-margin first last block">
<div class="ce_revolutionslider rs-container resonsive banner block ">
<div class="rs-container block">
<div class="banner fullscreen tp-banner block" id="gallery_revoslider_113436" data-version="5.4.8">
<ul>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="assets/images/3/2019-03-23-10.07.21-e8bd6395.jpg" >
<img loading="auto" src="assets/images/3/2019-03-23-10.07.21-e8bd6395.jpg" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="assets/images/6/2020-06-21-09.33.59-1-498faf3c.jpg" >
<img src="assets/images/6/2020-06-21-09.33.59-1-498faf3c.jpg" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="assets/images/e/2020-10-03-10.24.34-3-48bbc573.jpg" >
<img src="assets/images/e/2020-10-03-10.24.34-3-48bbc573.jpg" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="assets/images/e/Brunch-Buffet-8a3ba234.jpg" >
<img src="assets/images/e/Brunch-Buffet-8a3ba234.jpg" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="assets/images/6/Dessert-im-Gla%CC%88schen-81ba33d2.jpg" >
<img src="assets/images/6/Dessert-im-Gla%CC%88schen-81ba33d2.jpg" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="" >
<img src="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="" >
<img src="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="" >
<img src="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
</ul>
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
var options = {
// general settings
jsFileLocation:'files/cto_layout/scripts/revolution/js/',
delay: 5000,
gridwidth: 1240,
gridheight: 800,
startWithSlide: 0,
sliderType: 'standard',
sliderLayout: "auto",
fullScreenOffset:0,
//fullScreenOffsetContainer: "#header",
fullWidth: "on",
fullScreen: "off",

touchenabled: "on",
onHoverStop: 'off',

swipe_velocity: 0.7,
swipe_min_touches: 1,
swipe_max_touches: 1,
drag_block_vertical: false,

// lopp settings
stopAtSlide: -1,
stopAfterLoops: -1,

shadow: 0,

navigation: {
bullets: {
enable: true,
style: "hebe",
h_align:"center",
v_align:"bottom",
v_offset: 20,
h_offset: 0,
wrapper_color: 'transparent',
hide_onmobile: true,
hide_under: 767,
space: 5,
},
keyboardNavigation: "on",
keyboard_direction: "horizontal",
mouseScrollNavigation: "off",
onHoverStop: "off",
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
arrows: {
style: "hesperiden",
enable: true,
hide_onmobile: false,
hide_onleave: false,
tmp: '',
left: {
h_align: "left",
v_align: "center",
h_offset: 10,
v_offset: 0
},
right: {
h_align: "right",
v_align: "center",
h_offset: 10,
v_offset: 0
}
}
}
}

// init slider
var api = jQuery('#gallery_revoslider_113436').show().revolu tion(options);

api.bind("revolution.slide.onloaded", function(e) {
// attach lightbox
jQuery('#gallery_revoslider_113436 li.slide a').attr('data-lightbox', 'gallery_revoslider_113436').map(function() {
jQuery(this).colorbox({
// Put custom options here
loop: false,
rel: jQuery(this).attr('data-lightbox'),
maxWidth: '95%',
maxHeight: '95%'
});
});
});
});
</script>
</div>
<div class="ce_gallery negative-margin first last block">
<div class="ce_revolutionslider rs-container resonsive banner block ">
<div class="rs-container block">
<div class="banner fullscreen tp-banner block" id="gallery_revoslider_113624" data-version="5.4.8">
<ul>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="assets/images/0/IMG_9193-ec5ed337.jpg" >
<img loading="auto" src="assets/images/0/IMG_9193-ec5ed337.jpg" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="assets/images/8/IMG_9195-bb5ecc95.jpg" >
<img src="assets/images/8/IMG_9195-bb5ecc95.jpg" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="assets/images/1/IMG_9200-7c94aec4.jpg" >
<img src="assets/images/1/IMG_9200-7c94aec4.jpg" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="assets/images/2/Kalte-Platten-4a924930.jpg" >
<img src="assets/images/2/Kalte-Platten-4a924930.jpg" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="assets/images/c/Suppe-%26Wurst-8a1974c8.jpg" >
<img src="assets/images/c/Suppe-%26Wurst-8a1974c8.jpg" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="" >
<img src="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="" >
<img src="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
<li class="slide row4" data-transition="fade" data-slotamount="4" data-thumb="" >
<img src="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" class="rev-slidebg">
</li>
</ul>
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
var options = {
// general settings
jsFileLocation:'files/cto_layout/scripts/revolution/js/',
delay: 5000,
gridwidth: 1240,
gridheight: 800,
startWithSlide: 0,
sliderType: 'standard',
sliderLayout: "auto",
fullScreenOffset:0,
//fullScreenOffsetContainer: "#header",
fullWidth: "on",
fullScreen: "off",

touchenabled: "on",
onHoverStop: 'off',

swipe_velocity: 0.7,
swipe_min_touches: 1,
swipe_max_touches: 1,
drag_block_vertical: false,

// lopp settings
stopAtSlide: -1,
stopAfterLoops: -1,

shadow: 0,

navigation: {
bullets: {
enable: true,
style: "hebe",
h_align:"center",
v_align:"bottom",
v_offset: 20,
h_offset: 0,
wrapper_color: 'transparent',
hide_onmobile: true,
hide_under: 767,
space: 5,
},
keyboardNavigation: "on",
keyboard_direction: "horizontal",
mouseScrollNavigation: "off",
onHoverStop: "off",
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
arrows: {
style: "hesperiden",
enable: true,
hide_onmobile: false,
hide_onleave: false,
tmp: '',
left: {
h_align: "left",
v_align: "center",
h_offset: 10,
v_offset: 0
},
right: {
h_align: "right",
v_align: "center",
h_offset: 10,
v_offset: 0
}
}
}
}

// init slider
var api = jQuery('#gallery_revoslider_113624').show().revolu tion(options);

api.bind("revolution.slide.onloaded", function(e) {
// attach lightbox
jQuery('#gallery_revoslider_113624 li.slide a').attr('data-lightbox', 'gallery_revoslider_113624').map(function() {
jQuery(this).colorbox({
// Put custom options here
loop: false,
rel: jQuery(this).attr('data-lightbox'),
maxWidth: '95%',
maxHeight: '95%'
});
});
});
});
</script>
</div>

[Tim]

Hi,
stell mal die Anzahl an Vorschaubildern pro Reihe in den Einstellungen der Galerie auf die gleiche Anzahl an Bildern, die ausgegeben werden sollen. Wenn du 5 Bilder hast, stell mal auf 5 Vorschaubilder.

[D@TK]

Hi,
stell mal die Anzahl an Vorschaubildern pro Reihe in den Einstellungen der Galerie auf die gleiche Anzahl an Bildern, die ausgegeben werden sollen. Wenn du 5 Bilder hast, stell mal auf 5 Vorschaubilder.

Hallo Tim,
vielen Dank für den flotten Support. Ja daran lags, es muss die gleiche Anzahl Bilder in den Vorschaubildern ausgewählt werden. Das führt dann zum gewünschten Ergebnis.