(a) Sexy Images jQuery плагин

(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

17 thoughts on “(a) Sexy Images jQuery плагин”

  1. Плохое название для файлов. Все банерорезалки удалят «sex». :(

  2. Жаль, что картинки движутся по определенной траектории.

    Возможно, было бы юзабельнее сделать скроллинг в сторону положения мыши относительно центра родительской области? Без нажатий кнопок, без ничего – медленно скролить..

    ИМХО..

  3. Не хватает архива с картинками (подного архива с картинками фулсайз).

  4. Это только у меня ничего не работает?
    Браузер IE7, а если быть точнее, то Maxthon 1.6

    Строка:69
    Столбец:5
    Код:0
    Ошибка:Объект не поддерживает это свойство или метод

    Строка:318
    Столбец:34
    Код:0
    Ошибка:Предполагается наличие идентификатора, строки или числа

  5. Красивая девушка на картинке, требую ссылку на оригиналы ,]

  6. На Safari криво работает, хотя может у меня сафари старый, надо заодно обновится, но всё же…
    А девушка на картинке действительно зачётная :)

    1. Это как намерять надо было? Весь архив с плагином и картинками в распакованном виде?
      Плагин сам по себе весит 4.4 килобайта

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.