Простой плагин JavaScript / jQuery для быстрого просмотра изображений

Question

Есть ли какой-нибудь хороший JavaScript / jQuery плагин, который будет "быстро просматривать" изображение при нажатии?

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

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

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

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

Answer 1

Это может быть тот, который вы ищете:

http://gettopup.com/

Надеюсь, это поможет.

Answer 2

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