Расширение изображения в новом окне?

Question

Я только что быстро просмотрел свой вопрос и не смог найти ничего прямо на месте.

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

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

Спасибо заранее, - Danny B.

Answer 1

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

Проверьте это: http://colorpowered.com/colorbox/

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

Для этого требуется только некоторый базовый HTML и минимально сконфигурированный JQuery. Очень прост в использовании и создает приятный эффект.

Answer 2

Google вокруг использования ключевого слова lightbox. Большинство решений являются готовыми к использованию Javascripts. Просто включите один раз, назначьте некоторые идентификаторы/классы, выполните во время onload и все. Я лично хорошо знаком с Lightbox2 и jQuery Lightbox plugin.

Answer 3

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

href="javascript:window.open('myimage.png','_blank','toolbar=no,menubar=no,resizable=yes,scrollbars=yes')"

, который откроет новое автономное окно. Если вы ищете эффекты выцветания/изменения размера и т. Д., Попробуйте один из других опубликованных ответов.

Answer 4

Существует много способов, которыми вы могли бы это сделать. Основной HTML для вставки изображения со ссылкой на новое окно будет:

<a href="enlarged.html" target="_blank"> 
    <img src="photos/photo-name.jpg" /> 
</a> 

Но это справедливо немного сложнее, если вы хотите, чтобы иметь возможность динамически отображать большое количество фотографий. Если вы хотите самим закодировать это, вы захотите изучить что-то вроде PHP, чтобы автоматически выводить HTML-код для более 600 изображений. Затем вместо того, чтобы указывать ссылку для каждого на новую страницу, вы можете захотеть, чтобы загрузка изображений была прохладной, например, лайтбокс/цветной код javascript, некоторые из других ответов.

Одним из возможных альтернативных решений может быть поиск некоторых созданных сценариев фотоальбома. У меня нет такого опыта, поэтому я позволю кому-то сделать некоторые предложения по этому поводу.

Answer 5

Я решил пойти w/target = "_ blank" - Lightbox2 кажется, что было бы здорово, но я действительно не уверен, как его использовать и куда поместить весь код. Инструкции, которые я нашел для него, по-прежнему предполагают, что у пользователя есть некоторые стандартные знания в этой области, которых у меня сейчас нет. Таким образом, я буду придерживаться целевого/чистого подхода, пока не получу более привычное w/coding, а затем я перейду к Lightbox.

Еще раз хочу поблагодарить всех. Вы, ребята, всегда отвечаете быстро и точно.

С большим удовлетворением, - Danny B