Ну, вот и мой первый плагин для любимого jQuery!
Суть плагина заключается в плавном увеличении картинки при наведении на нее мышкой.
Плагин принимает такие параметры:
widthUp – максимальная ширина картинки (по умолчанию 700);
widthDown – минимальная ширина картинки (по умолчанию 200);
speeadUp – время, за которое достигнем максимальной ширины (по умолчанию 500);
speeadDown – время, за которое достигнем минимальной ширины (по умолчанию 200).
Подгружаем, как всегда, сначала jquery, затем плагин bigimg:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src=" jquery.bigimg.js"></script>
Используем тоже просто:
<script type="text/javascript">
$(document).ready(function() {
$(".immg").bigimg({widthUp: 700, widthDown: 300, speeadUp: 500, speeadDown: 200});
});
</script>
<img class="immg" src="IMG1.jpg" width="300" />
<img class="immg" src="IMG2.jpg" width="300" />
Собственно, вот и пример плагина для увеличения изображений.
Скачать плагин jquery.bigimg.js
Все просто и доступно. Может кому-то понадобится… как мне. Удачи!
(голосов 4, в среднем: 5.00 из 5)
Loading ...
#1 - Август 20th, 2009 at 10:17
При увелечении затрагивается структура шаблона, так что особо применения не вижу, исключительно как пример применения jQuery.
#2 nice - Август 20th, 2009 at 11:16
При его написании задача такая не стояла… чтоб шаблон не растягивало можно поиграться с дивами.
А так, плагин был написан для одной задачки… если он пригодился еще кому то, то это хорошо.
Ну и для тех кто осваивает jQuery, думаю, тоже будет полезен….
#3 - Ноябрь 3rd, 2009 at 13:46
Сегодня меня лишили примии. Ой.. кризиз на дворе.. хоть у вас черпнул слегка позитива. Спасибо http://www.webnotes.com.ua !
#4 nice - Ноябрь 3rd, 2009 at 13:59
Та не за что! Позитив это всегда хорошо!
#5 Aeksandr - Ноябрь 30th, 2009 at 17:33
Привет! здесь мне всё понятно! (что ничего непонятно) мне бы попростому ))) на пальцах.
#6 - Февраль 11th, 2010 at 00:28
Спасибо. Пристроил плагин к сайтику своему.
Кстати ошибку нашел, в примере не указан id картинки в тэге img . Без id эфект не сработает.
#7 nice - Февраль 11th, 2010 at 01:45
А зачем там id?
Мы по классу immg определяем что это та картинка которую увеличить…
Хочешь можно и по id… но id должен быть уникальным для каждого элемента…
#8 - Февраль 11th, 2010 at 11:19
Я же написал «Без id скрипт не сработает»
Неужели тяжело прочитать внимательно и проверить свой же код? :) Посмотри http://tornado9z.narod.ru/ как выполняется твой пример кода.
#9 nice - Февраль 11th, 2010 at 20:49
Неужели тяжело глянуть в код или просто открыть пример и увидеть что все работает?
#10 - Февраль 11th, 2010 at 21:37
Мне не тяжело :) Я открывал страницу и смотрел код, где и увидел ошибку, точнее разницу в коде. Я даже страницу специально создал для тебя! Открой и посмотри сам http://tornado9z.narod.ru/
Тебе что религия не позволяет страницу открыть? Или сделать пример с кодом который написан именно в посте, когда тебе говорят что он не работает.
Давай по другому попробую объяснить.
Страницу на которой ты выложил свой пример, код работает, но он отличается от того что приведен в данном посте. По этому я и написал что ошибка в коде поста. Ты можешь открыть страницу которую я выложил специально для тебя http://tornado9z.narod.ru/? или сам проверь свой код, именно тот который выложен в посте!
Если тебе до сих пор ничего не понятно, тогда почему у тебя в примере http://www.webnotes.com.ua/demo/bigimg/index.html в тэге img стоит id? Убери его и посмотрим как код будет работать.
#11 nice - Февраль 11th, 2010 at 22:44
Вот теперь вижу! :)
Просто так сложилось, что как только я перешел по ссылке, у меня перезагрузило ноут.
После чего я даже не стал анализировать замечание.
Так как подумал что это спам а там просто страничка с вирусом.
Но после предыдущего комментария я понял что ты человек!!! )))
И действительно в плагине ошибка, почему там я учитывал id, видно когда-то залил не ту (промежуточную) версию.
Теперь img можно использовать без id.
Спасибо за замечание! И прошу прощения за непанятку… так сложилось :)
#12 - Февраль 12th, 2010 at 11:41
Не за что.
Бывает :)