Text/Image Effects Box Anywhere. V2Use it as a photo slideshow, a news scroller(replacement for the proboards news fader) or both, on any or all pages, anywhere you want. Just put the code where you want it to appear - Header, Footer, Top or Bottom, doesn't matter.
The 'box' can be any size you want, any color, borders, background image, insert any html into it so images and text can be clickable.
Optional pause length, randoimization of images/text. 7 different effects in and out.
No use of 'marquee' , only javascript and css
Tested in IE9, Chrome, and FF8.
Preview:
// The bigger the box, the better the effects!
Instructions for use:In the code:
var scrlrheight=
120; Adjust this to your required height of the box in pixels.
var scrlrwidth=
150; Adjust this to your required width of box in pixels.
var scrollbg= '#
FF0000'; This is the background color of the box - You can also set a background image in the css
var stilltime=
3500; This is the time that the image will pause once it has loaded into the box. (in Milliseconds)
var brdr=
10; This is the width of the border you require around the box in pixels.
var brdrstyl='
ridge'; Change this to alter your border style. Choose from 'ridge' , 'double' , 'groove' , 'outset' , 'inset' and 'solid'.
var step=
1; Smoothness of effect (1-5) : 1=smooth but slow 4=fast but slight jump - This all dependant on the size of your box.
var fxspd=
15; Speed of effect fastest=1 : slowest=99 Choose what suits you - dependant on the size of the box.
var mixmsgs=
0; Randomize images/text=1 : in order=0 For those with only a few images/texts then in order is recommended.
var preld=
1; Preload images=1 : no preload=0 If you are using images then it's probably better to preload the images.
var msg=[
[
'<img src="http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/Antarcticadecember2005192.jpg" border="0" >',
1,
1] ,
[
'IMAGEsrcORtextORhtml',
type of effect in(1-7),
type of effect out(1-7)] ,
['etc etc'] // (no comma on last entry)
]
'<img src="http:// url to your image" border="0">' OR
'This is the text you want to appear' Put your text here OR the url to your image OR any html you want. You MUST have the border="0" with your image src.
Effect in/out
1 Bottom to top
2 Right to left
3 Left to right
4 Top to bottom
5 Center to top/bottom
6 Center to left/right
7 Center to all bordersTo add a new image/text just add your a new line ['etc etc'], remembering that there is no comma at the end of the last entry.
In the CSS:
#scrlbox { background-image:url(''); Here you can add a fixed image to your box. An image smaller than your box will repeat to fill it.
Example : #scrlbox { background-image:url(
'http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/slideshowback.png');
border-color:
#FF0000; Change this to the required color of the border.
.txtscr {
font-family:
verdana;
font-size:
15;
color: #
FFFFFF;
font-weight:
bold;
text-align:
center; Change these as required to alter the appearance of your text in the box.
A.txtscr { text-decoration:none; color:#
FFFFFF;}
A.txtscr:visited { color:#
FFFFFF;}
A.txtscr:hover { text-decoration:none; color:#
FFFFFF;} Change these to alter the hover/link color and style of your text.
FAQ's:Can I make my text/images clickable? Yes you can! Just use the appropriate html or from photobucket you can just paste in the HTML code like this: <a href="
s1136.photobucket.com/albums/n494/<i>pebble</i>league/?action=view¤t=Antarcticadecember2005192.jpg" target="
_blank"><img src="http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/Antarcticadecember2005192.jpg" border="0" alt="
Photobucket"></a>
and changing the parts in green as needed.
What size images can I use? Any size you want! But try to keep the memory size to a minimum where possible. Your image sizes should match the size of the box.
I am thinking that I want to put this on the main page only. So would the code go in the Main Header or Footer? Depends where you want it ! Header or footer, it doesn't matter, depending if you want it above or below your board.
I don't ever use the News fader, is this connected to that part of the board? No , it's nothing to do with the proboards news fader , it's totaly independant , so leave it switched off.
Can the length of time the image stays on the screen be adjusted? Yes, just change the var stilltime to the number of seconds you want it to pause *1000 (the number is in milliseconds , just increase it to have the image pause for longer.)
How do you set the images up so that one comes in from the left, top, bottom, right? In the var msg=[ part where you will put your links, the last two numbers are the effect in, (second to last 1-7) and the effect out (last number 1-7).
Is there a limit to the number of images that would be most efficient? No , no limit at all. One member of IOD has 60+ images !
How do I position the box ? You can position the box by putting the code in your headers/footers where you want it to appear. The easiest way of positioning the box on the screen is to then add <center></center> (or left or right) tags around the javascript code.
Is this going to affect the member's load time for the board? It shouldn't affect the load time of the page as the effects only start once the full page is loaded. (if you have adverts on your forum, you'll notice that it won't start until the adverts are loaded) If you set it so that it preloads the images it will improve the performance of the scrolling once the page has loaded.
And now you've read this far - Here's the code:-
Location = Where ever you want the code to appear.
<script type="text/javascript">
/* V2 Text Scroller / Photo Slideshow (or both) with optional scroll in/out directions, */
/* random order, preload, clickable text/photo's written by <i>pebble</i>. */
/* Feel free to use but please leave this header in tact - Do not repost.*/
var scrlrheight=285; /* height of the box */
var scrlrwidth=397; /* width of box */
var scrollbg= '#FF0000'; /* backgroundcolor of the box set image in css */
var stilltime=3500; /* pause time of the text/image in milliseconds*/
var brdr=10; /* Border size around box */
var brdrstyl='ridge'; /* border style */
var step=1; /* smoothness of effect : 1=smooth but slow */
var fxspd=15; /* Speed of effect fastest=1 : slowest=99 */
var mixmsgs=0; /* randomize images/text=1 : in order=0 */
var preld=1; /* preload images=1 : no preload=0 */
/* ['IMAGEsrcORtext','URLdestination','OPENinNEWwindowORnot',type of fxin(1-7),type of fxout(1-7)], (no comma on last entry) */
var msg=[
['<img src="http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/Antarcticadecember2005192.jpg" border="0" >',1,1] ,
['Some text here',7,7] ,
['Welcome '+pb_displayname+' To Your New Box!.',6,6] ,
['And you can add HTML to this as well.',2,2] // no comma on last entry
];
/* DO NOT TOUCH ANYTHING BELOW HERE */
var clipright=0;
var cliptop=0;
var clipbottom=0;
var clipleft=0;
var msgcount=-1;
var isMSIE = /*@cc_on!@*/0;
if(preld){for (i=0; i<msg.length-1;i++){
var patt=/img/gi
if(msg[i][0].match(patt)){document.write('<div id="prld">'+msg[i][0]+'</div>')}}}
function fxin(){
switch(msg[msgcount][3]){
case 1:
if (parseInt(document.getElementById('scrlrtext').style.top)>0) {
clipbottom+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.top=parseInt(document.getElementById('scrlrtext').style.top)-step
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
} break;
case 2:
if ((parseInt(document.getElementById('scrlrtext').style.left))>0) {
clipright+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.left=parseInt(document.getElementById('scrlrtext').style.left)-step
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
} break;
case 3:
if (parseInt(document.getElementById('scrlrtext').style.left)<0) {
clipleft-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.left=parseInt(document.getElementById('scrlrtext').style.left)+step
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
} break;
case 4:
if (parseInt(document.getElementById('scrlrtext').style.top)<0) {
cliptop-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.top=parseInt(document.getElementById('scrlrtext').style.top)+step
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
} break;
case 5:
if (cliptop>0){
cliptop-=step
clipbottom+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
} break;
case 6:
if (clipleft>0){
clipleft-=step
clipright+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
}break;
case 7:
if(cliptop>0||clipleft>0){
if (cliptop>0){
cliptop-=(step/2+(scrlrheight/scrlrwidth))
clipbottom+=(step/2+(scrlrheight/scrlrwidth))}
if(clipleft>0){
clipleft-=(step/2+(scrlrwidth/scrlrheight))
clipright+=(step/2+(scrlrwidth/scrlrheight))}
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
}}}
function fxout(){
switch(msg[msgcount][4]){
case 1:
if (parseInt(document.getElementById('scrlrtext').style.top)>-scrlrheight) {
cliptop+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.top=parseInt(document.getElementById('scrlrtext').style.top)-step
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
} break;
case 3:
if (parseInt(document.getElementById('scrlrtext').style.left)<scrlrwidth) {
clipright-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.left=parseInt(document.getElementById('scrlrtext').style.left)+step
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
}break;
case 2:
if (parseInt(document.getElementById('scrlrtext').style.left)>-scrlrwidth) {
clipleft+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.left=parseInt(document.getElementById('scrlrtext').style.left)-step
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
} break;
case 4:
if (parseInt(document.getElementById('scrlrtext').style.top)<scrlrheight) {
clipbottom-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.top=parseInt(document.getElementById('scrlrtext').style.top)+step
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
} break;
case 5:
if (cliptop<scrlrheight/2) {
cliptop+=step
clipbottom-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
}break;
case 7:
if(cliptop<scrlrheight/2||clipleft<scrlrwidth/2){
if(cliptop<scrlrheight/2){
cliptop+=(step/2+(scrlrheight/scrlrwidth))
clipbottom-=(step/2+(scrlrheight/scrlrwidth))}
if(clipleft<scrlrwidth/2){
clipleft+=(step/2+(scrlrwidth/scrlrheight))
clipright-=(step/2+(scrlrwidth/scrlrheight))}
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
}break;
case 6:
if (clipleft<scrlrwidth/2) {
clipleft+=step
clipright-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
}}}
function nxtmsg(){
clipright=0;
cliptop=0;
clipbottom=0;
clipleft=0;
document.getElementById('scrlrtext').style.top=0
document.getElementById('scrlrtext').style.left=0
msgcount++
if (msgcount>msg.length-1) {msgcount=0}
if (mixmsgs){msgcount=(Math.floor(Math.random()*(msg.length)))}
document.getElementById('scrlrtext').innerHTML="<table cellpadding=0 cellspacing=0><tr><td class='txtscr'><a href='"+msg[msgcount][1]+"' class='txtscr' target='"+msg[msgcount][2]+"'>"+msg[msgcount][0]+"</a></td></tr></table>"
if (msg[msgcount][3]==1){
clipright=scrlrwidth
document.getElementById('scrlrtext').style.top=scrlrheight }
else if (msg[msgcount][3]==2){
clipbottom=scrlrheight
document.getElementById('scrlrtext').style.left=scrlrwidth }
else if (msg[msgcount][3]==3){
clipright=scrlrwidth
clipbottom=scrlrheight
clipleft=scrlrwidth
document.getElementById('scrlrtext').style.left=-scrlrwidth }
else if (msg[msgcount][3]==5){
cliptop=scrlrheight/2
clipright=scrlrwidth
clipbottom=scrlrheight/2+1 }
else if (msg[msgcount][3]==6){
clipright=scrlrwidth/2+1
clipbottom=scrlrheight
clipleft=scrlrwidth/2 }
else if (msg[msgcount][3]==7){
cliptop=scrlrheight/2
clipright=scrlrwidth/2+1
clipbottom=scrlrheight/2
clipleft=scrlrwidth/2 }
else if (msg[msgcount][3]==4){
cliptop=scrlrheight
clipright=scrlrwidth
clipbottom=scrlrheight
document.getElementById('scrlrtext').style.top=-scrlrheight }
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
fxin()
}
if (isMSIE) {document.write('<div id="scrlbox" style="width:'+(scrlrwidth+(2*brdr))+'px;height:'+(scrlrheight+(2*brdr))+'px;border-style:'+brdrstyl+'; border-width:'+brdr+';">')}
else {document.write('<div id="scrlbox" style="width:'+(scrlrwidth)+'px;height:'+(scrlrheight)+'px;border-style:'+brdrstyl+'; border-width:'+brdr+';background-color:'+scrollbg+';">')};
document.write('<div id="scrlrtext" style="border:none;position:absolute;width:'+(scrlrwidth)+'px;height:'+scrlrheight+'px;"></div></div>')
window.onload=nxtmsg
</script>
And here's the CSS:
Location = anywhere above the code.
<style type="text/css">
#scrlbox { background-image:url('http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/slideshowback.png');
border-color: #FF0000;
position:relative;
}
#prld {
display:none;
}
.txtscr {
font-family:verdana;
font-size:15;
color: #FFFFFF;
font-weight: bold;
text-align:center;
}
A.txtscr { text-decoration:none; color:#FFFFFF;}
A.txtscr:visited { color:#FFFFFF;}
A.txtscr:hover { text-decoration:none; color:#FFFFFF;}
</style>