Простой плагин JavaScript/jQuery, что изображения 'quicklooks'

Question

Есть ли какой-нибудь хороший JavaScript/jQuery плагин, который будет «quicklook» на клик?

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

В идеале это было бы задано, просто предоставив упомянутое изображение классу, а JavaScript/jQuery сделает все остальное.

Как на изображениях на изображениях на этой странице Apple.com, см. Первое изображение в разделе «Импорт».

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

Answer 1

Это может быть один, что вы ищете:

http://gettopup.com/

Я надеюсь, что это помогает.

Answer 2

Довольно легко использовать плагин диалога jQuery UI. Это предполагает, что ваш класс thumb уменьшает размер изображения до миниатюр, повторно используя один и тот же URL-адрес src для изображения. Если у большого пальца есть другой URL-адрес, т. Е. Это другое изображение, вам нужен способ сохранить изображение полного размера с помощью эскиза (пользовательский атрибут?) Или преобразовать эскиз эскиза в URL-адрес полного размера. Последнее тривиально, если вы говорите, добавьте «_thumb» к названию миниатюры изображения; просто используйте строку replace функция.

$('img.thumb').click(function() { 
    $('<div><img src="' + $(this).attr('src') + '" /></div>').dialog({ 
     autoOpen: true, 
     modal: true, // if you want it to be modal 
     close : function(event,ui) { 
      $(this).destroy(); 
     } 
    }); 
}); 

Вы можете увидеть что-то подобное в действии по адресу: http://cs-services.its.uiowa.edu/launchpad. Нажмите объявление в левом верхнем углу.

Answer 3

Вы можете попробовать мой лайтбокс http://jslightbox.felixhagspiel.de/ Он не требует jQuery и является отзывчивым и совместим с IE8. Вы можете просто добавить атрибут data-jslghtbx к своим изображениям, и он откроет их по щелчку. альтернативно вы можете передавать ссылки на большее изображение, подобное этому data-jslghtbx='img/lightbox/apple-big.jpg', поэтому вы можете использовать малогабаритные изображения для эскизов, которые откроют большие изображения в лайтбокс. Кроме того, вы можете использовать группы для отображения нескольких изображений.