Всплывающие изображения jquery: 39 всплывающих блоков и изображений для сайта на jquery – Отражение изображения с помощью jQuery.

39 всплывающих блоков и изображений для сайта на jquery

1. «FancyBox»

Отличная альтернатива LightBox с использованием jQuery.

2. javascript галерея «Awesome Box»

Поддерживает IE6. Возможна навигация с помощью клавиатуры: кнопка n (next) — следующее изображение; кнопка p (previous) — предыдущее.

2. Mootools отображение содерижмого в модальных окнах «Bumpbox 2.0»

Поддержка различных форматов: PDF, flv, swf, audio, HTML контент, поддержка фреймов.

3. jsImageBox

Компактный и несложный в подключении скрипт, который позволяет показывать увеличенные изображения во всплывающем блоке. Сайт на русском языке.

4. jQuery плагин «ColorBox»

Плагин резализован в пяти различных стилях. Для того чтобы посмотреть в действии с различным оформлением пройдитесь по ссылкам Examples от 1 до 5.

5. Visual Lightbox

Еще один скрипт из семейства лайтбокс. Есть возможность настраивать как миниатюры изображений, так и стиль отображения полноразмерного фото.

6. Всплывающее изображения в стиле лайтбокс «Simple Modal Box With JQuery»

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

7. javascript галерея «EnlargeIt!»

8. «LightWindow» всплывающего окна в стиле Lightbox

Возможно вывести во всплывающем окне информацию различных форматов: единичные изображения, галерею, медийные файлы, формы. На демонстрационной странице ссылки на различные варианты содержимого.

9. Плагин jQuery SuperBox

Еще одна альтернатива известному плагину LightBox. Нажмите на изображение на демонстрационной странице для просмотра скрипта в действии.

10. jQuery плагин «Facebox»

11. javascript плагин «FancyZoom»

12. «FancyZoom» с использованием библиотеки jQuery

13. jQuery плагин «YoxView» для показа изображений, flash и видео

Изумительный плавный эффект смены контента. На странице с описанием вы найдете ссылки на все демонстрационные примеры работы плагина.

14. Плагин «Floatbox»

15. «GreyBox»

16. «Highslide JS»

17. Mootools плагин «ImageZoom»

18. jQuery плагин «lightBox»

19. «Lightbox+»

При изменении размеров окна браузера меняются размеры изображения.

20. Плагин «LightBox2»

Использует javascript библиотеку Prototype.

21. «Lighter Box2»

22. jQuery плагин для отображения изображений «TopUp»

23. Mootools всплывающие модальные окна «SimpleModal»

Отображение различного контента в модальных окнах.

24. MediaBoxAdvanced

Отображение информации в модальных окнах с использованием Mootools: изображения, видео, анимация, социальные сервисы и др. 

25. Плагин «LyteBox»

26. Mootools плагин «Milkbox»

27. jQuery плагин «piroBox»

28. Плагин «PrettyPhoto» на jQuery

29. jQuery плагин 

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

30. Плагин «Zoomimage» 

jQuery плагин для показа изображений. При нажатии изображение  оно увеличивается. Навигацию между изображениями можно осуществлять с помощью стрелок. Есть возможность открыть одновременно несколько изображений на странице и перетаскивать их по экрану.

31. Mootools плагин «Sexy Lightbox»

32. «ShadowBox»

33. Плагин «SlideWindow»

34. Содержимое в модальных окнах «MultiBox» на Mootools

35. Mootools плагин «Slimbox»

36.Prototype плагин«Suckerfish HoverLightbox Redux»

37. ThickBox

38. jQuery плагин «CeraBox»

Еще один свежий профессиональный плагин с лайтбокс эффектом. 

39. TinyBox 2

10 jquery всплывающих описаний для изображений

1. jQuery плагин «Hover Zoom»

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

2. Плагин «Captify»

3. jQuery описание изображений  в галерее

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

4. jQuery реализация подписей изображений

Несколько вариантов реализации подписей для изображений, которые появляются при наведении на картинку курсора мыши.

5. jQuery эффект раздвижных дверей

