(a) Sexy Images jQuery плагин // JavaScript
Представляю на суд общественности мой новый плагин для 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