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

Красивое увеличение изображений через плагин KOALAZOOM на jQuery
23.06.14, 11:28:39

Скачать файл




Очень качественно сделанный плагин, который подарит вам и пользователям вашего сайта массу впечатлений от приятной глазу анимации увеличения картинок

Для начала посмотрите ДЕМО (9 демо страниц с разными эффектами)

Установка:

После /head на нужных страницах вставляйте:
Код
<link type='text/css' rel='stylesheet' href='/css/koalazoom.css' />  
<script type="text/javascript" src="/js/jquery.koalazoom.packed.js"></script>


Сразу после предыдущего кода вставляйте:

1) Для эффекта в Демо 1:
Код
<script type="text/javascript">
<!--  
$(document).ready(function() {  
$("#koalalist1").koalazoom({width: 150, height: 150, expandedwidth: 400, expandedheight: 400, duration: 250});  
});  
-->  
</script>


2) Для эффекта в Демо 2:
Код
<script type="text/javascript">
<!--  
$(document).ready(function() {  
$("#koalalist1").koalazoom({width: 150, height: 150, expandedwidth: 250, expandedheight: 250, duration: 300, effect: "flydown"});  
});  
-->  
</script>


3) Для эффекта в Демо 3:
Код
<script type="text/javascript">
<!--  
$(document).ready(function() {  
$("#koalalist1").koalazoom({width: 150, height: 150, expandedwidth: 300, expandedheight: 300, duration: 300, effect: "slideup"});  
});  
-->  
</script>


4) Для эффекта в демо 4:
Код
<script type="text/javascript">
<!--  
$(document).ready(function() {  
$("#koalalist1").koalazoom({width: 150, height: 150, expandedwidth: 350, expandedheight: 350, duration: 300, effect: "slideright"});  
});  
-->  
</script>


5) Для эффекта в Демо 5:
Код
<script type="text/javascript">
<!--  
$(document).ready(function() {  
$("#koalalist1").koalazoom({width: 150, height: 150, expandedwidth: 400, expandedheight: 400, duration: 300, effect: "slideleft"});  
});  
-->  
</script>


6) Для эффекта в Демо 6:
Код
<script type="text/javascript">
<!--  
$(document).ready(function() {  
$("#koalalist2").koalazoom({width: 150, height: 150, expandedwidth: 300, expandedheight: 300, duration: 300, effect: "slideup"});  
});  
-->  
</script>


7) Для эффекта в Демо 7:
Код
<script type="text/javascript">
<!--  
$(document).ready(function() {  
$("#koalalist2").koalazoom({width: 150, height: 150, expandedwidth: 200, expandedheight: 200, duration: 300, effect: "slideleft"});  
});  
-->  
</script>


8) Для эффекта в Демо 8:
Код
<script type="text/javascript">
<!--  
$(document).ready(function() {  
$("#koalalist3").koalazoom({width: 200, height: 200, top:100, left:0, expandedwidth: 300, expandedheight: 300, duration: 300, effect: "flydown"});  
});  
-->  
</script>


Следующий код в то место, где будут располагаться сами картинки:
Код
<ul id="koalalist1">
<li>
<div>Название фото</div>
<img src="Ссылка на картинку" alt="Описание" width="150" height="150" />
</li>
<li>
<div>Название фото</div>
<img src="Ссылка на картинку" alt="Описание" width="150" height="150" />
</li>
<li>
<div>Название фото</div>
<img src="Ссылка на картинку" alt="Описание" width="150" height="150" />
</li>
<li>
<div>Название фото</div>
<img src="Ссылка на картинку" alt="Описание" width="150" height="150" />
</li>
<li>
<div>Название фото</div>
<img src="Ссылка на картинку" alt="Описание" width="150" height="150" />
</li>
  </ul>


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

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

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