При наведении на миниатюру на ее месте эффектно появляется описание.

6. jQuery плагин «Zoominfo»

При наведении курсора на изображение оно уменьшается и появляется название и описание фото.

7. jQuery плагин «Mosaic»

Реализация всплывающих описаний изображений при наведении курсора мыши. Предусмотрено 8 различных видов всплывающих подписей. Вы сможете их посмотреть на демонстрационной странице.

8. Всплывающие подписи изображений

При наведении курсора мыши на изображение выезжает краткое описание со ссылкой на подробную информацию.

9. Плагин для реализации подписи изображений

Еще один вариант реализации всплывающих подписей изображений при наведении курсора. Есть возможность выбрать из двух jQuery эффектов появления подписей.

10. Описание изображений «Preview window»

Плагин для подписи изображений. При наведении курсора мыши с анимированным эффектом появляется описание изображения. Для создания анимации используется jQuery.

Подготовлено по материалам

 

10 модальных окон на jQuery для адаптивного сайта

Cегодня мы рассмотрим 10 адаптивных lightbox библиотек jQuery.
Lightbox — это популярный способ показа изображений в модальном окне и его можно встретить во многих галереях на сайтах. Также модальные окна используются для показа диалога, видео и предупреждений об ошибках да и любую другую информацию, которую необходимо выделить.

На «Постовом» мы используем модальное окно с предложением подписаться на нашу группу вконтакте, что бы следить за обновлениями. Оно появляется единожды, когда вы уводите мышку с сайта и при закрытие больше появляться не будет, что бы не надоедать посетителям.
В этом топике собраны адаптивные решения jQuery для модальных окон.
Пишите комментарии и подписывайтесь на нашу группу и рассылку.

PhotoSwipe

Lightbox JavaScript. Можно настроить чтобы отображалась панель управления при открытии изображения. В этом режиме будет отображаться описание, и кнопки «во весь экран» и «поделиться». Поддерживает тачскрин.

Magnific Popup

Скрипт jQuery, который позволяет создать модальное окно для отдельного фото с различными свойствами или lightbox галереи, а также всплывающие окна с текстом, видео, Google maps и формой отправки.

Image Lightbox

Lightbox JQuery для галереи изображений. Адаптивный и легкий. Не содержит кнопок навигации, но поддерживает возможность нажатия/перетаскивания (как на сенсорных экранах) и навигацию с помощью стрелок на клавиатуре. Использует CSS свойства transform и transition.

Mini Lightbox

Lightbox в стиле минимализм. Увеличенное изображения появляется в модальном окне. Также можно использовать img атрибут data-image-opene, чтобы подключить большое изображение, которое будет открываться в лайтбоксе вместо миниатюры.

Lightcase

Небольшой гибкий лайтбокс jQuery для презентации разичных медиа форматов на сайте.

Yalb (Vanilla)

Yalb (Yet Another LightBox) использует чистый JavaScript. Анимация осуществляется с помощью CSS свойств transition и animation. Обратите внимание, что он может использоваться только в современных браузерах и не поддерживает IE9.

iLightBox

Плагин lightbox jQuery для HTML и WordPress. Показывает галерею в сплывающеи окне с миниатюрами вертикальным списком, прокрутка «вниз-вверх», добавлены кнопки «поделиться с…», поддержка нажатий, как в сенсорных устройствах и еще большое количество особенностей.

Featherlight

Очень легкий плагин lightbox jQuery размером до 6 Кб. В наличии стандартное модальное окно, настраиваемое (цвет фона и текста), всплывающее окно Ajax и iFrame.

jQuery lightGallery

Легкий jQuery lightbox для презентации фото и видео галереи. Особенности: поддерживает тачскрин, Youtube Vimeo Video и html5 видео, iframe, навигацию с помощью клавиатуры, слайд-эффекты и др.

Swipebox

Адаптивный jQuery плагин. Поддерживается почти всеми устройствами и браузерами. Включает навигацию с помощью клавиатуры, Легко настраивается с помощью CSS.

28 jQuery плагинов Lightbox

В этой статье собраны лучшие jQuery Lightbox плагины, которые помогут вам в создании красивых веб-сайтов.

