Наверно, каждому из Вас знаком скрипт Lightbox, который позволяет
эффекно увеличивать изображения. Но в этом уроке мы рассмотрим не менее
интересный скрипт, который, несомненно, может конкурировать с
лайтбоксом по эффектности и привлекательности. Этот скрипт называется
fancyZoom.
Итак, давайте сначала посмотрим его в действии. А теперь приступим к его реализации.
Шаг 1.
Скачаем
и подключим к документу необходимые скрипты (в архиве также находятся
изображения в папке images, необходимые для работы fancyZoom).
Code
<script type="text/javascript" src="js/jQuery 1.2.6.js"></script>
<script type="text/javascript" src="js/fancyzoom.min.js"></script>
Шаг 2.
Между тегами head /head пропишем следующий скрипт:
Code
<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.
Скачаем изображения, используемые в примере, или воспользуемся своими.
Вставим маленькое изображение в документ:
Code
<div class="photo">
<a href="#github">
<img src="1m.jpg" alt="" />
</a>
</div>
В качестве ссылки указывается якорь на большое изображение, которое мы вставляем дальше:
Code
<div id="github">
<img src="1.jpg" alt="" />
</div>
Шаг 4.
Вместо изображения можно использовать и просто текст. Для этого сначала вставляем текст с ссылкой-якорем:
Code
<a href="#medium_box" id="medium_box_link">Ваша ссылка</a>
...а далее указываем текст, который должен выскакивать при нажатии на ссылку:
Code
<div id="medium_box">
Здесь может быть ваш текст! </p>
</div>
Вот и все! Используйте этот скрипт на Ваших сайтах!
Данный урок подготовлен для Вас командой сайта www.ruseller.com
Источник урока: www.orderedlist.com
