title: Setting Fancybox image sizes
body: <p>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:</p>
  
  <pre><code>&lt;div id="gallery"&gt;
      &lt;a class="fancybox1" href="exampleimages/a1b.jpg"&gt;&lt;img src="exampleimages/a1s.jpg" alt=""/&gt;&lt;/a&gt;
  
      &lt;div class="hidden"&gt;
      &lt;a class="fancybox1" href="exampleimages/a2b.jpg"&gt;&lt;img src="exampleimages/a2s.jpg" alt=""/&gt;&lt;/a&gt;
      &lt;a class="fancybox1" href="exampleimages/a3b.jpg"&gt;&lt;img src="exampleimages/a3s.jpg" alt=""/&gt;&lt;/a&gt;
      &lt;a class="fancybox1" href="exampleimages/a4b.jpg"&gt;&lt;img src="exampleimages/a4s.jpg" alt=""/&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>$(document).ready(function() {
  $(".fancybox1")
      .attr('rel', 'gallery')
      .fancybox({
          prevEffect  : 'none',
          nextEffect  : 'none',
          helpers : {
              title   : {
                  type: 'outside'
                         },
              thumbs  : {
                  width   : 75,
                  height  : 75
                          }
                      },
  
          padding : 0
      });//endfancy1
  </code></pre>
  
  <p>However I dont know how to change the size of the displayed images. Is it better to do it</p>
  
  <p>1/ in the javascript as per the thumbnails.</p>
  
  <p>2/ in CSS (if so how do i link to this specific image?)</p>
  
  <p>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.</p>
  
  <p>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??</p>