![]() |
---|
|
FancyZoom - аналог лайтбокса.
Наверно, каждому из Вас знаком скрипт Lightbox, который позволяет эффекно увеличивать изображения. Но в этом уроке мы рассмотрим не менее интересный скрипт, который, несомненно, может конкурировать с лайтбоксом по эффектности и привлекательности. Этот скрипт называется fancyZoom. Итак, давайте сначала посмотрим его в действии. А теперь приступим к его реализации. Шаг 1. Скачаем и подключим к документу необходимые скрипты (в архиве также находятся изображения в папке images, необходимые для работы fancyZoom). <script type="text/javascript" src="js/jQuery 1.2.6.js"></script> Шаг 2. Между тегами <head> пропишем следующий скрипт: <script type="text/javascript" charset="utf-8"> Ширину и высоту блока, указанную в скобках, можете изменять на свои значения. Шаг 3. Скачаем изображения, используемые в примере, или воспользуемся своими. Вставим маленькое изображение в документ: <div class="photo"> В качестве ссылки указывается якорь на большое изображение, которое мы вставляем дальше: <div id="github"> Шаг 4. Вместо изображения можно использовать и просто текст. Для этого сначала вставляем текст с ссылкой-якорем: <a href="#medium_box" id="medium_box_link">Ваша ссылка</a> ...а далее указываем текст, который должен выскакивать при нажатии на ссылку: <div id="medium_box"> Вот и все! Используйте этот скрипт на Ваших сайтах! Данный урок подготовлен для Вас командой сайта http://ruseller.com
Если хотите не упустить данный урок, добавьте его в закладки:
Рейтинг: ![]()
Оставить комментарий: |
|
---|
|