Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 8, 2018 at 6:21 am #994688
    805ITS

    Hello,

    I have an issue with my website. The images displayed through the gallery are smaller in the lightbox than in the preview: http://prntscr.com/kg0n9i

    I went through the forum and I found someone who had a similar issue here :

    The support team suggested him to include this code in functions.php but it did not work for me :

    // lightbox fullsize
function lightbox_fullsize(){
?>
<script>
    jQuery(document).ready(function() {         
        jQuery('.avia-gallery-thumb').on('click',' a',function(){
            jQuery(document).find('.mfp-wrap figure img').css("max-height","");
        });  
        jQuery(document).on('click','.mfp-arrow',function(){
            setTimeout( function(){
                    jQuery(document).find('.mfp-wrap figure img').css("max-height","");                                   
                }, 180); 
        });
    });

</script>
<?php
}
add_action('wp_head', 'lightbox_fullsize');

    Can you help ? Thank you!

    August 9, 2018 at 11:57 am #995405
    Ismael

    Hey 805ITS,

    Thank you for using Enfold.

    The images (see private field) are actually the same but they’re being resized with css. You can add this in the Quick CSS field to adjust the width of the lightbox image.

    img.mfp-img {
    width: 85vw;
}

    If the image becomes a little blurry, you need to adjust the size of the “Large” thumbnail in the Settings > Media panel and then regenerate the images.

    Best regards,
    Ismael

    August 10, 2018 at 4:53 am #995800
    805ITS

    Thank you! It worked!! :)

    August 10, 2018 at 6:57 am #995826
    Rikard

    Hi,

    Great, glad you got it working :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    January 30, 2020 at 4:43 pm #1179979
    MichaelAlbany

    Rikard,

    I was having the same issue and using this code almost works. The problem is that it doesn’t take into consideration the portrait oriented images. Its fine for landscape orientation, but not portrait. This is in Lightbox mode only.

    And example of the issue can be seen here: https://michaelalbany.com/Kriesi-test/

    Is there additional CSS to accommodate?

    More infö in Private Content

    Thank you!
    Michael

    • This reply was modified 4 years, 9 months ago by MichaelAlbany.
    January 31, 2020 at 1:42 pm #1180261
    Ismael

    Hi,


    @MichaelAlbany    : The modification is not going to work well for portrait modes because the lightbox script automatically sets the maximum height of the images. You have to set the width to auto.

    We can override the default maximum height property, but the image will overflow outside the main container.

    img.mfp-img {
	width: 85vw;
	max-height: none !important;
}

    Best regards,
    Ismael

    January 31, 2020 at 5:19 pm #1180295
    MichaelAlbany

    This is a major problem then. Most of my clients are photographers and they will have both Portrait and Landscape oriented images, myself included.

    Small images of 1031 on a 27″ monitor (what most editors use) just won’t market artists properly. I tried your above code, not helping.

    Any other suggestions? The gallery options included in enfold is a very large part of its attraction.

    February 1, 2020 at 4:41 am #1180445
    MichaelAlbany

    Let me ask this, Is there a way to change the container size and what will that impact in a negative way?

    Thanks!

    PS – Or is there a better option such as a slider with thumbnails?

    • This reply was modified 4 years, 9 months ago by MichaelAlbany.
    February 3, 2020 at 5:22 am #1180791
    Ismael

    Hi,

    The default size in the lightbox without adding the modification above seems to be quite enough to exhibit the quality of the images (see link below).

    // https://imgur.com/a/xVkZKrn

    Please note that the css code above will not actually enlarge the image — it will only stretch it, but the actual dimension of the image will stay the same. If you want to change the default size of the lightbox thumbnail, go to the Settings > Media panel and adjust the dimension of the Large thumbnail. You’ll have to regenerate the images afterwards (https://wordpress.org/plugins/regenerate-thumbnails/), or upload them again.

    Best regards,
    Ismael

    February 4, 2020 at 3:08 am #1181122
    MichaelAlbany

    Regenerating the thumbnails AND the php code to change the optimizing of images fixed the issues.

    Thank you!

    February 4, 2020 at 7:41 pm #1181478
    Victoria

    Hi MichaelAlbany,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.