Представляю на суд громадськості мій новий плагін для jQuery – (a) Sexy Images.

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

Установка

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

Ініціалізація

З ініціалізацією теж все просто – необхідно вибрати теги і викликати метод asexy():

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

Природно у вас повинна бути відповідна конструкція в HTML’е:

Lorem Ipsum …

Lorem Ipsum …

Lorem Ipsum …

Lorem Ipsum …

В результаті ми отримаємо щось, схоже на першу демку 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

Або в архіві:

  • http://code.google.com/p/a-sexy/downloads/list
  • http://plugins.jquery.com/project/a-sexy

Висновок

Сподіваюся, цей плагин стане в нагоді багатьом, чекаю ваших відгуків…

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