Эти jQuery плагины используются для добавления на сайт всплывающих окон. Такие плагины являются очень мощным инструментом для любого веб-дизайнера и разработчика, поскольку помогают добиваться весьма красивых эффектов, придающих обычному сайту эффектный и привлекательный вид. Чтобы пользоваться jQuery плагином, вам нужны базовые знания JavaScript и jQuery. Если вы не знаете основ, то просто читайте описание плагина и следуйте инструкции.

LightZoom

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

PhotoSwipe

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

Lightbox для Bootstrap

Изначально лайтбокс плагин отсутствует в  Bootstrap. Lightbox for Bootstrap исправляет это. Если вы используете Bootstrap, рекомендуется использовать эту библиотеку. Плагин хорошо интегрируется с Bootstrap.

Strip

Strip уникальный лайтбокс плагин. Вместо наложения изображения, модуль лайтбокс скользит вместе с изображением от стороны в сторону, так что изображение не будет блокировать все содержимое. Strip поддерживает как изображения так и видео.

 baguetteBox.js

BaguetteBox — это библиотека JavaScript для создания адаптивных лайтбокс галерей. Легкая и совместимая с мобильной версией, ее легко кастомизировать и использовать плавные переходы изображений в CSS3.

Rebox

Rebox очень легкий и быстрый лайтбокс для контента. В основном, конечно, для изображений. Для инициализации плагина необходимо только подключить библиотеку JS и CSS.

LightCase

Lightcase прекрасный лайтбокс плагин. Поддерживает несколько видов анимаций, такие как: fade, elastic, zoom и scrolling. Кроме того, он также поддерживает различные виды медиа, включая Youtube Embed, HTML видео, SWF и форм ввода.

LightGallery

LightGallery — это легко настраиваемый jQuery плагин для создания адаптивной галереи. В нем есть абсолютно все, что Вам необходимо: просмотр в лайтбоксе, слайд-шоу, увеличение на весь экран, превьюшки. Также пользователь, который просматривает галерею, может сразу скачать картинку.

PrettyPhoto

В отличии от некоторых своих собратьев по цеху, PrettyPhoto не является комбайном по отображению чего угодно во всплывающем окне. Плагин создан и работает только с целью показа изображений – как одиночных, так и в составе набора (галереи), но от этого не становится менее привлекательным.

jQuery Lightbox Plugin

Плагин jQuery LightBox простой, изящный, ненавязчивый, не требует дополнительной разметки и используется для наложения изображений на текущей странице благодаря мощности и гибкости селектора jQuery.

Facebox

Facebox позволяет создавать диалоговые окна в стиле facebook, при этом допускается создавать диалоговые окна с помещением в них простого текста некоторых элементов, изображений, ajax страниц.

FancyBox 2

FancyBox 2 служит для создания фотогалерей и вывода другого контента в красивых модальных окнах. Если вы планируете на сайте и фотогалерею и размещение некоторого контента в модальных окнах, то обратите внимание на этот скрипт.

Slimbox 2

Slimbox 2 довольно легкий, умеет ресайзить картинки под размер окна, и настраивается просто.

Image Lightbox

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

rLightbox

RlightBox представляет собой jQuery UI mediabox, который способен отображать множество типов контента, включая изображения и видео из YouTube и Vimeo. Здесь есть множество уникальных свойств, включая Panorama и Live Re-size.

jQuery TosRus

jQuery TosRus — удобный и функциональный jQuery плагин для работы с видео и изображениями. Скрипт может выступать в роли лайтбокс-инструмента и горизонтального слайдера одновременно. Контент в модальных окнах по умолчанию отзывчивый. Адаптирован под сенсорные устройства.

Colorbox

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

Fluidbox

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

Swipebox

Swipebox – jQuery-плагин для стационарных компьютеров, смартфонов и планшетов. Он поддерживает сенсорное управление для мобильных устройств, навигацию с помощью клавиатуры для настольных устройств, CSS переходы с резервным переключением на управление JQuery, довольно прост в настройке.

jQuery Superbox

