Захотелось вот мне как-то "оживить" сайт и решил сделать вывод новых фотографий в виде бегущей строки, но чаще всего, когда нам нужно было сделать бегущую строку на сайте, мы пользовались тегом MARQUEE. Однако, он не является валидным, поэтому не проходит проверку соответствия стандартам.
Положительным моментом моего примера является то, что можно настроить скорость бегущей строки, ее направление и остановку или ее отсутствие при наведении курсора.
Шаг 1.
Подключил jquery и плагин jscroller в template.php своего шаблона между тегами <head>:
Значение left в данном случае показывает направление движения бегущей строки налево. Вместо него можно также прописать right, up, down, что соответственно будет являтся направлениями направо, вверх и вниз.
Скорость здесь равна 10. Это значение можно изменить по вашему желанию.
Убрав параметр true мы удалим свойство остановки бегущей строки при наведении курсора.
Шаг 2.
В css-файл шаблона добавил свойства блока с бегущей строкой:
Шаг 3.
Для вывода новых фото применил module-simple.tpl в котором прописал следующий код:
Ну и в админке в настройках модуля Новые фото подключил module-simple.tpl
Новые фотографии в валидной бегущей строке готовы!
Естественно все это можно использовать для вывода любых модулей.
Удачной реализации на Ваших сайтах!
Ну вроде все понятненько написал-описал.
Необходимые файлы Здесь
Положительным моментом моего примера является то, что можно настроить скорость бегущей строки, ее направление и остановку или ее отсутствие при наведении курсора.
Шаг 1.
Подключил jquery и плагин jscroller в template.php своего шаблона между тегами <head>:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jscroller-0.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Add Scroller Object $jScroller.add("#scroller_container","#scroller","left",10, true); // Start Autoscroller $jScroller.start(); }); </script>
Скорость здесь равна 10. Это значение можно изменить по вашему желанию.
Убрав параметр true мы удалим свойство остановки бегущей строки при наведении курсора.
Шаг 2.
В css-файл шаблона добавил свойства блока с бегущей строкой:
#scroller_container { position: relative; width: 600px; height: 60px; overflow: hidden; } #scroller { white-space: nowrap; line-height: 60px; font-size: 36px; font-family: Verdana, Arial, Helvetica, sans-serif; }
Для вывода новых фото применил module-simple.tpl в котором прописал следующий код:
<div id="scroller_container"> <div id="scroller"> {$mod.body} </div> </div>
Новые фотографии в валидной бегущей строке готовы!
Естественно все это можно использовать для вывода любых модулей.
Удачной реализации на Ваших сайтах!
Ну вроде все понятненько написал-описал.
Необходимые файлы Здесь
Реклама #
imprint 13 лет назад #
Александр 13 лет назад #
imprint 13 лет назад #
Александр 13 лет назад #
Бергал 13 лет назад #
Александр 13 лет назад #
lezginka.ru 13 лет назад #
+
lezginka.ru 13 лет назад #
-=NEXT=- 13 лет назад #
reload 13 лет назад #
Да там и ничего особенного, просто картинки движутся как обычная бегущая строка) но эффект есть)
reload 13 лет назад #
...в самом верху на главной, точка какая то бегает и фото с дублировались.
Ne OS 13 лет назад #
Ne OS 13 лет назад #
Ne OS 13 лет назад #
reload 13 лет назад #
Александр 13 лет назад #
reload 13 лет назад #
iParovoz 12 лет назад #
вот это лишнее, имхо