Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1429887

    Hi,

    We are creating a portfolio photograph. I would like go directly to Lightbox gallery.
    This is the journey now:
    1) The portfolios:

    2) Click in the first Balmain

    3) and you have to click in one image to trigger the Lightbox.

    I would like go directly from the 1 to 3 no open the portfolio gallery but open directly the Lightbox.

    Could you help me?

    Thanks advance,

    Antonio.

    #1429897

    Hey Antonio,

    Thank you for the inquiry.

    This should be possible with a custom script. Please add this code in the functions.php file.

    function ava_custom_script()
    {
        ?>
    	<script>
    		(function($) {
    	           $(document).ready(function () {
                           // trigger masonry lightbox on load
                           $('.av-masonry-container .av-masonry-entry:nth-child(1)').trigger('click')
                       });
    		}(jQuery)); 
    	</script>
    	<?php
    }
    add_action('wp_footer', 'ava_custom_script');
    

    If you need to apply this modification to a specific Masonry element, you could apply a Custom CSS Class name to it and adjust the script accordingly.

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

    #1429900

    Hi Ismael,

    I have added the code but it do not works.
    Could you help me?
    Many thanks,

    BR,

    Antonio

    #1429988

    Hi,
    Try removing the code above and try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function trigger_masonry_lightbox_on_load() { ?>
      <script>
    window.addEventListener('DOMContentLoaded', function() {
    (function($) {
    	setTimeout(function () {
        $('.av-masonry-container .av-masonry-item-with-image.lightbox-added:first').trigger('click');
    	}, 100);
    }(jQuery));
    });
    </script>
      <?php
    }
    add_action( 'wp_footer', 'trigger_masonry_lightbox_on_load', 99 );

    In my test this seems to work quickly, but if you find it is not working try changing the delay 100 to a higher number like 500
    Enfold_Support_4421.jpeg
    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    If you still have trouble please include an admin login in the Private Content area so we can be of more assistance.

    Best regards,
    Mike

    #1430125

    Hi Mike,

    Many thanks works perfect! The only thing I have change is the animation of the gallery mansory to 10s to prevent see the gallery.
    We would like now that when close the light box come back to portfolios gallery no to the mansory.
    Sent you the password in the private content.
    Many thanks,

    BR,

    Antonio.

    #1430126

    Hi,

    We adjusted the code a bit in order to redirect the site to the actual masonry page after closing the lightbox.

    function ava_trigger_masonry_lightbox_on_load()
    { ?>
        <script>
        window.addEventListener('DOMContentLoaded', function() {
            (function($) {
                setTimeout(function () {
                    $('.av-masonry-container .av-masonry-item-with-image.lightbox-added:first').trigger('click');
                }, 100);
            }(jQuery));
        });
    
        (function($) {
            $(document).ready(function () {
                $('.av-masonry-entry').on('mfpOpen', function(e /*, params */) {
                    $('.mfp-close').on('click', function(e) {
                        e.preventDefault();
                        const redirect = "https://www.95mctest.es/product2/"
                        window.location.href = redirect
                    })
                });
            });
        }(jQuery));
        </script>
        <?php
    }
    add_action( 'wp_footer', 'ava_trigger_masonry_lightbox_on_load', 99 );

    You can adjust the redirect URL by editing this line.

     const redirect = "https://www.95mctest.es/product2/"
    

    Best regards,
    Ismael

    #1430127

    Hi Israel,

    Many thanks. The issue is we have 2 portfolios Product and Personal.
    ¿It possible back to previos page to work in both portfolios.?
    Thanks advance,

    BR,

    Antonio.

    #1430169

    Hi Ismael,

    Now its working I change it to back to previos page.

    function ava_trigger_masonry_lightbox_on_load()
    { ?>
    <script>
    window.addEventListener(‘DOMContentLoaded’, function() {
    (function($) {
    setTimeout(function () {
    $(‘.av-masonry-container .av-masonry-item-with-image.lightbox-added:first’).trigger(‘click’);
    }, 100);
    }(jQuery));
    });

    (function($) {
    $(document).ready(function () {
    $(‘.av-masonry-entry’).on(‘mfpOpen’, function(e /*, params */) {
    $(‘.mfp-close’).on(‘click’, function(e) {
    e.preventDefault();
    window.history.back();
    window.location.href = redirect
    })
    });
    });
    }(jQuery));
    </script>
    <?php
    }
    add_action( ‘wp_footer’, ‘ava_trigger_masonry_lightbox_on_load’, 99 );

    Many thanks,

    BR

    Antonio

    #1430226

    Hi,

    Great! Glad to know that you’ve found a working solution. Please let us know if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Open Lightbox directly’ is closed to new replies.