jQuery Superbox позволяет очень просто создавать лайтбоксы для изображений, групп изображений, внешних страниц, или определенного содержимого. Плагин полностью доступен и понятен, и использует атрибут «rel» для запуска скрипта и «href» для указания адреса изображения или страницы.

iLightbox

iLightbox — jQuery лайтбокс плагин с широкой поддержкой различных медиа форматов: в том числе видео, Flash / SWF, Ajax, фреймов и карт. Этот плагин также добавляет кнопки социальных сетей в верхней части, позволяя своим пользователям обмениваться его Facebook, Twitter или Reddit. Кроме того есть дополнительные настройки, чтобы увидеть, которые могут применены в различных случаях.

Venobox

VenoBox – это еще один адаптивный JQuery Lightbox плагин, который подходит для отображения изображений, iFrames, Google-Maps, Vimeo и YouTube видео. Плагин рассчитывает максимальную ширину изображения на экране и сохраняет пропорциональную высоту, даже если она больше, чем высота окна.

Lightview

Lightview позволяет вам легко создавать красивые всплывающие окна, используя jQuery. Вы можете усовершенствовать ваш медиа-контент автоматически или создавать всплывающие окна на ваш вкус, используя мощный API.

Fresco

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

Lightbox_me

Lightbox_me — плагин, реализующий возможность отображать любой элемент в качестве лайтбокса.

FlipLightbox

FlipLightbox — простенькая галерея изображений. При клике на превью, в лайтбоксе открывается полное изображение.

Magnific Popup

Magnific Popup — это удобный в работе плагин jQuery lightbox, сосредоточенный на производительности. Его главная цель – обеспечить удобство работы на любом устройстве.

Featherlight

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

Похожие записи

Топ 10 Плагинов jQuery для модальных окон

Модальные окна используются, чтобы отображать дополнительный контент в новом слое страницы (окне) поверх загруженного контента. Модальные окна также называют модальными диалогами, всплывающими диалогами, всплывающими окнами, диалоговыми блоками или модальными блоками. В большинстве случаев для создания модальных окон используется jQuery.

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

Плагины jQuery для модальных окон

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

На многих веб-сайтах вы также можете найти форму входа, форму обратной связи или любой другой вид формы, загружающейся в виде модального окна. Другой вариант использования модальных окон – загрузка в нём Google Maps, чтобы пользователи могли кликнуть и указать место на карте.

1. Likno Web Modal Windows Builder

   Likno Web Modal Windows Builder — это не только плагин. Это мощное WYSIWYG приложение (визуальный интерфейс с множеством опций), которое даёт вам возможность создавать любые виды модальных окон jQuery. Самое потрясающее, что вам не нужно знать ничего об исходном коде. Приложение создаёт весь код за вас. Поэтому даже если вы новичок или профессиональный программист, который хочет быстро создать много проектов, Likno Web Modal Windows Builder удовлетворит все ваши потребности.

   

2. fancyBox

   fancyBox – это плагин, который предлагает красивый и элегантный способ добавить функционал приближения для картинок, HTML и мультимедиа контента на ваши веб-страницы. Он построен на основе популярной JavaScript библиотеки jQuery и лёгок в установке и настройке.

   

3. Magnific Popup

   Magnific Popup — это удобный в работе плагин jQuery lightbox, сосредоточенный на производительности. Его главная цель – обеспечить удобство работы на любом устройстве.

   

4. bPopup

   bPopup — это небольшой по объёму плагин jQuery для всплывающих окон. Он не позволяет вам создать или стилизовать ваше собственное всплывающее окно, зато предоставляет всю логику, например, центрирование, модальное перекрытие, события и многое другое. Плагин даёт вам много возможностей для настройки, так что он, несомненно, вам понравится.

   

5. Twitter Bootstrap Modal

   Twitter Bootstrap modal – плагин для Twitter bootstrap. Он подойдёт для создания модальной функциональности веб-приложения (например, модальной формы) и замены базовой функциональности, предоставляемой стандартными функциями JavaScript alert(), confirm(), и prompt().

   

