-
Posts
-
Hi –
1. I’m trying to build a simple image gallery of individual homes for a real estate website.
I want the images to appear in blocks of 4 – on a large screen – with title/caption beneath, and then stack appropriately on mobile devices, e.g. one above the other on a smart phone. This I have achieved with the masonry gallery. Link attached below.2. Next, I want people to be able to click one of the home images and have a lightbox appear with additional images OF THAT SPECIFIC HOME which they can then scroll through for quick viewing. Currently selecting an image of a home will only display a lightbox of all the homes in the masonry gallery which is not what I’m trying to achieve.
3. Next, if possible, I would like to add an additional link or button – maybe in the title/caption area for the home – which leads to a specific URL for that specific home. I know I can achieve this by setting the custom URL link on the image itself, however, I want to do both the lightbox and the URL link!
I’ve attached the link to the page I am working on. If you navigate to Listings, you will see the 4 homes – we will be featuring more with the “Load More” option.
Clicking on the first image in the gallery shows how a lightbox is loaded, but it features all the homes in the masonry gallery. This is where I’d like to have a specific lightbox of images for that specific home to display.
Clicking on the second image in the gallery shows how a direct link can be made to a separate full page of information on the home. However, being able to achieve both options is the goal so that people can quickly preview images of a home and then select to go to that individual property’s page.We’ve looked at a number of different slider capabilities/plugins and we can’t seem to find anything that allows us to accomplish our goal. So far the Masonry Gallery gives us the look we want.
Thank you for any assistance.
Hi smallisland!
Thank you for using Enfold.
Sorry for the delay. There is no element available in the builder that can do this options by default but we can try the following method. First, add a color section in the page then add a unique id in the Section ID field. Use “section-gallery” for example. Add a code or text block inside the color section then use the following code:
<div id="av-grid-lightbox" class="av-layout-grid-container entry-content-wrapper main_color av-flex-cells"> <div class="flex_cell no_margin av_one_fourth av-zero-padding" style="vertical-align: top; padding: 0;"> <div class="flex_cell_inner"> <div class="avia-image-container av-styling- avia-builder-el-6 avia-builder-el-no-sibling avia-align-center "> <div class="avia-image-container-inner gallery-wrap noLightbox"> <a class="galleryItem" href="http://dummyimage.com/600x200/000/fff.jpg" data-group="1"> <img class="avia_image " title="Abducted (131)" src="http://dummyimage.com/600x200/eee/000.jpg" alt="" /> </a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="1"></a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="1"></a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="1"></a> </div> </div> </div> </div> <div class="flex_cell no_margin av_one_fourth el_after_av_cell_one_fourth el_before_av_cell_one_fourth av-zero-padding " style="vertical-align: top; padding: 0;"> <div class="flex_cell_inner"> <div class="avia-image-container av-styling- avia-builder-el-6 avia-builder-el-no-sibling avia-align-center "> <div class="avia-image-container-inner gallery-wrap noLightbox"> <a class="galleryItem" href="http://dummyimage.com/600x200/000/fff.jpg" data-group="2"> <img class="avia_image " title="Abducted (131)" src="http://dummyimage.com/600x400/000/fff.jpg" alt="" /> </a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="2"></a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="2"></a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="2"></a> </div> </div> </div> </div> <div class="flex_cell no_margin av_one_fourth el_after_av_cell_one_fourth el_before_av_cell_one_fourth av-zero-padding " style="vertical-align: top; padding: 0;"> <div class="flex_cell_inner"> <div class="avia-image-container av-styling- avia-builder-el-6 avia-builder-el-no-sibling avia-align-center "> <div class="avia-image-container-inner gallery-wrap noLightbox"> <a class="galleryItem" href="http://dummyimage.com/600x200/000/fff.jpg" data-group="3"> <img class="avia_image " title="Abducted (131)" src="http://dummyimage.com/600x400/eee/000.jpg" alt="" /> </a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="3"></a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="3"></a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="3"></a> </div> </div> </div> </div> <div class="flex_cell no_margin av_one_fourth el_after_av_cell_one_fourth avia-builder-el-last av-zero-padding " style="vertical-align: top; padding: 0;"> <div class="flex_cell_inner"> <div class="avia-image-container av-styling- avia-builder-el-6 avia-builder-el-no-sibling avia-align-center "> <div class="avia-image-container-inner gallery-wrap noLightbox"> <a class="galleryItem" href="http://dummyimage.com/600x200/000/fff.jpg" data-group="4"> <img class="avia_image " title="Abducted (131)" src="http://dummyimage.com/600x200/000/fff.jpg" alt="" /> </a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="4"></a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="4"></a> <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="4"></a> </div> </div> </div> </div> </div>After that, add the following php code in the functions.php file and css code in the Quick CSS field:
PHP:
// custom lightbox function add_custom_script_lightbox(){ ?> <script> (function($){ $(document).ready(function() { var groups = {}; $('.galleryItem').each(function() { var id = parseInt($(this).attr('data-group'), 10); if(!groups[id]) { groups[id] = []; } groups[id].push( this ); }); $.each(groups, function() { $(this).magnificPopup({ type: 'image', closeOnContentClick: true, closeBtnInside: false, gallery: { enabled:true } }) }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_custom_script_lightbox');CSS:
.mfp-ready .mfp-figure { opacity: 1; } .galleryItemSet { display: none; } #section-gallery .container, #section-gallery .template-page { padding: 0; }The gallery set is distinguished by the data-group attribute. Let us know if that’s what you’re looking for.
Regards,
IsmaelHi Ismael,
I’m sorry I never thanked you for the time you took to pass this code on. I tried it and was unable to get it to work correctly. Fortunately the client moved away from this idea so I didn’t have to bother you again with it.
Thanks again for the great service and support!
- You must be logged in to reply to this topic.