• Страница 1 из 1
  • 1
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Скрипты и коды » FancyZoom - аналог лайтбокса.
FancyZoom - аналог лайтбокса.
exclusiv...
/avatar/01/4333-414916.png
1');return false;" rel="nofollow" href="javascript://" name="2167">
22.01.2012 в 17:59 Наверно, каждому из Вас знаком скрипт 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
Evgesho
/avatar/13/4662-101129.gif
2');return false;" rel="nofollow" href="javascript://" name="2170">
22.01.2012 в 18:29 Ух ты,это полезная вещь,спасибо!)
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Скрипты и коды » FancyZoom - аналог лайтбокса.
  • Страница 1 из 1
  • 1
Поиск: