Эффект для изображений через плагин KoalaZoom на jQuery
|
1 2 |
<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:
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> <!-- $(document).ready(function() { $("#koalalist1").koalazoom({width: 150, height: 150, expandedwidth: 400, expandedheight: 400, duration: 250}); }); --> </script> |
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> <!-- $(document).ready(function() { $("#koalalist1").koalazoom({width: 150, height: 150, expandedwidth: 250, expandedheight: 250, duration: 300, effect: "flydown"}); }); --> </script> |
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> <!-- $(document).ready(function() { $("#koalalist1").koalazoom({width: 150, height: 150, expandedwidth: 300, expandedheight: 300, duration: 300, effect: "slideup"}); }); --> </script> |
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> <!-- $(document).ready(function() { $("#koalalist1").koalazoom({width: 150, height: 150, expandedwidth: 350, expandedheight: 350, duration: 300, effect: "slideright"}); }); --> </script> |
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> <!-- $(document).ready(function() { $("#koalalist1").koalazoom({width: 150, height: 150, expandedwidth: 400, expandedheight: 400, duration: 300, effect: "slideleft"}); }); --> </script> |
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> <!-- $(document).ready(function() { $("#koalalist2").koalazoom({width: 150, height: 150, expandedwidth: 300, expandedheight: 300, duration: 300, effect: "slideup"}); }); --> </script> |
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> <!-- $(document).ready(function() { $("#koalalist2").koalazoom({width: 150, height: 150, expandedwidth: 200, expandedheight: 200, duration: 300, effect: "slideleft"}); }); --> </script> |
|
1 2 3 4 5 6 7 |
<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> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
