CSS Simple Photo Gallery Вопрос

Question

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

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

Есть ли способ сделать это с чистым CSS и без JavaScript? Можно ли также предварительно загрузить все большие изображения, чтобы при каждом нажатии на миниатюру большое изображение в середине просто всплывало вверх?

Заранее спасибо за любую помощь! Я с нетерпением жду участия здесь часто!

Answer 1

Есть ли способ сделать это с чистым CSS и без javascript?

Это возможно, но не поддерживается в браузерах.

Вы можете сослаться наизображения и используйте : target , чтобы изменить свойство отображения с none на block.

Проблема заключается в том, что если браузер поддерживает display (т.е. почтивсе они), но не :target (т.е. их много), тогда некоторые изображения будут просто недоступны.

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

Это позволит этого достичь.

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

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

Answer 2

A google search вернул некоторые методы, использующие чистый CSS, но я бы предложил использовать плагин jquery, например galleria . Плагины JQuery делают это легко.

Answer 3

Не думаю, что есть хороший способ сделать это с no Javascript.

С минимальным Javascript вы можете скрыть все большие изображения и использовать onClick на миниатюрах, чтобы скрыть соответствующее изображение.

Используя больше Javascript, вы можете продолжать изменять атрибут src большого изображения и предварительно загружать изображения, используя также Javascript (см. http://www.pageresource.com/jscript/jpreload.htm).