6. Lightview

   Lightview позволяет вам легко создавать красивые всплывающие окна, используя JavaScript библиотеку jQuery.Lightview использует HTML5, чтобы помочь вам предоставить наиболее удобные условия пользователям любых браузеров. Вы можете усовершенствовать ваш медиа-контент автоматически или создавать всплывающие окна на ваш вкус, используя мощный API на языке JavaScript.

7. Pop Easy

   Pop Easy — это небольшой по объёму плагин jQuery, который должен иметь каждый разработчик, чтобы легко создавать модальные окна. Он сфокусирован на важнейших элементах: добавление маски на вашу страницу и открытие всплывающего модального окна.

   

8. Colorbox

   Небольшой по объёму плагин jQuery lightbox. Он поддерживает работу с фотографиями, группировку, слайдшоу, AJAX, inline-контент и контент, заключённый в тег iframe. Отображение контролируется посредством CSS, поэтому оно может быть полностью перепроектировано. Функциональность плагина также может быть расширена при помощи callback-функций и функций, привязанных к событиям, поэтому вам не придётся изменять исходные файлы. Colorbox принимает настройки от объекта из пар ключ/значение и может быть привязан к любому элементу HTML.

   

9. modalPopLite

   Это супер-лёгкий по объёму, супер-простой плагин jQuery для модальных диалогов.Он поддерживает плавное исчезновение и скруглённые углы. Он очень прост в установке и использовании. У него нет сложных деталей. Просто быстрое, лёгкое, но эффективное диалоговое окно.

   

10. SimpleModal от Эрика Мартина

    SimpleModal — небольшой по объёму плагин jQuery, который предоставляет мощный интерфейс для разработки модальных диалоговых окон. Считайте его фреймворком для модальных диалогов. SimpleModal даёт вам гибкость в построении всего, что вы сможете себе представить, в то же время защищая вас от проблем кросс-браузерности, связанных с разработкой пользовательского интерфейса.

    

Заключение

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

Данная публикация представляет собой перевод статьи «Top 10 jQuery Plugins for Modal Windows» , подготовленной дружной командой проекта Интернет-технологии.ру

Набор полезных jQuery Ajax CSS3 фишек для веб-разработчиков.

1. Анимированный текстовый эффект на jQuery «Sliding Letters»

Интересный текстовый эффект при наведении с использованием jQuery.

2. Креативный jQuery слайдер «Rotating Image Slider»

Очень оригинальное оформление слайдера изображений, напоминающее веер. Анимированная смена слайдов. Навигация между изображениями осуществляется с помощью стрелок. Предусмотрена также автоматическая смена, которую можно включать и выключать с помощью кнопки Play/Pause, расположенной сверху.

3. Классное оформление диаграмм на сайте

Анимированная круговая диаграмма, созданная с использованием JavaScript библиотеки Raphaël.

4. jQuery CSS3 многоуровневое выпадающее меню

Легкое выпадающее CSS3 меню для сайта.

5. Слайдер фоновых изображений

Анимированный jQuery слайдер. Фоновые изображения автоматически масштабируются при изменении размеров окна браузера. Для каждого изображения выплывает блок с описанием.

6. Фоновая jQuery анимация на странице

Анимированный jQuery эффект при перемещении курсора по экрану.

7. Плагин «Blackbird»

Функциональное решение аналог alert() в JavaScript. Вы сможете подробнее почитать об использовании «Blackbird» на демонстрационной странице.

8. Ajax библиотека JSF компонентов «OpenFaces»

Набор различных Ajax компонентов на JFS фреймворке с открытым исходным кодом для создания элементов пользовательского интерфейса. В набор компонентов входят самые распространенные элементы интерфейса: компоненты для работы с таблицами и графиками, вкладки, всплывающие окна,  фильтры, меню, календари, компоненты для работы с формами и много других Ajax решений. Вы можете посмотреть все компоненты в действии на демонстрационной странице. «OpenFaces» распространяется по двум видами лицензий: бесплатной и коммерческой.

9. «Wijmo» набор jQuery UI виджетов для создания элементов пользовательского интерфейса

