Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

Ротатор картинок

Предыдущая тема Следующая тема Перейти вниз

Ротатор картинок

Сообщение автор moresol в Вт 13 Сен - 23:31

Умные люди, подкажите пожалуйста, как мне вот к этому коду ротатора картинок прописать адреса, чтобы кликом по картинке можно было перейти по направлению к теме... и еще я никак не могу картинку поставить по центру...

Код:
 <style type="text/css">
    div#rotator {position:relative; height:110px; margin-left: -10px;}
    div#rotator ul li {float:left; position:absolute; list-style: none; list-style: none;}
    </style>

    <div id="rotator">
    <ul>
    <li class="show">
    <img src="http://savepic.net/635292.jpg" width="160" height="107"  alt="pic1" /></li>
    <li><img src="http://savepic.net/624028.jpg" width="160" height="107"  alt="pic2" /></li>
    <li> <img src="http://savepic.net/616860.jpg" width="160" height="107"  alt="pic3" /></li>
      </ul>
    </div>

moresol
 
 

Пол : Женщина
Сообщения : 260
Карма : Без предупреждений
Благодарности : 4
Регистрация : 2010-12-12

http://mnenie.forumotion.com

Вернуться к началу Перейти вниз

Re: Ротатор картинок

Сообщение автор moresol в Ср 14 Сен - 0:12

Друззья, со ссылью уже справилась сама... )

Мож кто подскажет, что там в стиле именно изменить, чтобы картинку отцентрировать...

moresol
 
 

Пол : Женщина
Сообщения : 260
Карма : Без предупреждений
Благодарности : 4
Регистрация : 2010-12-12

http://mnenie.forumotion.com

Вернуться к началу Перейти вниз

Re: Ротатор картинок

Сообщение автор moresol в Ср 14 Сен - 0:40

Нет, все ж ссылки НЕ работают правильно...

Все клики почему-то выводят на тему, прикретленную к последней картинке...
ЧТО в коде НЕ ТАК???

Код:
<style type="text/css">
div#rotator {position:relative; height:250px; margin-left: 0px;}
div#rotator ul li {float:left; position:absolute; list-style: none;}
</style>

<div id="rotator">
<ul>
<li class="show">

<a href="адрес темы"><img src="адрес картинки" alt="название" /></a></li>

<li><a href="адрес темы"><img src="адрес картинки" alt="название" /></a></li>

<li><a href="адрес темы"><img src="адрес картинки" alt="название" /></a></li>

</ul>
</div>


moresol
 
 

Пол : Женщина
Сообщения : 260
Карма : Без предупреждений
Благодарности : 4
Регистрация : 2010-12-12

http://mnenie.forumotion.com

Вернуться к началу Перейти вниз

Re: Ротатор картинок

Сообщение автор moresol в Ср 14 Сен - 11:19

Словом, поговорила сама тут с собой )))

Нашла. Ежели кому надо, вот работающий код, который запихивается в виджет:

Код:
<style type="text/css">
div#rotator {width:100%; position:relative; height:250px; margin-left: auto;}
div#rotator ul li {width:100%; float:left; position:absolute; list-style: none;}
div#rotator ul li.show {width:100%; z-index:500; padding: 0; list-style: none; margin-left: auto; margin-left: auto;}

    </style>

<table width=100% border=0><tr><td align=center>

    <div id="rotator">
    <ul>
    <li class="show">

<a href="ссыль"><img src="адрес картинки" alt="название" /></a></li>

<li><a href="ссыль"><img src="адрес картинки" alt="название" /></a></li>

<li><a href="ссыль"><img src="адрес картинки" alt="название" /></a></li>
 
    </ul>
    </div>

</td></tr></table>

Помимо этого в Модули - Управление кодами Javascript вставляем такую вот красоту:

Код:
function theRotator() {
      // Устанавливаем прозрачность всех картинок в 0
      $('div#rotator ul li').css({opacity: 0.0});
   
      // Берем первую картинку и показываем ее (по пути включаем полную видимость)
      $('div#rotator ul li:first').css({opacity: 1.0});
   
      // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
      setInterval('rotate()',3000);
    }
   
    function rotate() { 
      // Берем первую картинку
      var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));
   
      // Берем следующую картинку, когда дойдем до последней начинаем с начала
      var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); 
   
      // Расскомментируйте, чтобы показвать картинки в случайном порядке
      // var sibs = current.siblings();
      // var rndNum = Math.floor(Math.random() * sibs.length );
      // var next = $( sibs[ rndNum ] );
   
      // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
      next.css({opacity: 0.0})
      .addClass('show')
      .animate({opacity: 1.0}, 1000);
   
      // Прячем текущую картинку
      current.animate({opacity: 0.0}, 1000)
      .removeClass('show');
    };
   
    $(document).ready(function() {     
      // Запускаем слайдшоу
      theRotator();
    });

В сопроводиловках к ротатору обычно пишут, что все картинки должны быть одного размера. В принципе - не обязательно. Лучше конечно, чтобы они хотя бы по высоте были одинаковы, что же касается ширины, то код настроен на центрирование картинки, так что при плавной их смене разнобой в ширине не смотрится уродливо. Удачи.

moresol
 
 

Пол : Женщина
Сообщения : 260
Карма : Без предупреждений
Благодарности : 4
Регистрация : 2010-12-12

http://mnenie.forumotion.com

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения