Horizntal Image scrolling

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

ashras99

Thread Starter
Joined
Jul 13, 2002
Messages
1,044
Anyone can tell me what's the script of scoll the images horizontally like on www.3d.sk

Is it possible to load the images dynamically from the folder of images.

By doing the View source i watch the coding....

<script language="JavaScript">
function smove(){
pics1.style.pixelLeft -= 1;
pics2.style.pixelLeft -= 1;
temp = pics2.clientWidth + pics2.style.pixelLeft;
if (pics1.style.pixelLeft < -pics1.clientWidth) pics1.style.pixelLeft = temp;
temp = pics1.clientWidth + pics1.style.pixelLeft;
if (pics2.style.pixelLeft < -pics2.clientWidth) pics2.style.pixelLeft = temp;
}
function setup(){
main.style.width = document.body.clientWidth - main.style.pixelLeft;
pics2.style.pixelLeft = pics1.clientWidth + pics1.clientLeft;
}
function scrollImgs() {
Gtimer = setInterval("smove()", 50);
}
function stopScroll() {
clearInterval(Gtimer);

}
</script>

But dont able to understand how to set the images or load the images. Please explain little in detail.
 
Joined
Jul 18, 2001
Messages
2,910
There has to be code farther down the page that is calling the javascript functions that you have posted above. You need to find those.
 

ashras99

Thread Starter
Joined
Jul 13, 2002
Messages
1,044
Ya, I already watch it but not able to understand fully, can you tell me in detail or just post whole coding here (with little description under which tag will be come)
 
Joined
Jul 18, 2001
Messages
2,910
Each picture is individually referenced. The functions are started with the "body onLoad" tag.

Hope that helps! :)

Code:
<body onLoad="setup(); scrollImgs();" bgcolor="#FFFFFF" text="#333333" link="#666666" vlink="#666666" alink="#666666">
<div id="main" style="position:absolute; left:0px; top:70; width:748px; height:150px; z-index:1; overflow: hidden;; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"> 
  <div id="pics1" style="position:absolute; left:0px; top:10px; width:685px; height:70px; z-index:2; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"> 
    <table width="100%" border="0" cellpadding="1" cellspacing="0">
      <tr> 
        <td> <a href="sitemap.htm">
        <img src="obr1.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="101" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr2.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr3.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="226" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr4.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="111" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm"> 
        <img src="obr6.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr5.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="105" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr7.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr8.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="105" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr9.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
        </td>
      </tr>
    </table>
</div>
<div id="pics2" style="position:absolute; left:675px; top:10px; width:685px; height:70px; z-index:2; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"> 
    <table width="100%" border="0" cellpadding="1" cellspacing="0">
<tr> 
        <td> <a href="sitemap.htm">
        <img src="obr1.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="101" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr2.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr3.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="226" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr4.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="111" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm"> 
        <img src="obr6.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr5.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="105" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr7.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr8.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="105" height="150"></a> 
        </td>
        <td> <a href="sitemap.htm">
        <img src="obr9.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
        </td>
      </tr>
    </table>
</div>
</div>
 

ashras99

Thread Starter
Joined
Jul 13, 2002
Messages
1,044
Guys please tell me how to load the images in the horizontal scroller from the external folder. May be in javascript or flash.
 

ashras99

Thread Starter
Joined
Jul 13, 2002
Messages
1,044
But the files not loaded from external file, they are mentioned in the html file.
 
Joined
Dec 30, 2004
Messages
106
You can't load the files dynamically for the simple reason that when you view the page the program (HTML and JavaScript) is running on your m/c and the pictures come from the server. You will need some kind of server-side scripting.

It would help if you could explain a simple scenario which would fit your needs. It is not easy to provide an answer if you don't tell us what the problem is :)

Gaz
 

ashras99

Thread Starter
Joined
Jul 13, 2002
Messages
1,044
I am designing this for my friend personal website. In future he wants easily updatebility due to less knowledge of computers. So, i am looking for a solution, he just upload the files in the folder on the server and on webpage this automatically updates.
 
Joined
Jul 29, 2001
Messages
21,334
Like was mentioned above, you need some sort of server side scripting to accomplish what you want.
 
Joined
Dec 30, 2004
Messages
106
OK, I see the problem.

If you have a fixed number of pictures, then simply get your friend to overwrite the existing pictures.

If you have a variable number, then there are a number of ways, depending on how complicated you want to get and what you have available to you on the server. You could create the page on the fly and add in all the images found in the relevant directory for example.

Gaz
 
Joined
Jul 29, 2001
Messages
21,334
It doesn't scroll at all if this is your example of a working script.
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top