Коллекция профессиональных виджетов для веб-разработчиков. В набор «Wijmo» входят следующие бесплатные jQuery решения: аккордеоны, календари, всплывающие диалоговые окна, экспандеры, стилизованные формы, различные списки, меню, индикаторы загрузки «progressbar», вкладки (табы), всплывающие подсказки и другие полезные виджеты. Разработчики «Wijmo» предлагают помимо бесплатных решений также качественные коммерческие jQuery UI наработки. После скачивания архива, вы сможете посмотреть все возможные виджеты в действии, они находятся в дериктории wijmo-open/development-bundle/samples/. Этот набор обязательно сэкономит вам уйму времени при разработке ваших веб-проектов.

10. Оформление поискового поля с применением jQuery

Анимированное оформление поля для ввода поискового запроса. Эффект можно наблюдать при клике мышкой в поле ввода. Кнопка для начала поиска появляется после ввода запроса с клавиатуры.

11. «Flux Slider» слайдер на jQuery и CSS3

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

12. Масштабируемый текст jQuery «Sliding Letters»

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

13. Слайд-шоу «Awkward»

Функциональное слайд-шоу. В виде слайдов могут выступать: простые изображения, изображения с подписями, изображения с всплывающими подсказками, видео-ролики. Для навигации можно использовать стрелки, ссылки на номера слайдов и клавиши вправо/влево на клавиатуре. Слайд-шоу выполнено в нескольких вариантах: с миниатюрами и без них. Для просмотра всех вариантов пройдитесь по ссылкам Demo #1 — Demo #6 расположенным сверху на демонстрационной странице.

14. jQuery плагин «jQueryZoom»

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

15. jQuery галерея «jSwitch»

Анимированная jQuery галерея.

16. JavaScript галерея с 3D эффектом

17. Галерея «jQuery morphing gallery»

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

18. Новое CSS3 меню в стиле Apple

Новое меню в стиле Apple. Выглядит темнее того, что было ранее, но не менее симпатично.

19. Свежая реализация всплывающих подсказок на jQuery «Tooltipsy»

Много различных эффектов появления всплывающих подсказок при наведении.

20. JavaScript галерея для просмотра на мобильных устройствах «PhotoSwipe»

Галерея изображений, оптимизированная для просмотра на мобильных устройствах (телефонах или планшетах).

21. Стильное CSS3 меню

22. jQuery плагин «Magnifier»

Эффект увеличения области изображения при наведении.

23. Ajax корзина заказов «Easy Basket» для интернет-магазина

Функциональная корзина заказа для интернет-магазина с интегрированными методами оплаты товара с помощью PayPal  или  Google Checkout. Используемые технологии: HTML, CSS, jQuery, AJAX, PHP, XML, XSL. Легко встраивается в веб-страницу и настраивается внешний вид корзины.

24. jQuery плагин «Grid Navigation Effects»

Оригинальная навигация между миниатюрами изображений. Для просмотра эффекта  справа на демонстрационной странице нажмите на кнопки «Вверх» и «Вниз». В этом jQuery решении также предусмотрен эффект при наведении курсора на миниатюру.

25. Фоновый эффект «Vertical Parallax»

5. Переключение вида отображения блоков на jQuery

С помощью этого jQuery плагина «Switch Display Options» можно реализовать переключатель на странице, с помощью которого посетитель будет переходить от табличного отображения информации к полному просмотру с описанием блоков. Отлично подойдет для реализации портфолио.

26. Аналоговые часы на jQuery

27. jQuery HTML5 портфолио

Реализация красивого портфолио с помощью jQuery и HTML5. Фишка портфолио в реализованном фильтре. Различные работы в портфолио отображаются в зависимости от выбранной категории.

28. Галерея с миниатюрами «TN3 Gallery»

jQyery галерея с миниатюрами. Реализована возможность просмотра в компактном окне и в окне на весь экран, а также возможность отключать/включать автоматическую смену слайдов.

29. Описание изображений «Preview window»

Плагин для подписи изображений. При наведении курсора мыши с анимированным эффектом появляется описание изображения. Для создания анимации используется jQuery.

30. JavaScript карусель

