Tagged: image size, Lightbox
-
AuthorPosts
-
August 8, 2018 at 6:21 am #994688
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 #995405Hey 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,
IsmaelAugust 10, 2018 at 4:53 am #995800Thank you! It worked!! :)
August 10, 2018 at 6:57 am #995826Hi,
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,
RikardJanuary 30, 2020 at 4:43 pm #1179979Rikard,
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, 10 months ago by MichaelAlbany.
January 31, 2020 at 1:42 pm #1180261Hi,
@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,
IsmaelJanuary 31, 2020 at 5:19 pm #1180295This 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 #1180445Let 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, 10 months ago by MichaelAlbany.
February 3, 2020 at 5:22 am #1180791Hi,
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,
IsmaelFebruary 4, 2020 at 3:08 am #1181122Regenerating the thumbnails AND the php code to change the optimizing of images fixed the issues.
Thank you!
February 4, 2020 at 7:41 pm #1181478Hi MichaelAlbany,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.