Установки FancyBox размеров изображений

Question

У меня есть галерея FancyBox, которая делает ссылку от одного образа загрузки галереи с еще 4 изображений в нем, используя следующий 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> 

В HREF изображений являются большими изображениями отображаются, Изображения src - это миниатюры. Я знаю, как установить размеры изображения миниатюр в JavaScript используется для вызова 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 

Однако я не знаю, как изменить размер отображаемых изображений. Лучше это делать

1/в javascript согласно эскизам.

2/в CSS (если это так как я связать этим конкретным образом?)

3/просто установить фактический файл изображения на правильный размер, прежде чем он даже попадает на веб-страницу, так что веб-страница может просто покажите его немодифицированным.

Из этих методов выше, что является лучшей практикой в ​​целом, а не только с Fancybox? Я никогда не понимал размеров изображений на веб-страницах, но я бы предположил, что если бы CSS или javascript изменили размер изображения, весь (иногда довольно большой) размер файла должен был быть загружен и затем изменен, тогда как если бы изображение было меньше начнем с того, что это будет меньшая, быстрая загрузка. Верный??

Answer 1

Номер 3 - это путь, предполагающий, что вы не делаете какую-то безумную предварительную обработку на сервере, чтобы получить его там. Если вы знаете, что ваши изображения будут 75x75, сохраните их как 75x75 изображений.

Я бы предпочел CSS, если приведенное выше не применяется: вам не нужно ждать, пока объекты DOM будут готовы до того, как размер будет установлен, а отладка на стороне клиента будет немного проще.

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

Все ваши предположения относительно размеров изображений абсолютно правильны. Вы также имеете дело с несогласованностью масштабирования изображения в браузерах. Идеальное решение - отображать только тот же размер оригинального изображения. Конечно, это не всегда возможно/реалистично (дизайн макета жидкости и т. Д.).

На данный момент, однако. Заставьте его работать, вытащить все из двери, оптимизировать позже. Если вы не работаете над healthcare.gov, то это не совсем правильный подход;)