| Главная » Файлы » Прочие скрипты » 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 | |
| Просмотров: 370 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |