Rocksolid Slider: es wird die ganze Seite in Lightbox geladen

[jankout]

Hallo,

ich habe es mit Rocksolid Slider ausprobiert und leider wird da die ganze Seite in der Lightbox geladen und gezeigt, obwohl da der Attribut data-lightbox in a-Tag steht. Als Vergleich steht da auch eine Bildergalerie, wo es funktioniert.

Ich vermute, dass ich noch etwas im Script deiner Erweiterung einstellen muss?

[fritzmg]

The problem is that the href is not URL encoded:

<a data-rsts-type="…" href="files/upload/blog/Bildergalerien/20201210_RIP Paolo Rossi/1_IMG_8649.JPG" data-lightbox="57593c" title="…" data-rsts-thumb="…">
    …
</a>

You need to make sure that the href is properly URL encoded (a space should be %20 for example).

[jankout]

Thank you for your quick response. I wrote to the Rocksolid support to get their help. As soon as I have the solution I will post it here.

[jankout]

I got this answer from Rocksolid but still, one of the pictures cannot be shown in the lightbox although I set everything properly. There are 6 pictures but in the lightbox are only 5.

[fritzmg]

That is because the RockSolid Slider dynamically adds images afterwards (even though there were all present in the beginning in the HTML source). If you inspect the DOM after loading the page you can see, that only 5 slides are actually present at first. The 6th slide will be added once you start going through the slides.

Presumably, the initialisation of the slider happens before the initialisation of the lightbox script and thus the lightbox only sees those 5 images.

[jankout]

Ok, it seems to be an error in the rocksolid slider still. I set it so that all slides should be there. I already contacted them to check this behaviour.

[fritzmg]

I am not sure that's an error. Might just be a specific behavior of the RockSolid Slider. You might need to implement your own Lightcase initialisation, which also happens once the RockSolid Slider is initialised (may be the RockSolid Slider fires an event).

[jankout]

Their recommendation is to preload all slides - see here. I set it but it seems that it does not work.

[fritzmg]

Sorry, but I cannot help you with that of course ;). I can only observe, that on your linked site, only 5 slides are present in the DOM.

[jankout]

I know. I appreciate your help very much. :-) I'm just waiting for the response from them and I will post the solution here.

[jankout]

In the following script which is in the slider template, it must be something else because is originally written for colorbox

<script>
<?php $this->block('script') ?>
(function() {

var sliderElement = [].slice.call(document.getElementsByClassName('mod_rocksolid_slider'), -1 )[0];

if (window.jQuery && jQuery.fn.rstSlider) {
	init();
}
else {
	document.addEventListener('DOMContentLoaded', init);
}

function init() {

	var $ = jQuery;
	var slider = $(sliderElement);

	<?php $this->block('script_bgvideo') ?>
	slider.find('video[data-rsts-background], [data-rsts-type=video] video').each(function() {
		// Disable mejs for videos
		this.player = true;
	});
	<?php $this->endblock() ?>

	slider.rstSlider(<?= json_encode($this->options); ?>);

	<?php $this->block('script_lightbox') ?>
	// Fix missing lightbox links
	$(function() {

		if (!$.fn.colorbox) {
			return;
		}

		var lightboxConfig = {
			<?php $this->block('script_lightbox_config') ?>
			loop: false,
			rel: function() {
				return $(this).attr('data-lightbox');
			},
			maxWidth: '95%',
			maxHeight: '95%'
			<?php $this->endblock() ?>
		};

		<?php if (count($lightboxUrls)): ?>
			var lightboxUrls = <?= json_encode($lightboxUrls) ?>;
			var lightboxId = <?= json_encode(substr(md5('mod_rocksolid_slider_' . $this->id), 0, 6)) ?>;
			var dummyLinksWrap = $('<div>').css('display', 'none');
			var dummyLinks = $([]);
			dummyLinksWrap.insertAfter(slider);
			$.each(lightboxUrls, function(index, url) {
				$('<a>').attr('href', url[0]).attr('title', url[1]).attr('data-lightbox', lightboxId).appendTo(dummyLinksWrap);
			});
			dummyLinks = dummyLinksWrap.find('a');
			dummyLinks.colorbox(lightboxConfig);
		<?php endif ?>

		var update = function(links) {
			<?php if (count($lightboxUrls)): ?>
				dummyLinks.appendTo(dummyLinksWrap);
				links.each(function() {
					var href = $(this).attr('href');
					dummyLinks.each(function() {
						if (href === $(this).attr('href')) {
							$(this).detach();
						}
					});
				});
			<?php endif ?>
			links.colorbox(lightboxConfig);
		};

		slider.on('rsts-slidestart rsts-slidestop', function(event) {
			update(slider.find('a[data-lightbox]'));
		});

		update(slider.find('a[data-lightbox]'));

	});
	<?php $this->endblock() ?>

}

})();
<?php $this->endblock() ?>
</script>

[jankout]

In general, if the slider works without loop your extension works properly. If I set it with looping it cannot work properly. That's why it's necessary to change the code for the slider. If you have any idea I would be very thankful.

[federleicht]

Hello,

I also have this problem. I would be very grateful for a solution.

Bye Markus