Очень качественно сделанный плагин, который подарит вам и пользователям вашего сайта массу впечатлений от приятной глазу анимации увеличения картинок
Для начала посмотрите
ДЕМО
Установка:
1#: После /head на нужных страницах вставляйте:
|
|
<link type='text/css' rel='stylesheet' href='/css/koalazoom.css' /> <script type="text/javascript" src="/js/jquery.koalazoom.packed.js"></script> |
2#: Также после /head вставляйте любой из следующих кодов для достижения нужного эффекта:
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> |
3#: Следующий код в то место, где будут располагаться сами картинки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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 файл из прикреплённого архива в папку
js и CSS файл в папку
cssАвтор публикации
12
Я не понял вашего вопроса, но постараюсь на него ответить...
