JQuery: эффект “растворения” изображений
В предыдущей статье об обновлении блога я уже упоминала о библиотеке и основанном на ней плагине , с помощью которого реализованы вкладки на сайдбаре. Я бы хотела продолжить этот обзор открытием рубрики "Веб-разработка", где буду размещать статьи о различных языках программирования, и в частности об .
На сегодняшний день, использование AJAX становится все более акутальным. Это, в первую очередь, связано с огромными возможностями применения языка: от простых , до и самых разнообразных проектов, например .
Наиболее известные AJAX фреймворки это: , и . А последний из перечисленных уже завоевал сердца многих любителей поэкспериментировать, в том числе и мое :) Поэтому, я открываю рубрику с обзора интересного и красивого эффекта, основанного на этой библиотеке.
Я не стану углубляться в изучение основ JQuery, т.к. в сети можно найти бесконечное число справочников, блогов и всю необходимую информацию об этом фреймворке. Достаточно, например, заглянуть и тут же хочется все попробовать в действии :)
А эффект, о котором я хочу рассказать, называется InnerFade, что в переводе означает "внутреннее растворение". С этим эффектом знаком каждый: когда одна картинка медленно растворяется, превращаясь в другую. Чаще всего, мы привыкли видеть этот эффект реализованным на flash или как банер .gif. Flash, безусловно, по весу будет намного меньше чем .gif банер, но минус в том, что flash не индексируется поисковиками. И вот тогда, нас и выручит JQuery.
Решение будет очень простым. Все, что нам нужно - это наши изображения и небольшой код.
Для начала, не забываем добавить в тег <head> документа скрипт инициализации JQuery и соотвествующего плагина jquery.innerfade.js:
<script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.innerfade.js" mce_src="js/jquery.innerfade.js"></script>
Далее прописываем наши изображения, например, в виде структурированного списка:
<ul id="gallery"> <li><a href="http://www.getincss.ru" title="Изображение 1"><img src="images/beach1.jpg" width="200" height="200" alt="Изображение 1" /></a><li> <li><a href="http://www.getincss.ru" title="Изображение 2"><img src="images/beach2.jpg" width="200" height="200" alt="Изображение 2" /></a></li> <li><a href="http://www.getincss.ru" title="Изображение 3"><img src="images/beach3.jpg" width="200" height="200" alt="Изображение 3" /></a></li> </ul>
Скрипт вызова функции InnerFade подключаем либо также в <head>, либо в <body>:
$(document).ready(function() {
$('ul#gallery').innerfade({
speed: 1000, //скорость растворения изображения
timeout: 2000, //время показа одного изображения
type: 'sequence', //отображать по порядку
containerheight: '188px' // высота блока
});
});
И вот, что увидим в итоге:
При такой реализации мы можем прописать к каждому изображению ссылку и заголовок, что будет большим плюсом по сравнению с flash или .gif банерами.
Плагин InnerFade позволяет менять не только изображения, но и любые фрагменты текста и кода.
Enjoy :)
Dmoz
Спасибо за урок
Как раз неделю назад стал изучать jQuery
Наверное куплю книжку, так как в туториалах на английском всё таки немного сложно разбираться.
anonimizer_meЦитировать
Здравствуйте. Я начинающий разработчик. Очень нужен данный эффект. Вставила все что у вас описано. И вот что из этого получилось: stepanenkoo.narod.ru
Подскажите, в чем моя ошибка!
Буду очень признательна.
ОльгаЦитировать
не вижу у вас в коде вызов самой функции InnerFade.
Посмотрите внимательно пример:
http://www.getincss.ru//wp-content/uploads/2008/04/innerfade.htm
АвторЦитировать
Спасибо большое, разобралась. Отдельная страничка работает хорошо – здесь:
Но когда я обновляю страничку на сайте (), то внизу 1 изображения почему то мелькает второе изображение, хотя страница идентична приведеной выше.
Не пойму почему это происходит.
Помогите пожалуйста.
ОльгаЦитировать
Изображение мелькает потому что оно уже загрузилось, а скрипт еще нет. Чтобы такого не происходило, можно сделать следующее:
- в СSS файле пропишите для ul#gallery:
ul#gallery {display:none}-добавьте в JS код следующее:
$('ul#gallery').show();т.е. теперь код будет выглядеть так:
$(document).ready(function() { $('ul#gallery').show(); $('ul#gallery').innerfade({ speed: 1000, timeout: 3000, type: 'sequence', containerheight: '300px' }); });Это должно убрать мелькание второго изображения.
АвторЦитировать
В основной страничке start.htm прописала код как вы посоветовали .
А в каком месте файла styl1.css нужно прописать ul#gallery {display:none}.
BODY { SCROLLBAR-FACE-COLOR:#7ea15f; SCROLLBAR-HIGHLIGHT-COLOR: #ecedca; SCROLLBAR-SHADOW-COLOR: green; SCROLLBAR-3DLIGHT-COLOR: #362d65; SCROLLBAR-ARROW-COLOR: #ecedca; SCROLLBAR-TRACK-COLOR: MoneyGreen; SCROLLBAR-DARKSHADOW-COLOR: #362d65; COLOR: #666633; background-color: #ecedca } A { COLOR: black ; TEXT-DECORATION: none } A:hover { TEXT-DECORATION: underline } .menu_main_item { FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY: Helvetica, Arial, sans-serif,Chicago; } .main_a { color: teal; TEXT-DECORATION: none} .main_a:hover{ TEXT-DECORATION: underline }Спасибо, что уделяете мне внимание.
ОльгаЦитировать
стиль для ul#gallery нужно прописать самой последней строкой в файле styl1.css
АвторЦитировать
Все получилось! Спасибо огромное.
ОльгаЦитировать
Такие тексты только в ЖЖ публиковать, а не здесь =(
TrufaЦитировать
позор какой)))) я поняла XD там изображение уже шло с тенью))
eastbelleЦитировать