Изменение размера изображения при нажатии

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

Тем не менее, теперь я пытаюсь сделать изображение более крупным по щелчку и перейти к нормальному размеру, когда Hover-away. В любом случае я могу сделать это с JQ? Я не уверен, что могу сделать это с помощью CSS.

Пожалуйста, обратите внимание на сайт и код, который я использую в данный момент: http://www.webdesignstudents.co.uk/students/loai_shehadeh/visual-identity.html

Спасибо заранее.

источник

2013-06-17 Anonymous

Вы говорите про модальное всплывающее окно? Как это ... http: //dinbror.dk/bpopup/ – KyleK

Я пытался сделать что-то вроде этого (но очень простого). http://tympanus.net/Development/GammaGallery/ Пожалуйста, попробуйте нажать на изображение и посмотреть, как он станет больше. –

J усть добавить класс на свой элемент:

<img src="img/image.jpg" class=imggallery>

Затем на вашем CSS добавить что-то вроде этого:

imggallery {width:60%;height:auto;} 
imggallery:hover {width:90%;height:auto;} 
imggallery:active {width:100%;height:auto;}

Или вы можете попробовать небольшую галерею как этот http://www.minigal.dk/minigal-nano.html

источник

2013-06-17 20:03:55 Cryptopat

Спасибо, мне больше нравится, когда я использую плагин. Ваш метод работает, но есть небольшая проблема. У меня там три столбца, вот как я получил это представление, причина, по которой у меня есть столбцы, а не создание изображений с плавающей точкой, заключается в том, что ширина изображений различна, и я хочу, чтобы они плавали, чтобы заполнить пробелы и просто перейти к наверху, сохраняя пустое пространство ... Как вы думаете, я могу что-то сделать, чтобы прокатиться по колонне или что-нибудь еще? Большое спасибо! –

Привет, я не уверен, не смотрю на ваш код, но если вам просто нужно отобразить изображение в другой позиции, используйте css-позиционирование: [code] imggallery: hover {width: 90%; height: auto; margin: -500 0 0 200; заполнение: 30 30 30 30} [/ code] – Cryptopat

Попробуйте этот плагин, он должен делать то, что вы хотите, и с большим количеством опций, чем то, что вы можете сделать в то же время, необходимое для реализации его самостоятельно :) http://leandrovieira.com/projects/jquery/lightbox/

источник

2013-06-17 20:01:17 Precastic

Может хотите попробовать FancyBox для этого ...

http://fancybox.net/

Или Lightbox ...

http://leandrovieira.com/projects/jquery/lightbox/

источник

2013-06-17 20:02:28 KyleK