Главная » Файлы » Прочие скрипты » jQuery

Увеличение текста, флеш роликов и картинок через плагин Fancy Zoom на jQuery
23.06.14, 09:28:37

Скачать файл




Очень даже неплохой плагин, который позволит вам увеличивать любые картинки, текстовый и флеш контент

Для начала посмотрите ДЕМО

Усановка:

После /head на нужных страницах вставляйте:
Код
<link rel="stylesheet" href="/css/common.css" type="text/css" />
<script type="text/javascript" src="/js/fancyzoom.min.js"></script>
<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});  
$('#large_box_link').fancyZoom();  
$('#flash_box_link').fancyZoom();  
});  
</script>

<style type="text/css" media="screen">
#large_box {width:800; height:600;}  
</style>


Следующие коды в любое нужное место:

1) Для картинок:
Код
<div id="photos">
  <div class="photo">
  <a href="#image1">
  <img src="http://farm4.static.flickr.com/3250/2765022017_356efe6a25_s.jpg" alt="Github helmet" />
  </a>
  </div>  
  <div id="image1">
  <img src="http://farm4.static.flickr.com/3250/2765022017_356efe6a25.jpg" alt="helmet" />
  </div>  
  </div>


2) Для текста:
Код
<a href="#medium_box" id="medium_box_link">Ссылка для среднего блока</a>  
  <div id="text">
  <div id="medium_box">
  Здесь любой ваш текст в среднем блоке  
  </div>
  </div>  

  <a href="#large_box" id="large_box_link">Ссылка для большого блока</a>  
  <div id="text">
  <div id="large_box">
  Здесь любой ваш текст в большом блоке блоке  
  </div>
  </div>


3) Для флеш:
Код
<a href="#flash_box" id="flash_box_link">Ссылка для блока с флеш контентом</a>  
  <div id="text">
  <div id="flash_box">
  Здесь любой флеш контент  
  </div>
  </div>


Осталось лишь залить скрипт из пркреплённого архива в папку js стиль в папку css и все картинки в папку images

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: роликов, Zoom, картинок, fancy, Через, на, плагин, увеличение, текста, флеш
Просмотров: 259 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: