Плавная смена изображений
13.03.07 фотогалерея, javascript
Очень интересный способ смены изображений при помощи Javascript сегодня обнаружил на сайте textpattern.org.
Итак, сразу к практике и что понадобится (про Texpattern речь не идет, все можно найти в документации к плагину):
- Несколько изображений (складываем в папку /images/)
- Следующие скрипты, prototype.lite.js, moo.fx.js, slideshow.js
- Добавить в наш документ следующие строки между
<html> и </html>(не забываем про пути):<script type="text/javascript" src="prototype.lite.js"></script><script type="text/javascript" src="moo.fx.js"></script><script type="text/javascript" src="slideshow.js"></script>
- Там где будет меняться изображение ставим (все изображения складываем в папку /images/):
<div class="slideshow"> <img id="aro-1a" alt="" src="http://yoursite.com/images/17.jpg" width="268" height="201" /> </div> <script type="text/javascript"> <!--//--><![CDATA[//><!-- new fx.Slideshow ("17.jpg,18.jpg,19.jpg,20.jpg", { hu: "http://yoursite.com/", n: "1"}) //--><!]]> </script>
Недостатки:
- Не работает плавная смена изображений в Opera (достаточно резкий переход, как и множество других эффектов при использовании прототипа)
- При отключенных стилях выведется два меняющихся изображения
