Make Fancybox pop-up images larger

[nonnymo]

I need the large pop-up images that come when you click on the main image of a product to be larger. The CSS for the #fancybox-content is set in the element itself and although I can override that, since I'm trying to override the height it warps some of the image widths when I do. Overriding to 100% does absolutely nothing so I've had to do it in pixels which is why it's warping the widths for images with smaller heights than what I've set.

There is a script that is set in the page source as follows:
<script id="popups_js" type="text/javascript"> //<![CDATA[
   jQuery(document).ready(function($) {
      
         $('a.ask-a-question, a.printModal, a.recommened-to-friend, a.manuModal').click(function(event){
              event.preventDefault();
            $.fancybox({
              href: $(this).attr('href'),
              type: 'iframe',
              height: 550
              });
            });
         
   });
//]]> </script>

That height:550 I believe is what is causing the images to be smaller than I want them to be but I have no idea how/where to change this. Many of the images on the site are portrait aspect images and a height of 550 does not make for a very large portrait aspect image. In fact it is not much larger than the main image which was clicked to get to it.

Any help on this would be very much appreciated.

[Spiros Petrakis]

Hi,

the above code has nothing to do with the image pop up, can you please provide a link to see how your images are displayed now?

[nonnymo]

Sorry I haven't responded sooner but I didn't have notifications on and only just saw your reply. Here is a link to a page which has one of the portrait aspect images: LINK REMOVED . This is in a temporary directory until everything is ready to move to the main live site which I hope to do within the next week so this example might not be available for long.

As you can see the pop-up image is not much bigger than the image on the page itself and I would minimally like to have the height at 630px for the portrait aspect images.

[jenkinhill]

I just looked at this and the modal image is displaying for me at 472px × 793px, scaled from an original 728px × 1,222px, and is plenty big enough, and at 793px the height I see is above your "minimum" of 630px. The image has a file size of 383.28 kB which is on the large size, ie it has not been well optimised before uploading.

I used Firefox and Edge browsers on Win10 with a monitor display set to 1920x1080px. Screen grab attached.

[nonnymo]

Thank you for your response, jenkinhill,

Well, yes, if you view it on a large monitor it will be larger than 630px height but most people, including me, aren't viewing it on a screen that size. My monitor is 1366x768 and the image is 530px in height which is simply too small to see the detail of the image. There is unused space of approx. 100 pixels within the browser window and minimally I would want to have the rest of that space available to me to use for the image rather than just wasted space with nothing in it. Ideally I would actually like it to be larger than the browser window so that the image can be viewed in even greater detail and I had tried the alternative in VM - facebox which it defaults to if you say not to use fancybox - and it did just what I wanted but my client who uses an iMac got a very strange result when I used that so I couldn't use it.

Somewhere the height it being set in the element to adjust it to slightly less than the full height of the window but I have looked everywhere that I can think of to find out where this is being set and I simply can't find it.

[GJC Web Design]

the height is inserted programatically in the containing div depending on your browser viewport

<div id="fancybox-content" style="border-width: 10px; width: 303px; height: 509px;"><img id="fancybox-img" src="http://lula-mun.com/joomla3/images/stories/virtuemart/product/0049.1_asilah_220x135x1cm.jpg" alt=""></div>

it is set in the  http://lula-mun.com/joomla3/components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.pack.js?vmver=8847 js script so that it is responsive

you need to study the http://fancybox.net/api to pass some options to it

perhaps something like
jQuery(".fancybox").fancybox({'width':400,
                         'height':300,
                         'autoSize' : false});

[jenkinhill]

As GJC says the image is sized according to the containing div set by your browser window/screen resolution. If you use Firebug to look at the css for the image itself it is:

#fancybox-img {
    border: medium none;
    height: 100%;
    line-height: 0;
    margin: 0;
    outline: medium none;
    padding: 0;
    vertical-align: top;
    width: 100%;
}

You could add  min-height:630px;  so the image would never be shorter than that, but it will overflow the container div. It will also make landscape images wider, possibly screwing the display on a mobile, but that's your choice.

[GJC Web Design]

perhaps a 3rd party "magnifier" plugin would better suit your needs if u want clients to see high def. detail?

this uses the jquery zoom plug->  http://www.jacklmoore.com/zoom/
https://www.vioolverkoop.nl/aanbiedingen/aanb/nieuw-in-de-collectie/engelse-viool-1800-detail

[nonnymo]

Thank you jenkinhill and GJC for your responses.

Jenkinhill - yes, I was aware that the image was set based on the browser window/screen resolution but, as I mentioned, it is not taking up the full space, and I have been trying to find out out how to do that. And I had already tried the min-height:630px and, as you correctly pointed out, it distorted the landscape images so I had to remove it.

JGC - I don't have enough knowledge of Javascript to figure out what I need to add to the js file and the bit you suggested doesn't look it would work as it would force both height and width to be specific sizes. I do like the magnifier plugin, though, and may suggest this to my client.

It seems to me that it should not be so complicated to be able to show a bit more of the image in the pop-up window. The image does not go full height and somewhere in the Javascript code I should be able to change that but, as I've said, I don't know enough Javascript to figure out where that is. I was hoping someone else would but I guess not. Thanks anyway.

[GJC Web Design]

the info u need is here:

you need to study the http://fancybox.net/api to pass some options to it

perhaps something like
jQuery(".fancybox").fancybox({'width':400,
                         'height':300,
                         'autoSize' : false});

try...

[nonnymo]

Just in case anyone is interested, I managed to solve my problem using CSS after all without distorting the images. Here's what I used:
#fancybox-outer {background:transparent !important;}
#fancybox-bg-e {background-image: none !important;}
#fancybox-bg-se {background-image: none !important;}
#fancybox-bg-s {background-image: none !important;}
#fancybox-bg-w {background-image: none !important;}
#fancybox-bg-nw {background-image: none !important;}
#fancybox-content {border-width:0px !important; height:620px !important; width:auto !important; min-width:500px; margin-top:-20px !important;}
#fancybox-img {width: auto !important; height: auto !important; max-height:620px;}