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

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

Ротатор картинок Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

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

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

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

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

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

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

Последние темы
» Не корректное отображение картинок
автор Luz Сегодня в 12:40

» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Сегодня в 12:13

» Проблема с метатегом Description
автор VeraLV Март 18th 2024, 15:31

» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43

» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37

» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26

» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28

» Помощь в нескольких вопросах по форуму
автор лексей2222 Февраль 22nd 2024, 13:21

» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор Dana Domirani Февраль 14th 2024, 00:54

» Загрузка форума
автор лисенок Февраль 13th 2024, 01:09

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

Перейти вниз

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

Сообщение автор moresol Сентябрь 13th 2011, 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
moresol
 

Женщина

Сообщения : 257
Регистрация : 2010-12-12
Благодарности : 4

Без предупреждений

http://mnenie.forumotion.com

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

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

Сообщение автор moresol Сентябрь 14th 2011, 00:12

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

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

Женщина

Сообщения : 257
Регистрация : 2010-12-12
Благодарности : 4

Без предупреждений

http://mnenie.forumotion.com

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

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

Сообщение автор moresol Сентябрь 14th 2011, 00: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
moresol
 

Женщина

Сообщения : 257
Регистрация : 2010-12-12
Благодарности : 4

Без предупреждений

http://mnenie.forumotion.com

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

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

Сообщение автор moresol Сентябрь 14th 2011, 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
moresol
 

Женщина

Сообщения : 257
Регистрация : 2010-12-12
Благодарности : 4

Без предупреждений

http://mnenie.forumotion.com

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

Вернуться к началу

- Похожие темы

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