31. Сетка изображений «Grid-Gallery»

Сетка изображений растягивается в зависимости от ширины окна браузера. Интересный эффект при наведении: подсвечивается активный ряд и колонка.

32. CSS3 галерея

Интересный эффект при наведении.

33. Плагин jQuery «Hover Image Zoom»

Увеличение изображения при наведении курсора. Эффект приближения.

34. Еще одна реализация выпадающего CSS3 мега-меню

Реализация выпадающего меню с использованием CSS3.

35. Слайдер «gSlide»

jQuery слайдер. При нажатии на плюс можно увеличить изображение.

36. Слайд-шоу

В правом верхнем углу слайда можно включить/выключить автоматическую смену слайдов.

37. Выпадающее меню «jbar»

38. Анимированное меню на jQuery

Анимированное меню. Пункты меню представлены в виде иконок и описания. несколько отличных эффектов при наведении курсора мышки на пункт меню. Предусмотрено 8 эффектов, чтобы посмотреть их все — пройдите по ссылкам Exemple1-Exemple8 на демонстрационной странице.

39.jQuery слайд-шоу

Слайд-шоу с оригинальным эффектом смены изображений.

40. Анимированный jQuery  CSS3 эффект

41. Галерея изображений jQuery

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

42. Фоновый эффект на jQuery

Фоновый эффект (движение по слоям). На демонстрационной странице поводите мышкой по экрану, чтобы увидеть эффект в действии.

43. jPaginator CSS3  плагин постраничного разбиения

44. Плагин Plasm The Wall

Для создания своеобразных «стен» из фотографий или HTML блоков, которые при помощи мышки можно перетаскивать по экрану в пределах фиксированной области.

Скрипт всплывающая картинка при наведении на картинку

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

Код

/*Всплывающий скриншот*/  
.thumbnail{  
position: relative;  
z-index: 0;  
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{ /*CSS for enlarged image*/  
position: absolute;  
background-color: #3d3d3d;  
padding: 5px;  
left: -1000px;  
border: 1px solid white;  
visibility: hidden;  
color: Yellow;  
text-decoration: none;  
border-radius: 4px 4px 4px 4px;  
-moz-border-radius: 4px 4px 4px 4px;  
-webkit-border-radius: 4px 4px 4px 4px;  
}  
.thumbnail span img{ /*CSS for enlarged image*/  
border-width: 0;  
padding: 2px;  
}  
.thumbnail:hover span{ /*CSS for enlarged image on hover*/  
visibility: visible;  
top: 0;  
left: 60px; /*position where enlarged image should offset horizontally */  
}  
/*———————*/

Но остальное остается только прописывать ссылку в код, краткое описание, что не мало важно сейчас для поисковых систем. И вставлять в ответ или когда создаете тему.

Код

<a href=»#»>Ссылка<span>Здесь описание<img src=»ВАША КАРТИНКА»/></span></a>

Так же есть еще второй вариант кода. CSS не трогать просто другой код можно сделать чтобы при наведении на картинку появлялась еще картинка например увеличенная очень красиво получается.

Код

<a href=»#»><img src=»ссылка на рисунок» border=»0″ /><span><img src=»ссылка на рисунок» />Ваш текст</span></a>

Как сделать чтобы установить для всех фото чтобы не ставить на каждую?
Смотря для какого модуля Вам нужно, допустим для модуля ФОТОАЛЬБОМ будет так:

Код

<?if($FULL_PHOTO_DIRECT_URL$)?><a href=»#»><img src=»$FULL_PHOTO_DIRECT_URL$» border=»0″ /><span><img src=»$FULL_PHOTO_DIRECT_URL$» border=»0″ />$PHOTO_NAME$</span></a><?endif?>

Размеры выставляйте те, которые Вам нужны.

А можно ли сделать 2 всплывающих картинки, одна под другой?
Да, можно

Код

<a href=»#»><img src=»ссылка на рисунок» border=»0″ /><span><img src=»ссылка на рисунок 1″ /><img src=»ссылка на рисунок 2″ />Ваш текст</span></a>

Источник: megascripts.ru