Ширина/Высота открытого изображения (Галерея)

Question

Im работает над галереей сайта, которая сделана из блока миниатюр, отображающего все фотографии и раздел для отображения определенного изображения.

Это код, который я использую для отображения уменьшенного изображения и изображения в его реальном размере.

<a class="thumb" name="tuzla1" href="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" title="Tuzla"> 
<img height="75" width="75" src="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" alt="Tuzla" /> 
</a> 

Проблема заключается в следующем: я не могу придумать ничего, чтобы установить размер открытого изображения. Настройка размера миниатюр в порядке: height = "75" width = "75", но размер открытой - проблема.

Answer 1

Используя этот метод, вы не можете установить размер изображения, на которое вы ссылаетесь. Он будет открыт в браузерах без связанного с ним HTML, поэтому он будет открыт в полном размере (или масштабируется в зависимости от браузера).

Решение - это ссылка на страницу, содержащую изображение. Это позволяет вам устанавливать код, определяющий размер изображения. Однако это ручной процесс - для 500 изображений потребуется 500 пользовательских страниц. Не идеально.

Если вы усложняетесь, вы можете построить сценарий и передать его и имя изображения, высоту и ширину, а затем динамически построить страницу для отображения изображения с заданной высотой и шириной. Затем вы можете отобразить произвольное количество изображений с 1 скриптом.

Другой способ пойти с плагином lightbox, который позволяет вам поместить полноразмерное изображение в коробку поверх верхней части страницы. Вероятно, вы видели этот метод, используемый на Facebook или других сайтах - он популярен и не требует больших усилий. Мне это нравится, потому что вам не нужно оставлять страницу, на которой вы находитесь, и вы можете показывать много фотографий на довольно компактной странице.