FancyZoom - аналог лайтбокса.

Наверно, каждому из Вас знаком скрипт Lightbox, который позволяет эффекно увеличивать изображения. Но в этом уроке мы рассмотрим не менее интересный скрипт, который, несомненно, может конкурировать с лайтбоксом по эффектности и привлекательности. Этот скрипт называется fancyZoom.

Итак, давайте сначала посмотрим его в действии. А теперь приступим к его реализации.

Шаг 1.

Скачаем и подключим к документу необходимые скрипты (в архиве также находятся изображения в папке images, необходимые для работы fancyZoom).

 <script type="text/javascript" src="js/jQuery 1.2.6.js"></script>

<script type="text/javascript" src="js/fancyzoom.min.js"></script>

Шаг 2.

Между тегами <head> пропишем следующий скрипт:

 <script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true});

$('#medium_box_link').fancyZoom({width:400, height:300});

});

</script>

Ширину и высоту блока, указанную в скобках, можете изменять на свои значения.

Шаг 3.

Скачаем изображения, используемые в примере, или воспользуемся своими.

Вставим маленькое изображение в документ:

<div class="photo">

<a href="#github">

<img src="1m.jpg" alt="" />

</a>

</div>

В качестве ссылки указывается якорь на большое изображение, которое мы вставляем дальше:

<div id="github">

<img src="1.jpg" alt="" />

</div>

Шаг 4.

Вместо изображения можно использовать и просто текст. Для этого сначала вставляем текст с ссылкой-якорем:

<a href="#medium_box" id="medium_box_link">Ваша ссылка</a>

...а далее указываем текст, который должен выскакивать при нажатии на ссылку:

<div id="medium_box">

<p>Здесь может быть ваш текст! </p>

</div>

Вот и все! Используйте этот скрипт на Ваших сайтах!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.orderedlist.com
Перевел: Сергей Патин
Урок создан: 6 Апреля 2009
Просмотров: 57312
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^