JavaScript

(a) Sexy Images jQuery Plugin
Представляю на суд общественности мой новый плагин для jQuery – (a) Sexy Images.

Нет, нет, плагин не подкачивает с Flickr’а PinUp картинки на ваш сайт, хотя, это тоже может быть востребовано ;), основной задачей данного плагина есть приведение разношерстных картинок на странице к единому размеру, с возможностью просмотра по событию mouseover.

Установка

Для подключения плагина необходимо лишь наличие jQuery:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.asexy.js"></script>

Инициализация

С инициализацией тоже всё просто – необходимо выбрать <IMG> теги и вызвать метод asexy():

$(document).ready(function(){
    $('#content img').asexy();
});

Естественно у вас должна быть соответствующая конструкция в HTML’е:

<div id="content">
        <p><img src="docs/images/Peach_and_Lime.jpg" alt="Peach and Lime" /> Lorem Ipsum ... </p>
        <p><img src="docs/images/Rock_Chick.jpg" alt="Rock Chick" /> Lorem Ipsum ... </p>
        <p><img src="docs/images/Angel.jpg" alt="Angel" /> Lorem Ipsum ... </p>
        <p><img src="docs/images/More_stripes.jpg" alt="More stripes" /> Lorem Ipsum ... </p>
</div>

В результате мы получим нечто, схожее на первую демку Default configuration.

Настройка

Теперь о возможных настройках данного плагина:

width и height – желаемые размеры картинок
top и left – изначальное положение “окна просмотра”, можно указать ключевое слово “center”
zoom – заствит картинку растянуться/ужаться до размера указанного в width и height
opacity – задает прозрачность картинки в неактивном состоянии
func – функция, ответственная за показ всей картинки (может быть snake, zigzag, vertical, horizontal, x )
speed – скорость анимации
round – параметр для функций snake и zigzag – заставляет игнорировать последнюю итерацию, если осталось показывать “round” пикселей картинки (выставляйте в 1/3 либо 1/4 высоты “height” для получения хорошего результат)

Выглядит это следующим образом:

$('img').asexy({
        width:320,
        height:240,
        left:0, // can be 'center'
        top:0,  // can be 'center'
        zoom:true,
        speed:500, // only in ms
        opacity:0.8, // from 0.0 to 1.0
        round:60,
        func:"snake" // snake, zigzag, vertical, horizontal, x  
    });

Результатом может служить вторая демка: Custom configuration.

Скачать

Скачать данный плагин с примерами можно используя SVN:

svn checkout http://a-sexy.googlecode.com/svn/trunk/ a-sexy-read-only

Либо в архиве:

Заключение

Надеюсь, данный плагин пригодится многим, жду ваших отзывов…

P.S. RSS блога: http://anton.shevchuk.name/feed/, Twitter: http://twitter.com/AntonShevchuk