PDA

View Full Version : Javascript Image Marquee



Del087
03-19-2014, 03:24 AM
I may be an idiot but I'm an idiot trying to learn. I'm trying to generate a javascript scrolling image marquee. I have got to the point where I can accomplish this with html using the <marquee> tag, however, I am looking for a continuous scroll, which from what I've read I cannot do with html. That being said, I did attempt to utilize the code supplied on DD here: http://dynamicdrive.com/dynamicindex2/crawler/index.htm. I am getting nothing but still images out of it and I know that there is something I am missing but, I have no idea what. Essentially, I copied this code and replaced the image files with my image files.

When advised to download crawler.js I do but, I don't know what to do with it from there. I am using Moonfruit to develop my website so, I'm not sure if I have to upload crawler.js to my Moonfruit file manager or what.

I want to create an image marquee with approximately 20 images. If you look at www.realtimehockey.net I want the incorporate the logos in the middle of the page into this marquee. It's 970 x 65 so, I would also like to know if there is code to automatically resize images to fit the marquee or do I have to manually resize all the images?

Below is the code I am attempting to use and I'm sure that there are many holes in it. I'm not sure what to remove, what to add, and what to replace.

Any help would be greatly appreciated and please bear with me as I am aware I don't have your coding knowledge.

Thanks in advance.


<html>
<head>
<script type="text/javascript" src="crawler.js">

/* Text and/or Image Crawler Script v1.53 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

</script>
<head/>

<body>
<div class="marquee" id="mycrawler">

</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '980px',
'background': 'lightyellow',
'border': '1px solid #CC3300'
},
inc: 8, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 4,
neutral: 150,
persist: true,
savedirection: true
});
</script>



<div class="marquee" id="mycrawler2">
<img src="http://i1314.photobucket.com/albums/t563/RTH13/Pahllogo150_zps104f462b.png" /> <img src="http://i1314.photobucket.com/albums/t563/RTH13/HPHL_zpsf3f48c5a.png" /> <img src="http://http://i1314.photobucket.com/albums/t563/RTH13/DVHL_zpsdbc89c8f.png" /> <img src="http://i1314.photobucket.com/albums/t563/RTH13/DallasStarsTHLLogo_zps94a4fca7.png" />
</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '970px',
'height': '65px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
</script><body/>
<html/>

Beverleyh
03-20-2014, 12:50 PM
I'm not sure what Moonfruit is or what it allows, but yes, you would need to upload the javascript file to your hosting server to get it to work on a live web page.

<script type="text/javascript" src="crawler.js">In the example above, the path to the js file (src="crawler.js") is a relative path - when just the filename is referenced, that means that the scripts needs to be uploaded to the same folder where the web page sits. You could also use an absolute path, which would look something like this;
<script type="text/javascript" src="http://www.mywebsite.com/path/to/js/crawler.js">

As for image resizing, its always better to edit/resize your images (and optimise them!) in an image editing software first before you put them online. This makes the file size smaller, and optimising them for web reduces the files size yet again, resulting in faster page load for visitors.

GIMP is a free image editing software: http:www.gimp.org/

And DD has an online image optimisation tool here: http://tools.dynamicdrive.com/imageoptimizer/

vwphillips
03-20-2014, 02:46 PM
I am not sure that is the best type of scroller for you

It is designed to change the scroll speed an direction as you mouseover the edges
where you suggest you want a continious scroll

also continious scroll is frowned on nowdays and step scrollers prefered

you would normally need to resize your images or specify the sizes in the HTML or CSS of the page

this step scroller automatically resizes the images to the container DIV height


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#scroller {
position:relative;height:65px;width:900px;border:solid red 1px;
}

.content {
height:65px;text-Align:left; /* height = the images height */
}

