I have a Fancybox gallery which makes a link from one image load a gallery with 4 more images in it using the following html:

<div id="gallery">
    <a class="fancybox1" href="exampleimages/a1b.jpg"><img src="exampleimages/a1s.jpg" alt=""/></a>

    <div class="hidden">
    <a class="fancybox1" href="exampleimages/a2b.jpg"><img src="exampleimages/a2s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a3b.jpg"><img src="exampleimages/a3s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a4b.jpg"><img src="exampleimages/a4s.jpg" alt=""/></a>
    </div>
</div>

The href images are the big images displayed, the src images are the thumbnails. I know how to set the thumbnail image sizes in the javascript used to call the fancybox:

$(document).ready(function() {
$(".fancybox1")
    .attr('rel', 'gallery')
    .fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
                       },
            thumbs  : {
                width   : 75,
                height  : 75
                        }
                    },

        padding : 0
    });//endfancy1

However I dont know how to change the size of the displayed images. Is it better to do it

1/ in the javascript as per the thumbnails.

2/ in CSS (if so how do i link to this specific image?)

3/ just set the actual image file to the correct size before it even gets to the webpage, so that the webpage can just display it unmodified.

Of these methods above, which is best practice in general, not just with Fancybox? Ive never really understood image sizes in webpages - but I'd presume that if the CSS or javascript were to resize the image, the whole (sometimes quite large) file size would have to be loaded and then resized whereas if the image was smaller to begin with it would be a smaller, quicker download. Correct??

I have a Fancybox gallery which makes a link from one image load a gallery with 4 more images in it using the following html:

<div id="gallery">
    <a class="fancybox1" href="exampleimages/a1b.jpg"><img src="exampleimages/a1s.jpg" alt=""/></a>

    <div class="hidden">
    <a class="fancybox1" href="exampleimages/a2b.jpg"><img src="exampleimages/a2s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a3b.jpg"><img src="exampleimages/a3s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a4b.jpg"><img src="exampleimages/a4s.jpg" alt=""/></a>
    </div>
</div>

The href images are the big images displayed, the src images are the thumbnails. I know how to set the thumbnail image sizes in the javascript used to call the fancybox:

$(document).ready(function() {
$(".fancybox1")
    .attr('rel', 'gallery')
    .fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
                       },
            thumbs  : {
                width   : 75,
                height  : 75
                        }
                    },

        padding : 0
    });//endfancy1

However I dont know how to change the size of the displayed images. Is it better to do it

1/ in the javascript as per the thumbnails.

2/ in CSS (if so how do i link to this specific image?)

3/ just set the actual image file to the correct size before it even gets to the webpage, so that the webpage can just display it unmodified.

Of these methods above, which is best practice in general, not just with Fancybox? Ive never really understood image sizes in webpages - but I'd presume that if the CSS or javascript were to resize the image, the whole (sometimes quite large) file size would have to be loaded and then resized whereas if the image was smaller to begin with it would be a smaller, quicker download. Correct??

• javascript
• jquery
• css
• image
• fancybox-2

• 1). You don't really need to have thumbnails in your hidden div, it only adds overhead to the page load so <a href=".."></a> would be enough (for the hidden links.) 2). The displayed images (in fancybox) can only be displayed in two formats: a). Resized to fit the view port (option fitToView: true (default) ) OR in their original size (option fitToView: false) – JFK Commented Feb 11, 2014 at 5:43
• @JFK I take your point about the hidden thumbnails - it was a copy-and-paste job an the client hasnt decided which he wants as the main image yet! Nice to know about the fitToView: options... Although if it is set to true, and for example three images were 800x600, 600x800 and 150x150 how does it cope with this? I presume if the images are smaller than the viewport it wont scale them up, just display them smaller, and if one of the dimensions were bigger then it would reduce the whole image to fit that in, but keeping the aspect ratio? – Giovanni Commented Feb 11, 2014 at 20:01

1 Answer 1

Number 3 is the way to go, assuming you're not doing some crazy serverside preprocessing to get it there. If you know your images will be 75x75, save them as 75x75 images.

I'd personally prefer CSS if the above doesn't apply: You don't have to wait for the the DOM objects to be ready before the size is set, and client-side debugging will be a little easier.

.gallery .fancybox1 img
{
    width: 75px;
    height: 75px;
}

All of your assumptions about image sizes are absolutely correct. You'd also be dealing with image scaling inconsistencies across browsers. The ideal solution is to only ever display the exact same size of the original image. Of course, that's not always possible/realistic (fluid layout designs, etc).

At this point, though. Make it work, get everything out the door, optimize later. Unless you're working on healthcare.gov, then that's not the right approach at all ;)