Header.php + jquery = Слайдшоу, как?

Доброго времени суток!

Есть у меня тема с изображением в шапке banner.gif, который прописан в header.php как

<div id="banner"></div>

а в style.css как

#banner { background: transparent url(images/banner.gif) no-repeat; width: 936px; height: 209px; margin-bottom: 20px; position: relative; top: 7px; left: 8px;}

Возникло желание заменить изображение в шапке на красивое слайдшоу. Полазил по форумам, посоветовали воспользоваться jquery, но как его прикрутить к моей теме я немогу додуматся, методом тыка мутил-мутил, безрезультатно.

Нашел на руселлере плагин к jquery с нужным эффектом (fade) http://ruseller.com/lessons.php?rub=32&id=400
но не могу никак прикрутить его, помогите 🙂

ссылки на движок вписываете тут же в header.php, код – там же в теге <script>, ну и оформляете картинку в заголовке с точки зрения корректного html. Желательно чтоб картинка была не фоном, прописанным в css. Обычно jQuery оперирует <img> объектами.

Подскажите что я делаю не так:
Все действия выполняю в header.php, а именно – подключаю скрипты

<script type="text/javascript" src="http://адрес сайта/js/jquery.js"></script>
<script type="text/javascript" src="http://адрес сайта/js/slide.js"></script>

Первый сам jquery а второй скрипт слайдшоу, взял рабочий с сайта знакомого
Далее выполняю:

<script type="text/javascript">var base="http://";</script>
<script type="text/javascript">
      $(document).ready(function() {
                     $('#logo-slide').crossSlide({
                 sleep: 10,
                 fade: 1
            }, [
{src: base + 'адрес сайта/images/banner1.gif'},
{src: base + 'адрес сайта/images/banner2.gif'},
{src: base + 'адрес сайта/images/banner3.gif'},
{src: base + 'адрес сайта/images/banner4.gif'},
{src: base + 'адрес сайта/images/banner5.gif'},
{src: base + 'адрес сайта/images/banner6.gif'},
{src: base + 'адрес сайта/images/banner7.gif'},
{src: base + 'адрес сайта/images/banner8.gif'},
{src: base + 'адрес сайта/images/banner9.gif'},
{src: base + 'адрес сайта/images/banner10.gif'},
{src: base + 'адрес сайта/images/banner11.gif'}
               
            ]);
               });
   </script>

Это все помещаю между <head></head>

После <body> нахожу <div id="banner"></div> и заменяю юго на <div id="logo-slide"></div>, сохраняю, захожу на блог – изображение не показываются 🙁

UP 🙁

http://wladko.com/internet/wordpress/jquery.html – получилось

Anonymous
Отправить
Ответ на: