Как увеличить картинки по клику на неё?

Question

[forven]

Наверно кажется что вопрос банален, но всё же)
Как увеличить картинку при клике на неё ?
Например будут миниатюры картинки отображаться, а при клике увеличение -но как сохранить пропорции картинки ? Или же просто подгрузить и миниатюры и оригиналы на страницу, а как сделать так чтобы открывались оригиналы только при клике -где они храниться будут то ?

Answer 1

[sasha1992]

Вам поможет fancybox
он прост в освоении:

1. Скачиваешь и подключаешь fancybox
   
2. размещаешь миниатюры, пример:
   

   <a class="fancybox" href="image_big.jpg">
       <img src="image_small.jpg" width="100" height="100" alt=""/>
   </a>

   
   
   
3. и вставляешь код:
   

   <script type="text/javascript">
   jQuery(document).ready(function() {
           jQuery(".fancybox").fancybox();
   });
   </script>

   
   
   

Answer 2

[Глюкъ Виртуален]

Главное продумать где будут "храниться оригиналы" и нужно ли подсасывать их заранее.
Все остальное потом.

Comments

[forven]

Храниться на сервере в файловой системе)
А вот про подсасывание я как раз и не знаю) Готов рассматривать варианты

[Глюкъ Виртуален]

forven: дык тут все просто:

.если это у вас будет чото типа фотостока, где каждую фотку скорее всего будут смотреть в полном размере — смело берите оригинал и для превью тупо задавайте ему масштабирование
.если это у вас интернет-магазин, где смотрят дай бог 10% фоток — тут уже без извращений не обойтись

Наименьшее из извращений — взять какую-нть галерейку (например у меня prettyPhoto) и грузить все фотки в нее. Тогда в превью у вас будет чото типа mykotik-small.jpg, а при клике будет подгружаться mykotik-original.jpg.

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

[forven]

Глюкъ Виртуален: сайт недвижимости)

[Глюкъ Виртуален]

forven: то есть интернет-магазин.
Значить из этого сценария и исходите:
.на страницу со штабелем грузятся превьюшки примерно 150х150
.там живет некая галерейка, которая по клику на превьюшку тянет фуллсайз и сама же его показывает
У этих превьюшек миллион настроек — тут и сохранение пропойций, и подстройка под viewport, и мобильные, и дебильные версии, итд, итп.
Да вон посмотрите как у меня сделано motokofr.com/product.php?id_product=2751 — вы это имели в виду?

Answer 3

[Misha7]

Пропорции сохранить? Да просто получить javascript -ом длину и ширину.
new_height = new_width * height / width ;
new_width - Новая ширина (большая).
А увеличить размер можно jquery методом click.