.content IMG{
float:left;margin-Left:5px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Step Scroller with Image Resize. (20-March-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/


var zxcStepScroller={

Next:function(id,ud){
var o=this['zxc'+id];
o?this.rotate(o,o.n+(typeof(ud)=='number'&&ud<0?-1:1)):null;
},

GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(o.id);
if (typeof(n)=='number'&&n>=0&&n<=o.lgth&&n!=o.n&&!(o.n==o.lgth&&n==0)){
o.ud=n>o.n?1:-1;
this.rotate(o,n);
}
}
},

Auto:function(id,ms){
var oop=this,o=oop['zxc'+id];
o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
},

Pause:function(id){
var o=this['zxc'+id];
if (o){
o.auto=false;
clearTimeout(o.to);
}
},

init:function(o){
var id=o.ScrollerID,ld=o.ImagePreload,p=document.getElementById(id),c=p?p.getElementsByTagName('DIV')[0]:null,imgs=c?c.getElementsByTagName('IMG'):[];
if (imgs[0]){
var a=[],i,z0=0;
c.style.position='absolute';
c.style.width='30000px';
for (;z0<imgs.length;z0++){
a[z0]=[imgs[z0],new Image()];
a[z0][1].src=imgs[z0].src;
}
o.id=id;
o.p=p;
o.c=c;
o.h=c.offsetHeight;
this.load(o,a,new Date(),(typeof(ld)=='number'&&ld>0?ld:5)*1000);
}
},

load:function(o,a,d,ms){
for (var oop=this,z1=0,z0=0;z0<a.length;z0++){
if (a[z0][1].width<40&&new Date()-d<ms){
o.to=setTimeout(function(){ oop.load(o,a,d,ms); },200);
return;
}
}
for (;z1<a.length;z1++){
if (a[z1][1].width<40){
o.c.removeChild(a[z1][0]);
a.splice(z1--,1);
}
else {
a[z1][0].style.height=o.h+'px';
a[z1][0].style.width=o.h/a[z1][1].height*a[z1][1].width+'px';
}
}
a[0]?oop.ready(o,a):null;
},

ready:function(o,a){
var n=0,add=o.AddEvents,ms=o.Animate,ud=o.AutoDirection,h=o.AutoHold,s=o.AutoStart,lst=a[a.length-1][0],c,z0=0,z1=1,z2=0;
o.sz=lst.offsetLeft+lst.width;
o.c.style.width=o.sz+5+'px';
o.a=[];
for (var z0=0;z0<a.length;z0++){
o.a[z0]=-a[z0][0].offsetLeft;
}
o.lgth=z0;
o.a[z0]=-o.sz+o.a[0];
c=o.c.cloneNode(true);
for (;z1<Math.ceil(o.p.offsetWidth/o.sz)+1;z1++){
c=c.cloneNode(true);
c.style.left=o.sz*z1+'px';
c.style.top='0px';
o.c.appendChild(c);
}
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
o.ud=typeof(ud)=='number'&&ud<0?-1:1;
o.n=0;
o.c=[o.c,'left',o.a[o.n]];
o.c[0].style.left=o.a[o.n]+'px';
o.p.style.overflow='hidden';
for (;z2<add.length;z2++){
if (add[z2]&&add[z2][0]){
n=document.getElementById(add[z2][0]);
c=add[z2][1];
if (n&&this[add[z2][2]]){
this.addevt(n,c=='mouseover'||c=='mouseout'||c=='mouseup'||c=='mousedown'?c:'click',add[z2][2],o.id,add[z2][3]);
}
}
}
this['zxc'+o.id]=o;
typeof(s)=='number'&&s>20?this.Auto(o.id,s):null;
},

rotate:function(o,a){
this.Pause(o.id);
var n=o.n;
o.auto=a===true;
n=o.auto?n+o.ud:a;
if (n>o.lgth||n<0){
o.c[2]=o.a[n>o.lgth?0:o.lgth];
n=n>o.lgth?1:o.lgth-1;
}
this.animate(o,o.c,o.c[2],o.a[n],new Date(),1000);
o.n=n
},

animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[2]=n;
a[0].style[a[1]]=n+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[2]=t;
a[0].style[a[1]]=t+'px';
o.auto?oop.Auto(o.id,o.h):null;
}
},

addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}



}

/*]]>*/
</script>

</head>

<body>

<input type="button" name="" value="Next" onclick="zxcStepScroller.Next('scroller',1);" />
<input type="button" name="" value="Back" onclick="zxcStepScroller.Next('scroller',-1);" />
<input type="button" name="" value="GoTo 0" onclick="zxcStepScroller.GoTo('scroller',0);" />
<input type="button" name="" value="GoTo 4" onclick="zxcStepScroller.GoTo('scroller',4);" />
<input id="b1" type="button" name="" value="GoTo 8" />
<div id="scroller">
<div class="content" >
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603529507_60x60.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603545684_69x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603547027_81x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603529603_60x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603529423_58x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603545853_76x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603546527_57x53.png" />
<img src="http://www.realtimehockey.net/_imgstore/6/4012195156/page_home_fTCQZqoQeadkIcbDEUNj_/CALH5Culuqu_eG5qPy2ePbOANxQ.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603546637_55x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603546908_60x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603547256_71x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603674801_57x57.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603675115_66x61.png" />
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/


zxcStepScroller.init({
ScrollerID:'scroller', // the unique ID name of the parent DIV. (string)
ImagePreload:5, //(optional) the time allowed to load all images in seconds. (number, default = 5)
Animate:1000, //(optional) the step duration in milliseconds. (number, default = 1000)
AutoDirection:1, //(optional) the initial auto rotation direction, >0 = forward, <0 = back. (number, default = 1 = forward)
AutoHold:1000, //(optional) the auto rotation fade 'hold' delay in milli seconds. (number, default = Animate*4)
AutoStart:2000, //(optional) the delay before starting auto rotation. (number, default = no auto start)
AddEvents:[ //(optional) an array defining the event call to add to elements to control the script. (array, default = inline event calls)
// field 0 = the unique ID name of the element.
// field 1 = the event type.
// field 2 = the script function name.
// field 3 = the control parameter to pass to the function.
['scroller','mouseover','Pause'],
['scroller','mouseout','Auto'],
['b1','click','GoTo',8]
]
});

/*]]>*/
</script></body>

</html>