Бегущая строка фотографий без каких-либо скриптов для любых модулей

+19
2.23K
Перепробовал все скрипты галерей, скролингов и тому подобное, все вызывали конфликты с табами в профиле.Наконецто набрёл на очень интересное решение с использованием не официального кода html.
Создаем module-simple2.tpl (назвать можно как угодно) и прописываем в админке для модуля этот tpl.

  1. <marquee behavior="scroll" direction="left" scrollamount="20" onmouseover="this.stop();" onmouseout="this.start();">
  2. {$mod.body}
  3. </marquee>
  4. </p>
Вот и всё, очень легко и просто.Демо тут click here
+2
12 лет назад #
все бегущее имеет негатив для пользователя. Имхо.
Нравится мне у вас эффект с аватаром. Поделитесь)
+1
Егор Егор 12 лет назад #
Код PHP:
Нравится мне у вас эффект с аватаром. Поделитесь)
Присоединяюсь
+3
googlebot googlebot 12 лет назад #
Сделано неплохим скриптом highslide, который вообще-то небесплатен.
0
Михаил М. Михаил М. 12 лет назад #
highslide не бесплатен это факт, если сайт коммерческий, а если общественный пользуйся на здоровье, условие разработчика...
0
12 лет назад #
Эффект с аватаром рально полезней этого бегущего альбома. Поделись эфектом плиз!!!! Оч просим... А Альбом ненада нам, от него голова кружится.
+2
alexbabo alexbabo 12 лет назад #
на днях выложу в блоге как делал
0
12 лет назад #
спасибо брат
0
Егор Егор 12 лет назад #
Спасибо огромное - жду с нетерпением!
0
alexbabo alexbabo 12 лет назад #
Смотрите в моём блоге, выложил.
0
reload reload 12 лет назад #
Кто знает как можно сделать его без пробелов?
чтоб после последнего фото не было ожидания...
0
12 лет назад #
дать ссылку на альбом где много фото..предполагаю так.
0
reload reload 12 лет назад #
дать ссылку на альбом где много фото..предполагаю так.
В настройках модуля можно конечно указать и 100 фото) но после 100 все равно будет пауза(
0
12 лет назад #
А скорость уменьшиьт можно?
0
googlebot googlebot 12 лет назад #
0
Imran Imran 12 лет назад #
Под не официальным кодом html, что имеется ввиду?
0
reload reload 12 лет назад #
Наверное то, что тег <marquee> не входит в спецификацию HTML и его наличие приведет к невалидному коду)
0
Дмитрий Дмитрий 12 лет назад #
А как вставить фото? а то только {$mod.body} бегает((
0
sg552 sg552 12 лет назад #
При использовании marquee картинка двигается рывками как вы заметили. Более рационально использовать ява-скрипты, переход получается плавнее.
Код PHP:
<?php
?>

<script language="JavaScript1.2">

/*
Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
Credit MUST stay intact
*/

//Specify the marquee's width (in pixels)
var marqueewidth="850px"
//Specify the marquee's height
var marqueeheight="312px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor="#ffffff"
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=0

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<nobr><img src="/templates/victoryhand/images/2.jpg"><img src="/templates/victoryhand/images/3.jpg"><img src="/templates/victoryhand/images/4.jpg"><img src="/templates/victoryhand/images/5.jpg"><img src="/templates/victoryhand/images/6.jpg"><img src="/templates/victoryhand/images/7.jpg"><img src="/templates/victoryhand/images/8.jpg"><img src="/templates/victoryhand/images/9.jpg"><img src="/templates/victoryhand/images/10.jpg"><img src="/templates/victoryhand/images/11.jpg"><img src="/templates/victoryhand/images/12.jpg"><img src="/templates/victoryhand/images/13.jpg"><img src="/templates/victoryhand/images/14.jpg"><img src="/templates/victoryhand/images/15.jpg"><img src="/templates/victoryhand/images/16.jpg"><img src="/templates/victoryhand/images/17.jpg"><img src="/templates/victoryhand/images/18.jpg"><img src="/templates/victoryhand/images/19.jpg"><img src="/templates/victoryhand/images/20.jpg"><img src="/templates/victoryhand/images/21.jpg"><img src="/templates/victoryhand/images/2.jpg"><img src="/templates/victoryhand/images/3.jpg"><img src="/templates/victoryhand/images/4.jpg"><img src="/templates/victoryhand/images/5.jpg"><img src="/templates/victoryhand/images/6.jpg"><img src="/templates/victoryhand/images/7.jpg"><img src="/templates/victoryhand/images/8.jpg"><img src="/templates/victoryhand/images/9.jpg"><img src="/templates/victoryhand/images/10.jpg"><img src="/templates/victoryhand/images/11.jpg"><img src="/templates/victoryhand/images/12.jpg"><img src="/templates/victoryhand/images/13.jpg"><img src="/templates/victoryhand/images/14.jpg"><img src="/templates/victoryhand/images/15.jpg"><img src="/templates/victoryhand/images/16.jpg"><img src="/templates/victoryhand/images/17.jpg"><img src="/templates/victoryhand/images/18.jpg"><img src="/templates/victoryhand/images/19.jpg"><img src="/templates/victoryhand/images/20.jpg"><img src="/templates/victoryhand/images/21.jpg"></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////
marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"

}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
<?php
?>
Помещаем в includes/myphp/ и вызываем вставкой в любой статье.
С ув. владелец Клуба мобильных телефонов Samsung.
0
Ne OS Ne OS 12 лет назад #
+

Еще от автора

Адаптивный шаблон Sunny - InstantCMS 2 .Free
Адаптивный шаблон. Адаптивный слайдер,на мобильных устройставх перелистывается пальцем. С анимацией,позиции подгружаются по мере прокрутки страницы.
Модуль "Контент панель".Инстант 1.10.3-1.10.4
Вначале планировался простенький модуль делающий перелинковку статей по методу кольца в разделе. Но модуль разросся и оброс многими функциями.
Модуль который виден только в профиле.Инстант.1.10.4
По просьбе Доротея Всё неимоверно элементарно. Создаем копию шаблона module.tpl,с другим именем,в нашем случае module_user.tpl.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.