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

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


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

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

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


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

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

[решено]Как данный ефект CSS сделать для виджета?

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

[решено]Как данный ефект CSS сделать для виджета?

Сообщение автор Gamatos в Вс 24 Июл - 16:40

Как этот html http://wmdn.ru/javascript/smooth-changing-rotate-images-script-on-jquery/ можно засунуть в виджет?


Последний раз редактировалось: Gamatos (Вт 26 Июл - 0:20), всего редактировалось 1 раз(а)
avatar
Gamatos
Активист

Мужчина

Сообщения : 1280
Возраст : 25
Регистрация : 2009-11-06
Благодарности : 188

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

http://www.forum2x2.ru/forum

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

Re: [решено]Как данный ефект CSS сделать для виджета?

Сообщение автор Домовой в Вс 24 Июл - 18:02

Создай виджет, поставь туда
Код:
<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>
Строчка
<img src="http://savepic.net/635292.jpg" width="160" height="107" alt="pic1" /></li>
картинка - её ширина - её высота

В Модули - Управление кодами Javascript
создай 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()',5000);
}
 
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();
});
Пример в левом нижнем углу
http://test-063.forum777.com/portal


Последний раз редактировалось: Домовой (Вс 24 Июл - 19:19), всего редактировалось 2 раз(а)
avatar
Домовой
 

Мужчина

Сообщения : 6799
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3219

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

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

Re: [решено]Как данный ефект CSS сделать для виджета?

Сообщение автор Gamatos в Вс 24 Июл - 18:07

Спасибо,а как сделать фото по середине виджета а то утебя они чуть правее?
avatar
Gamatos
Активист

Мужчина

Сообщения : 1280
Возраст : 25
Регистрация : 2009-11-06
Благодарности : 188

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

http://www.forum2x2.ru/forum

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

Re: [решено]Как данный ефект CSS сделать для виджета?

Сообщение автор Домовой в Вс 24 Июл - 19:13

Поправил свой пост, пробуй
avatar
Домовой
 

Мужчина

Сообщения : 6799
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3219

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

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

Re: [решено]Как данный ефект CSS сделать для виджета?

Сообщение автор Gamatos в Вт 26 Июл - 0:20

Спасибо огромное!
avatar
Gamatos
Активист

Мужчина

Сообщения : 1280
Возраст : 25
Регистрация : 2009-11-06
Благодарности : 188

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

http://www.forum2x2.ru/forum

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

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


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