Endless moving images bottom to top
Hi
I have a couple of pictures that i want to scroll from the bottom to the top.
I have this awesome code from wilq32 which scrolls pics from right to left instead.
I've been trying to modify the code so it scrolls bottom to top in stead of right to left.
All help is muchly appreciapted.
Regards,
24C
I have a couple of pictures that i want to scroll from the bottom to the top.
I have this awesome code from wilq32 which scrolls pics from right to left instead.
I've been trying to modify the code so it scrolls bottom to top in stead of right to left.
All help is muchly appreciapted.
Regards,
24C
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test SlidingImages</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script type="text/javascript" src="Wilq32.SlideImagesCompressed.js">
</script>
<div id="slider">
<script type="text/javascript">
var images=[
'various/JS-008.jpg',
'various/white.jpg',
'various/JS-101.jpg',
'various/white.jpg',
'various/JS-104.jpg',
'various/white.jpg',
'various/JS-066.jpg',
'various/white.jpg',
'various/JS-059.jpg',
'various/white.jpg',
];
document.getElementById('slider').appendChild(new Wilq32.SlideImages(images,795,350,10).show());
document.getElementById('slider').firstChild.style.position="relative";
</script>
</div>
</body>
</html>
/* _______________________________________*/
/* _______________________________________*/
/* file : Wilq32.SlideImagesCompressed.js */
/* _______________________________________*/
/* _______________________________________*/
/* THIS IS FREE SCRIPT BUT LEAVE THIS COMMENT IF
* YOU WANT USE THIS CODE ON YOUR SITE
*
* Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 10.2008
*
*/
/**
* Function to create sliding images in div declared by settings provided and CSS class Wilq32SlideImagesClass.
* @param {Object} imagesArray Array of images like: ["http://sometest.net/img1.jpg","http://sometest.net/img2.jpg"]
* @param {Object} width Width of cuting plane
* @param {Object} height Height of cutting plane
* @param {Object} speed Speed of sliding
*/
function ab(element,bb){
if(document.defaultView&&document.defaultView.getComputedStyle){
var cb=document.defaultView.getComputedStyle(element,'').getPropertyValue(bb.replace(/[A-Z]/g,function(db,char){return"-"+db.toLowerCase();}));
}
else if(element.currentStyle)var cb=element.currentStyle[bb];else var cb=false;return cb;}
if(typeof(Wilq32)=="undefined")Wilq32={Author:"Wilq32"}
var d=document;
var eb='createElement';
var fb='appendChild';
var gb='firstChild';
var hb='lastChild';
var s='style';
var ib='marginLeft';
var jb='marginRight';
Wilq32.SlideImages=function(kb,lb,mb,nb){this.ob=nb;this.main=d[eb]('div');
this.main.className="Wilq32SlideImagesClass";
this.main[s].width=lb+"px";
this.main[s].height=mb+"px";
this.main[s].overflow="hidden";
this.main[fb](d[eb]('div'))[s].position="relative";
this.main[hb][s][ib]="0px";
this.main[hb][s].width="999999px";
this.imgCount=kb.length;
for(var i=0;i<this.imgCount;i++){
this.main[hb][fb](d[eb]('img'));
this.main[hb][hb].src=kb[i];
}
this.pb();
}
Wilq32.SlideImages.prototype.show=function(){return this.main;}
Wilq32.SlideImages.prototype.pb=function(){
var qb=this;
var rb=this.main[hb];
var sb=this.main[hb][gb];
var tb=sb.offsetWidth+(parseInt(ab(sb,ib)))+(parseInt(ab(sb,jb)));rb[s][ib]=(parseInt(rb[s][ib])-1)+"px";
if(-parseInt(rb[s][ib])>tb){this.main[hb][s][ib]="0px";
this.main[hb][fb](d[eb]('img'));
this.main[hb].replaceChild(this.main[hb][gb],this.main[hb][hb]);
}
setTimeout(function(){qb.pb()}
,qb.ob);}
ASKER
Never heard of J Carousel. But it looks intresting, will deffenitly look at it.
But it's not really what i'm looking for.
The idea is to esteticly enhance a horizontal zone on a website.
It would be like a horizon on the top of the page. Continuously moving upwards.
I would use 2 or 3 or more JPGs that follow up to eachother as if it were an endless picture
With the size set to eg. 795 width and 50 height ... (in code height is 350 for testing purposes)
But it's not really what i'm looking for.
The idea is to esteticly enhance a horizontal zone on a website.
It would be like a horizon on the top of the page. Continuously moving upwards.
I would use 2 or 3 or more JPGs that follow up to eachother as if it were an endless picture
With the size set to eg. 795 width and 50 height ... (in code height is 350 for testing purposes)
What about marquee ?
http://en.wikipedia.org/wiki/Marquee_element
http://en.wikipedia.org/wiki/Marquee_element
<html><head></head> <body><div>
<table><tr><td>
<marquee id="scroller" scrollamount="1" direction="up" width="795" height="50" bgcolor="#ffffff">
<img src="pic795x50-1.jpg" width="795" height="50"><br>
<img src="pic795x50-2.jpg" width="795" height="50"><br>
<img src="pic795x50-3.jpg" width="795" height="50"><br>
</marquee>
</td></tr>
</table>
</div></body></html>
ASKER
This is what i used first.
It doesn't move smoothly and it's not endless.
I've found another code, (which makes it endless)
http://www.jargamms.com/download/marquee.html
However i think the code is way to big and not as smooth like wilq32 s code
I prefer to alter wilq32 s code because i believe it works much smoother.
Haven't had the time yet to test the code and alter it. But i'm sure it must be possible.
It doesn't move smoothly and it's not endless.
I've found another code, (which makes it endless)
http://www.jargamms.com/download/marquee.html
However i think the code is way to big and not as smooth like wilq32 s code
I prefer to alter wilq32 s code because i believe it works much smoother.
Haven't had the time yet to test the code and alter it. But i'm sure it must be possible.
ASKER
Clean cut code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" src="scripts/prototype.js"></script>
<script language="javascript" src="scripts/marquee.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="javascript simple solution, simple solution, free script, web solution, free web solution, prototype, programming knowledge, new concept, javascript analog clock, endless marguee, font size, upload progress bar, favicon icon" />
<title>Javascript Endless Marquee</title>
<style>
.dummyClass {
float:left;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="795">
<div style="width:795px; height:350px; overflow:hidden;position:relative;z-index:1000; border:0px solid #000066; float:left">
<div id="marqueecontainer2" style="width:795px;height:350px; position:left;">
<div id="vmarquee2" style="text-align:left; margin-left:2px;width:795px; position:absolute; text-decoration:none;">
<img src="Judeco/various/JS-008.jpg" alt="Javascript Endless Marquee" border="0" />
<img src="Judeco/various/JS-101.jpg" alt="Javascript Endless Marquee" border="0" />
<img src="Judeco/various/JS-104.jpg" alt="Javascript Endless Marquee" border="0" />
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
My demo does not work on IE or your script ? Sorry for long response
ASKER
Hi Wilq32,
Thanks for dropping by.
it does work but it doesn't repeat itself.
But it runs very smooth and for me thats the most important part.
I have not seen that with the regular marquee or java enhanced marquee. With marquee it is moving in shocks. And it needs very much lines of code to make it work.
So this is why i think your script is much better, i've been trying to alter it so it moves upwards, only i'm just making a big mess out of it.
I know it is not endless on IE but:
1. it's very smooth
2. first pic starts in the middle of the area
3. when i make the file array big enough and use the filenames 2 or 3 times in the same array. My guess is the user wil not wait long enough on that page to see it end.
Sorry for my long response as well. Been away for the weekend :-)
Regards,
24C
Thanks for dropping by.
it does work but it doesn't repeat itself.
But it runs very smooth and for me thats the most important part.
I have not seen that with the regular marquee or java enhanced marquee. With marquee it is moving in shocks. And it needs very much lines of code to make it work.
So this is why i think your script is much better, i've been trying to alter it so it moves upwards, only i'm just making a big mess out of it.
I know it is not endless on IE but:
1. it's very smooth
2. first pic starts in the middle of the area
3. when i make the file array big enough and use the filenames 2 or 3 times in the same array. My guess is the user wil not wait long enough on that page to see it end.
Sorry for my long response as well. Been away for the weekend :-)
Regards,
24C
Oh ok :)
Sure I can help - best would be if you could provide me with some page where I can play abit with firebug, so if you already did some work here - put that on some free/own hosting page and we will see what we can do.
Cheers,
Pawel
Sure I can help - best would be if you could provide me with some page where I can play abit with firebug, so if you already did some work here - put that on some free/own hosting page and we will see what we can do.
Cheers,
Pawel
ASKER
I've enclosed the files (clean cut), i think it's the easiest sollution.
I currently only test it offline on an local server. Once it works i upload it to my clients hosting server and replace it with his old website.
Regards,
24C
TestSlide.zip
I currently only test it offline on an local server. Once it works i upload it to my clients hosting server and replace it with his old website.
Regards,
24C
TestSlide.zip
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Oh description should be verical scrolling ... whateveR :P
ASKER
Fantastic !!! Super !!
Now i'm gonna spend a lot of time comparing both the scripts.
Try to figure out the difference. :-)
Thanks a lot Wilq32
Greetz,
24C
Now i'm gonna spend a lot of time comparing both the scripts.
Try to figure out the difference. :-)
Thanks a lot Wilq32
Greetz,
24C
If you're not afraid by JQuery : http://sorgalla.com/projects/jcarousel/
Check the examples.
Regards