-
AuthorPosts
-
February 14, 2021 at 2:04 pm #1280414
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 elseI hope there is a solution you can guide me with
Thanks
February 17, 2021 at 3:03 pm #1281752Hey 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, 10 months ago by Ismael.
February 17, 2021 at 4:54 pm #1281807Hello @Ismael
Thank youIt 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 backgroundPlease advise !
February 19, 2021 at 1:00 pm #1282200Hi,
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,
IsmaelFebruary 19, 2021 at 2:20 pm #1282226Hello 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 @Guenni007February 22, 2021 at 2:10 pm #1282804Hi,
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,
IsmaelFebruary 22, 2021 at 2:37 pm #1282810Hello 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 topAnyway 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 -
AuthorPosts
- The topic ‘Link to Album Lightbox’ is closed to new replies.