Стильные галереи пользуются достаточной популярностью как пользователей так и в разработчиков сайтов. На нашем блоге Вы не раз могли наблюдать уроки по созданию замечательных галерей при помощи CSS и jQuery, по этому сегодня мы продолжим рассматривать варианты галерей с различными эффектами jQuery, увидел интересный пример галереи с эффектом зума, при использовании jQuery, просто и  смотрится достаточно не плохо, и так смотрим что получилось..

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

Для начала нам нужно создать простую разметку изображений в виде div’ов.  Для того чтобы картинка показывалась полностью при наведении мыши, вставляем ссылку изображения.

Вторым этапом будет обертка CSS для ссылки и изображения, будут float left и иметь относительное положение. Изображение будет абсолютно позиционировано.

Вторым этапом будет обертка CSS для ссылки и изображения, будут float left и иметь относительное положение. Изображение будет абсолютно позиционировано.

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

Вот на этом и все, наша галерея готова, надеюсь урок Вам был интересен.

На главную