Link to Album Lightbox - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
February 14, 2021 at 2:04 pm #1280414

Cloudypro
Participant

Greetings

I would like to link a text, to an album of images that are placed within one folder in my media library, and not only to one single image. This way i can go “next” and “next” etc …

In another word,
i have a course i teach online, and i have a syllabus written in text format mentioning the titles of the course, i want to click on one title and open a series of photos as a lightbox on the same page, that can go one after the other with an arrow, just like it is an album of many photos
Please check this link for clarification https://per-vurt.com/ableton-music-production-master-certificate/#toggle-id-1
Now you can see that the first title “what is sound” is opening an image that is linked to it. What i want instead is to open an album of images and not only 1 !! i want to use this to display a slide of images and not only 1 and i want to remain on the same page and not redirected somewhere else

I hope there is a solution you can guide me with

Thanks

February 17, 2021 at 3:03 pm #1281752
Ismael
Moderator
Hey Mohamad,

Thank you for the inquiry.

This should be possible using the following script in the functions.php file.
```
add_action('wp_footer', function() {
 ?>
	<script>
		(function($) {
			// Bind Click Handler to Link, then Open Gallery
			$('.gallery-link').on('click', function () {
				$(this).next().magnificPopup('open');
			});

			// Initialize Magnific Popup Gallery + Options
			$('.gallery').each(function () {
				$(this).magnificPopup({
					delegate: 'a',
					gallery: {
						enabled: true
					},
					type: 'image'
				});
			});
		})(jQuery);
	</script>
 <?php
}, 999);
```
In a text or code block, add this markup to render the gallery link and the actual gallery container containing a set of images.
```
<div class="gallery-link">
    <a href="#">Open Gallery</a></div>
<div class="gallery" style="display: none;">
    <a href="http://site.com/wp-content/uploads/2021/02/image-1.jpg">1</a>
    <a href="http://site.com/wp-content/uploads/2021/02/image-2.jpg">2</a></div>
```
So when the Open Gallery link is clicked, it will open all images inside the gallery container.

You may also have to use this css code to make sure that the opacity of the gallery items in the lightbox are set properly.
```
.mfp-ready .mfp-figure {
	opacity: 1;
}
```
Based on: https://github.com/dimsemenov/Magnific-Popup/issues/113

Best regards,
Ismael
- This reply was modified 3 years, 8 months ago by Ismael.
February 17, 2021 at 4:54 pm #1281807

Cloudypro
Participant

Hello @Ismael
Thank you

It worked, however i have a question

am i supposed to add a link instead of the # ?
In case the answer is yes, then this link will not open, only the image links inside the gallery will open
In case the answer is no, then clicking on the link will take me to the top of the page and displays no image, just an opacity background

Please advise !

February 19, 2021 at 1:00 pm #1282200
Ismael
Moderator
Hi,

Glad it is working.

You do not have to adjust anything aside from the image links inside the gallery container. Please note that this line..
```
$(this).next().magnificPopup('open');
```
.. looks for the next element after the gallery-link container, which is the gallery container and includes any link tag inside the gallery container in the lightbox preview.

And do not forget to add the css code above to set the opacity of the mfp-figure container.

Best regards,
Ismael
February 19, 2021 at 2:20 pm #1282226

Cloudypro
Participant

Hello Ismael

But as i mentioned, when i click on the initial link, i get a scroll up to the top of the page with none of the images in the container loading

when i replace the # with a link, let’s say a link to photo A, and in my container i have 2 other links for photos B, C, i do not get this scroll up to the top of the page problem, but i do get both images B and C showing

What i am trying to say, is that if i do not replace the hashtag with any other link, then i do not have this code working … rather it scrolls me up to the top of the page with no images to display

Please advise
Is it maybe clashing with this solution provided by both you and @Guenni007

Lightbox

February 22, 2021 at 2:10 pm #1282804

Ismael
Moderator

Hi,

Thank you for the update.

Would you mind if we check the page where this has been implemented? Did you disable the file compression and purge the cache after adding the recommended css code? It is possible that no images are showing because the opacity of the mfp-container is still set to 0.

Best regards,
Ismael

February 22, 2021 at 2:37 pm #1282810

Cloudypro
Participant

Hello Ismael

Thank you for the answer !
I have tried the opacity and it did not work .. what concerns me is not the opacity rather the scroll up to top

Anyway i have managed to go the other way around and replaced the hash tag with a link for a welcoming message just in case it did open somewhere else on different browsers .. and people can understand from this welcoming message that they need to click “next” to see the album photos

Thank you Ismael

February 23, 2021 at 1:23 pm #1283074

Ismael
Moderator

Hi,

Alright. Glad to know that you have found a solution that works for you. Let us know in another thread if you need anything else.

Have a nice day.

Best regards,
Ismael
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Link to Album Lightbox’ is closed to new replies.