39 users online (0 members and 39 guests)  


Page 2 of 2 First 1 2
  Results 16 to 26 of 26

Related

  1. Images in a scroll bar    Forum: HTML Forum
    Replies: 2
  2. java scroll bar script?    Forum: Website Scripts Forum
    Replies: 1
  3. Java email script & W3C.org    Forum: Javascript Forum
    Replies: 5
  1. #16
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: scroll images using java script

    hi coot head, yes i changed my script and now i could seperate script to a seperate file and its work well.

    in ur previous code u have designed 4 boxes for center layout on my request. but due to a requirement change, i tried to change them to 6 boxes each of width 200px. i divided . but the layout entirely changed. the two new boxes got added below them. i want them to add adjacent to them.
    i hope u forgive me for the change.

    thank you

  2. #17
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: scroll images using java script

    Hi there ravindarjobs,

    no problem, here you go...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    * {
        margin:0;
        padding:0;
     }
    #wrapper {
        width:1000px;
        border:1px solid #000;
        margin:auto;
     }
    #header {
        width:1000px;
        height:100px;
        display:block;
     }
    #links {
        list-style-type:none;
     }
    #links .menu {
        background-color:#228d07;
        float:left;
        margin-right:2px;
     }
    #links .menu a {
        padding:3px 22px;
        color:#f7eff9;
        font-weight:bold;
        text-decoration:none;
     }
    #links #contact {
        background-color:#228d07;
        float:left;
     }
    #links #contact a {
        padding:3px 32px 3px 33px;
        color:#f7eff9;
        font-weight:bold;
        text-decoration:none;
     }
    #left {
        width:189px;
        height:289px;
        padding:5px;
        border-right:1px solid #000;
        border-bottom:1px solid #000;
        float:left;
     }
    #left p {
        height:100%;
        background-color:#fee;
     }
    #center {
        width:600px;
        height:300px;
        float:left;
     }
    .center_boxes {
        width:189px;
        height:139px;
        padding:5px;
        border-right:1px solid #000;
        border-bottom:1px solid #000;
        float:left;
     }
    .center_boxes p {
        height:100%;
        background-color:#efe;
     }
    #right {
        width:190px;
        height:289px;
        padding:5px;
        border-bottom:1px solid #000;
        float:left;
     }
    #right p {
        height:100%;
        background-color:#eef;
     }
    #bottom {
        height:100px;
        clear:both;
     }
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <img id="header" src="images/world.gif" alt="">
    
    <ul id="links">
     <li class="menu"><a href="http://yahoo.com">Menu0</a></li>
     <li class="menu"><a href="#">Menu1</a></li>
     <li class="menu"><a href="#">Menu2</a></li>
     <li class="menu"><a href="#">Menu3</a></li>
     <li class="menu"><a href="#">Menu4</a></li>
     <li class="menu"><a href="#">Menu5</a></li>
     <li class="menu"><a href="#">Menu6</a></li>
     <li class="menu"><a href="#">Menu7</a></li>
     <li id="contact"><a href="#">Contact Us</a></li>
    </ul>
    
    <div id="left"><p>left</p></div>
    
    <div id="center">
     <div class="center_boxes"><p>center top left</p></div>
     <div class="center_boxes"><p>center top middle</p></div>
     <div class="center_boxes"><p>center top right</p></div>
     <div class="center_boxes"><p>center bottom left</p></div>
     <div class="center_boxes"><p>center bottom middle</p></div>
     <div class="center_boxes"><p>center bottom right</p></div>
    </div>
    
    <div id="right"><p>right</p></div>
    
    <div id="bottom">scrolling here</div>
    
    </div>
    
    </body>
    </html>

  3. #18
    me8work's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2008
    Posts
    3

    Re: scroll images using java script

    Hello ravindarjobs and coot head.

    I am a fresh graduate and I have recently started working...I am developing a website and with the help of both of yours discussions( I had been reading your posts for 2 days now ), I have developed a working scroll bar on my website's product page.
    In this scroll bar we display many photographs for 1 product, which I was easily able to fetch from the database.

    My design idea for the page is, I am having a big image say (400 *400 ) and just below it I have my autoscrollbar for which matches in width and takes thumbnails of the product with small size.

    Now what I wanna do is, when the images are scrolling...I want it like :-
    1:- It should stop scrolling when we hover the mouse over it ( so it gives the user the option to see the thumbnails and click any of them )
    2:- As the 1st point is done...when someone wants to click at any thumbnail, I wish that thumbnail to go into the bigger image window (400*400) on top of the scroll bar. ( May be some clickswap or get element by id function may work).

    The other 2 ideas, are not very important though are very creative in my opinion. these are :-

    3:- as the images are scrolling generally with the width of the scroll bar container and thumbnails....there would be around 5 images within the container at a given instance....so my idea is to have scroll buttons on either side of the container which will move a slot of images ( say 5 images either left or right ) on 1 click.

    4:- the last is when some image is in the center of the container while scrolling can we make it appear bigger than the images adjacent to it or can we do the same when we click any image.


    Thanks a lot in advance.

    And please do reply, even if you guys don't find any solution to my ideas. I am also working on this, so If I discover anything, I will definately post it wid the full code...so may other freshers like me be benefited wid this. Thanks again, God Bless.

  4. #19
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: scroll images using java script

    Hi there me8work,

    and a warm welcome to these forums.

    Here is an example that put together recently...
    http://mysite.orange.co.uk/azygous/snuggles1.html
    ...and here is the code...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    * {
        margin:0;
        padding:0;
     }
    body {
        background-image:url(images/bodyBg.jpg);
        margin:10px;
     }
    #vertical_container {
        position:relative;
        width:74px;
        height:284px;
        border-width:4px;
        border-style:solid;
        border-color:#454672 #454672 #24243c #24243c;
        background-color:#fff;
        overflow:hidden;
     }
    #vertical {
        position:absolute;
        width:66px;
        padding:4px 4px 0 4px;
        list-style-type:none;
     }
    #vertical li { 
        height:66px;
        margin-bottom:4px;
     }
    
    #vertical img {
        display:block;
        border:3px double #999;
     }
    #horizontal_container {
        position:relative;
        width:284px;
        height:74px;
        border-width:4px;
        border-style:solid;
        border-color:#454672 #454672 #24243c #24243c;
        background-color:#fff;
        overflow:hidden;
        margin:auto;;
     }
    #horizontal {
        position:absolute;
        width:1120px;
        height:66px;
        padding:4px 0 4px 4px;
        list-style-type:none;
     }
    #horizontal li {
        margin:0 4px 0 0;
        float:left;
     }
    #horizontal img {
        display:block;
        border:3px double #999;
     }
    #myimg_holder {
        position:absolute;
        border-width:5px;
        border-style:solid;
        border-color:#454672 #454672 #24243c #24243c;
        background-color:#333;
        padding:10px;  
    }
    #close{ 
        position:absolute;
        width:50px;
        line-height:20px;
        left:50%;
        margin-left:-25px;
        margin-top:10px;
        text-align:center;
        background-color:#333;
        border:1px solid #ccc;
        font-family:sans-serif;
        font-size:12px;
        color:#fff;
        cursor:pointer;
     }
    #myimg {
        display:block;
        border:3px double #666;
        background-color:#fff;
        filter:alpha(opacity=0);
        opacity:0;
     }
    .hide {
        visibility:hidden;
     }
    #direction_h {
        width:292px;
        height:40px;
        font-size:28px;
        margin:auto;
    }
    #direction_v {
        width:82px;
        height:40px;
        font-size:28px;
    }
    .l {
        float:left;
     }
    .r {
        float:right;
     }
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    #vertical li {
        margin-bottom:1px;
     }
    </style>
    <![endif]-->
    
    <script type="text/javascript">
       var obj;
       var obj1;
       var obj2;
       var obj3;
       var rl=0;
       var ud=0;
       var rht;
       var lft;
       var upp;
       var dwn;
       var op=0;
       var fin;
       var speed=50;
       var preloads=[];
    
    function preload(){
    
    for(c=0;c<arguments.length;c++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[c];
      }
     }
    preload(
       'images/apple.jpg','images/banana.jpg','images/ten_quid.jpg','images/blood.jpg',
       'images/buddha.jpg','images/col.jpg','images/autumn.jpg','images/girl.jpg',
       'images/clouds.jpg','images/ball_shad.jpg','images/lace.jpg','images/moon.jpg',
       'images/car.jpg','images/dog.jpg','images/grap.jpg','images/aaa.jpg');
    
    window.onload=function() {
       obj=document.getElementById('myimg_holder');
       obj1=document.getElementById('myimg');
       obj2=document.getElementById('vertical');
       obj3=document.getElementById('horizontal');
       anc=obj2.getElementsByTagName('a');
       anc1=obj3.getElementsByTagName('a');
    for(c=0;c<anc.length;c++) {
    anc[c].onclick=function() {
       clearTimeout(fin);
       op=0;
       fadeIn();
       setPopup(this.href);
       return false;
       }
      }
    for(c=0;c<anc1.length;c++) {
    anc1[c].onclick=function() {
       clearTimeout(fin);
       op=0;
       fadeIn();
       setPopup(this.href);
       return false;
       }
      }
    document.getElementById('right').onmouseover=function() {
        goRight();
     }
    document.getElementById('left').onmouseover=function() {
        goLeft();
     }
    document.getElementById('up').onmouseover=function() {
        goUp();
     }
    document.getElementById('down').onmouseover=function() {
        goDown();
      }
     }
    
    function setPopup(pic) {
       obj1.src=pic
       w=obj1.offsetWidth;
       h=obj1.offsetHeight;
       obj.style.width=w+'px';
    if((document.body.offsetWidth-w)/2<110) {
       obj.style.left='110px';
     }
    else {
       obj.style.left=(document.body.offsetWidth-w)/2+'px';
     }                                                            
       obj.style.top='150px';
       obj.className='';
    document.getElementById('close').onclick=function() {
       obj.className='hide';
      }
     }
    
    function goRight() {
    if(rl<-840) {
       clearTimeout(rht);
       return;
     }
    document.getElementById('right').onmouseout=function() {
       clearTimeout(rht);
       return;
     }
       obj3.style.left=rl+'px';
       rl-=2;
       rht=setTimeout('goRight()',40);
     }
    
    function goLeft() {
    if(rl>0) {
       clearTimeout(lft);
       return;
     }
    document.getElementById('left').onmouseout=function() {
       clearTimeout(lft);
       return;
     }
       obj3.style.left=rl+'px';
       rl+=2;
       lft=setTimeout('goLeft()',40);
     }
    
    function goUp() {
    if(ud<-840) {
       clearTimeout(upp);
       return;
     }
    document.getElementById('up').onmouseout=function() {
       clearTimeout(upp);
       return;
     }
       obj2.style.top=ud+'px';
       ud-=2;
       upp=setTimeout('goUp()',40);
     }
    
    function goDown() {
    if(ud>0) {
       clearTimeout(dwn);
       return;
     }
    document.getElementById('down').onmouseout=function() {
       clearTimeout(dwn);
       return;
     }
       obj2.style.top=ud+'px';
       ud+=2;
       dwn=setTimeout('goDown()',40);
     }
    
    function fadeIn(){
    if(obj1.filters){
       obj1.style.filter='alpha(opacity='+op+')';
     }
    else {
       obj1.style.opacity=op/100;
     }
       op++;
    if(op>100) {
       op=0;
       clearTimeout(fin);
       return;
     }
       fin=setTimeout('fadeIn()',speed)
     }
    </script>
    
    
    </head>
    
    <body>
    
    <div id="myimg_holder" class="hide">
    <div id="close">close</div>
    
    <img id="myimg" src="" alt="">
    </div>
    
    <div id="horizontal_container">
    <ul id="horizontal">
     <li><a href="images/apple.jpg"><img src="images/apple_thumb.jpg" alt=""></a></li>
     <li><a href="images/banana.jpg"><img src="images/banana_thumb.jpg" alt=""></a></li>
     <li><a href="images/girl.jpg"><img src="images/girl_thumb.jpg" alt=""></a></li>
    
     <li><a href="images/aaa.jpg"><img src="images/aaa_thumb.jpg" alt=""></a></li>
     <li><a href="images/ten_quid.jpg"><img src="images/ten_quid_thumb.jpg" alt=""></a></li>
     <li><a href="images/blood.jpg"><img src="images/blood_thumb.jpg" alt=""></a></li>
     <li><a href="images/grap.jpg"><img src="images/grap_thumb.jpg" alt=""></a></li>
     <li><a href="images/buddha.jpg"><img src="images/buddha_thumb.jpg" alt=""></a></li>
     <li><a href="images/col.jpg"><img src="images/col_thumb.jpg" alt=""></a></li>
     <li><a href="images/autumn.jpg"><img src="images/autumn_thumb.jpg" alt=""></a></li>
     <li><a href="images/lace.jpg"><img src="images/lace_thumb.jpg" alt=""></a></li>
     <li><a href="images/moon.jpg"><img src="images/moon_thumb.jpg" alt=""></a></li>
    
     <li><a href="images/car.jpg"><img src="images/car_thumb.jpg" alt=""></a></li>
     <li><a href="images/ball_shad.jpg"><img src="images/ball_shad_thumb.jpg" alt=""></a></li>
     <li><a href="images/clouds.jpg"><img src="images/clouds_thumb.jpg" alt=""></a></li>
     <li><a href="images/dog.jpg"><img src="images/dog_thumb.jpg" alt=""></a></li>
    </ul>
    </div>
    <div id="direction_h"><span id="left" class="r">►</span><span id="right" class="l">◄</span> </div>
    
    
    <div id="vertical_container">
    <ul id="vertical">
     <li><a href="images/dog.jpg"><img src="images/dog_thumb.jpg" alt=""></a></li>
    
     <li><a href="images/clouds.jpg"><img src="images/clouds_thumb.jpg" alt=""></a></li>
     <li><a href="images/ball_shad.jpg"><img src="images/ball_shad_thumb.jpg" alt=""></a></li>
     <li><a href="images/car.jpg"><img src="images/car_thumb.jpg" alt=""></a></li>
     <li><a href="images/moon.jpg"><img src="images/moon_thumb.jpg" alt=""></a></li>
     <li><a href="images/lace.jpg"><img src="images/lace_thumb.jpg" alt=""></a></li>
     <li><a href="images/autumn.jpg"><img src="images/autumn_thumb.jpg" alt=""></a></li>
     <li><a href="images/col.jpg"><img src="images/col_thumb.jpg" alt=""></a></li>
     <li><a href="images/buddha.jpg"><img src="images/buddha_thumb.jpg" alt=""></a></li>
     <li><a href="images/grap.jpg"><img src="images/grap_thumb.jpg" alt=""></a></li>
    
     <li><a href="images/blood.jpg"><img src="images/blood_thumb.jpg" alt=""></a></li>
     <li><a href="images/ten_quid.jpg"><img src="images/ten_quid_thumb.jpg" alt=""></a></li>
     <li><a href="images/aaa.jpg"><img src="images/aaa_thumb.jpg" alt=""></a></li>
     <li><a href="images/girl.jpg"><img src="images/girl_thumb.jpg" alt=""></a></li>
     <li><a href="images/banana.jpg"><img src="images/banana_thumb.jpg" alt=""></a></li>
     <li><a href="images/apple.jpg"><img src="images/apple_thumb.jpg" alt=""></a></li>
    </ul>
    </div>
    <div id="direction_v"><span id="down" class="r">▼</span><span id="up" class="l">▲</span> </div>
    
    <div id="foo"></div>
    
    </body>
    </html>
    
    Last edited by HTML; 03-09-2012 at 10:24 AM.

  5. #20
    me8work's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2008
    Posts
    3

    Re: scroll images using java script

    Hello Coothead,

    I hope you are doing fine

    Thanks a lot for the quick reply , it really was a warm welcome, thanks again.

    Yes, I visited the link that you sent along with the code for it.Thats awesome !

    I modified my code according to it and it works fine but still I have a certain issues, which I think U can help me out with.Here are those issues:-

    1:-I had problem with the width which we define in the id 'horizontal' because the number of pictures which we have is not constant. As I am pulling the images from the database and I have defined a room for maximum 20 pictures ( which I fetch with an IF statement) so if suppose I have only 10 images for some product so the space for the rest of 10 images...goes blank white.

    The solution I found to it is, I created a counter, which increments with the number of images I have for a particular product. and then I give the width of id 'horizontal' = 'counter * (width of an image + 4 px, say for borders). This has solved my problem, I don't if this is the correct way to do it, but it works absolutely fine.

    2:- The javascript function goright(),
    here we have an if statement where we check the value of the variable 'rl' with a constant value...which infact causes the images to scroll more . I mean once the scroll of this function is complete...there are no pictures left in the scroll bar. the constant value we have is '840', which is a bit too large......when I have a product which has 12 images , then the constant value '456' works absolutely fine...but if in some product if there are more or less than 12 images, it again alters the combination. I tried to fix it with the same way I did for the counter, but it doesn't work .
    For your information, I am having my image width as '61' and height as '71' for the thumbnails.
    So, pls suggest me some solution to it and what changes do I need to make in the code and in which part of the code.

    3:- I was thinking if we can make the scroll bar continously scrolling, rather than havin to hover over the left and right buttons of the scroll bar ( like in your previous script which u gave to ravindarjobs) and if we can keep the images scrolling always when mouse is not on over the scroll bar.

    4:- The problem in my 2nd point can be resolved if we can continue to scroll the images rather than making them stop at left and right extremes.

    I think the 3rd and 4th point are almost the same, with a little difference, I dont know if we need 2 different functions for it or same function can resolve both queries.


    Many Thanks once again !

    Have a nice weekend.
    God Bless

  6. #21
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: scroll images using java script

    Hi there me8work,

    I will try to have a look at the issues over the weekend.
    It would also help if I had a link to your site or the full code so that I could get a feel for the page in question.

  7. #22
    me8work's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2008
    Posts
    3

    Re: scroll images using java script

    Hello Coothead Sir,

    I appreciate yr words.

    I have today tried to play with that code and I managed to make the images continuously scrolling and to scroll left and right according to mouse hover as well.

    Now my problem is....
    1:- When any of the product which we sell, has got only a few pictures ( say less than 6) which we upload on photobucket ( the links r stored in database and i fetch them from database). Then the images keep scrolling and then finally a Blank container appears, as there are no more images to display and then when we hover to right...the images come back to the container.
    So I want it not to show blank container at any point. I mean it should scroll only to an extent where the last image reaches the bar once.(hope i cleared my point)

    2:- Instead of having the left and right buttons below the container, can we place them in a big font on either side of the container ( so it appears better on the webpage and user clearly knows what they r meant for )

    3:- Is it possible that while scrolling...the image which is in the center of the scroll bar... can be made a bit bigger than others ( though the scrolling continues).

    The code I m using ( apart from the HTML and other PHP interfaces scripts )..which u may find of interest is :-

    Code:
    <style type="text/css">
    a {
    text-decoration: none;
    }
    #horizontal_container {
        position:relative;
        width:399px;
        height:86px;
        border-width:1px;
        border-style:solid;
        border-color:#454672 #454672 #24243c #24243c;
        background-color:#fff;
        overflow:hidden;
        margin:auto;
        left: -187px;
     }
    
    #horizontal li {
        margin:0 4px 0 0;
        float:left;
     }
    #horizontal img {
        display:block;
        border:3px double #999;
     }
    #myimg_holder {
        position:absolute;
        border-width:1px;
        border-style:solid;
        border-color:#fff;
        background-color:#fff;
        padding:0px;
        margin-top: 71px;
        margin-left: -180px;
    }
    
    #myimg {
        width : 400px;
        height: 392px;
        display:block;
        border:3px double #666;
        background-color:#fff;
        filter:alpha(opacity=0);
        opacity:0;
     }
    .hide {
        visibility:hidden;
     }
    #direction_h {
        width:402px;
        height:40px;
        font-size:18px;
        margin-left:5px;
        
    }
    #direction_v {
        width:82px;
        height:40px;
        font-size:28px;
    }
    .l {
        float:left;
     }
    .r {
        float:right;
     }
    
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    #vertical li {
        margin-bottom:1px;
     }
    </style>
    <![endif]-->
    
    <script type="text/javascript">
       var obj;
       var obj1;
       var obj2;
       var obj3;
       var rl=0;
       var ud=0;
       var rht;
       var lft;
       var upp;
       var dwn;
       var op=0;
       var fin;
       var m = 0;
       var n = 424;
       var speed=10;
       var preloads=[];
    
    function preload(){
    
    for(c=0;c<arguments.length;c++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[c];
      }
     }
    
    function scrollPics() {
        
         document.getElementById('div1').style.left=m+'px';
        //alert('bbb');
         //document.getElementById('div2').style.left=n+'px';
       m--;
       n--;
    if(m==-424) {
       m=-423;
     } 
    
    if(n==-424) {
       n=-423;
     }
    setTimeout('scrollPics()',speed);
     } 
        
    window.onload=function() {
        scrollPics();
     
    obj=document.getElementById('myimg_holder');
           obj1=document.getElementById('myimg');
           obj3=document.getElementById('horizontal');
           anc1=obj3.getElementsByTagName('a');
    
    for(c=0;c<anc1.length;c++) {
    anc1[c].onclick=function() {
       clearTimeout(fin);
       op=0;
       fadeIn();
       setPopup(this.href);
       return false;
       }
      }
    document.getElementById('right').onmouseover=function() {
        goRight();
     }
    document.getElementById('left').onmouseover=function() {
        goLeft();
     }
    }
    function setPopup(pic) {
       obj1.src=pic
       w=obj1.offsetWidth;
       h=obj1.offsetHeight;
       obj.style.width=w+'px';
    if((document.body.offsetWidth-w)/2<110) {
       obj.style.left='110px';
     }
    else {
       obj.style.left=(document.body.offsetWidth-w)/2+'px';
     }                                                            
       obj.style.top='150px';
       obj.className='';
    document.getElementById('close').onclick=function() {
       obj.className='hide';
      }
     }
    function goRight() {
    if(rl<-30) {
       clearTimeout(rht);
       return;
     }
    document.getElementById('right').onmouseout=function() {
       clearTimeout(rht);
       return;
     }
       obj3.style.left=rl+'px';
       rl-=2;
       rht=setTimeout('goRight()',40);
     }
    function goLeft() {
    if(rl>420) {
       clearTimeout(lft);
       return;
     }
    document.getElementById('left').onmouseout=function() {
       clearTimeout(lft);
       return;
     }
       obj3.style.left=rl+'px';
       rl+=2;
       lft=setTimeout('goLeft()',40);
     }
    
    function fadeIn(){
    if(obj1.filters){
       obj1.style.filter='alpha(opacity='+op+')';
     }
    else {
       obj1.style.opacity=op/100;
     }
       op++;
    if(op>100) {
       op=0;
       clearTimeout(fin);
       return;
     }
       fin=setTimeout('fadeIn()',speed)
     }
    
    </script>
    
    
    </head>
    
    
    <body  language="Javascript1.2" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
    <?php
    //require('Connections/Fische.php');
    
    $id=$_REQUEST['pbpID'];
    
    $dbh=mysql_connect ("dbhost", "dbuser", "dbpassword") or die ('I cannot connect to the database because: ' . mysql_error());
    mysql_select_db ("dbname"); 
    
    $sql = ("SELECT * FROM products WHERE Pb_ID= '$id'");
    $products_results1 = mysql_query($sql);
    $products_results=mysql_fetch_assoc($products_results1)
    
    ?>
    <br>
    <center>
    <table border="0" width="800" id="table3"  cellspacing="0"  cellpadding= "0">
    <tr><td  border="0"  width= "800" style="background-repeat: no-repeat;" background="images/Top2.jpg" height="10px" ></td>
    </tr><tr>
    <td width = "800" cellspacing="0" cellpadding="2" style="background-repeat: repeat;" background="images/mid2.jpg" nowrap><center>
    <?php
    
        echo "<table border='0' width='780' id='table1' height = '108' cellpadding='0' >";
        echo "<tr>";
        echo "<div id='item'>";
            echo "<td width='56%'><div id='imagewrapper'><a href='#'><img border='0' src='".$products_results['Pb_Image1']."'id='big_image' width='100%' height='100%' ></a></div>";
        echo "</td>";
        echo "</div>";
        echo "</tr>";
        echo "<tr align= 'left'><td>";
        echo "<div id='myimg_holder' class='hide'>";
        echo "<div id='close'></div>";
         
    
        echo "<img id='myimg' src='' alt=''>";
        echo "</div>";
     echo "<div id='horizontal_container'>";
     echo "<div id = div1>";
     echo "<ul id='horizontal'>";
    $count=0;
       if($products_results['Pb_Image1']) {$count+=1; echo  "<li><a href='".$products_results['Pb_Image1']."'><img src='".$products_results['Pb_Image1']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image2']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image2']."'><img src='".$products_results['Pb_Image2']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image3']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image3']."'><img src='".$products_results['Pb_Image3']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image4']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image4']."'><img src='".$products_results['Pb_Image4']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image5']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image5']."'><img src='".$products_results['Pb_Image5']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image6']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image6']."'><img src='".$products_results['Pb_Image6']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image7']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image7']."'><img src='".$products_results['Pb_Image7']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image8']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image8']."'><img src='".$products_results['Pb_Image8']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image9']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image9']."'><img src='".$products_results['Pb_Image9']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image10']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image10']."'><img src='".$products_results['Pb_Image10']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image11']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image11']."'><img src='".$products_results['Pb_Image11']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image12']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image12']."'><img src='".$products_results['Pb_Image12']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image13']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image13']."'><img src='".$products_results['Pb_Image13']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image14']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image14']."'><img src='".$products_results['Pb_Image14']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image15']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image15']."'><img src='".$products_results['Pb_Image15']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image16']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image16']."'><img src='".$products_results['Pb_Image16']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image17']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image17']."'><img src='".$products_results['Pb_Image17']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image18']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image18']."'><img src='".$products_results['Pb_Image18']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image19']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image19']."'><img src='".$products_results['Pb_Image19']."' width='61' height='71' /></a></li>";}
       if($products_results['Pb_Image20']) {$count+=1; echo "<li><a href='".$products_results['Pb_Image20']."'><img src='".$products_results['Pb_Image20']."' width='61' height='71' /></a></li>";}
     echo "</ul>";
     echo "</div>";
     echo "</div>";
     echo "<div id='direction_h'><span id='left' class='r'> Right </span><span id='right' class='l'> Left </span> </div>";
    echo"<div id='foo'></div>";
    echo "</td></tr>";
    echo "</table>";
        echo "<table  border='0' width='780' height='168'>";
         echo "<tr height='40%'>";
         echo "<td width='100%'>".$products_results['Pb_Long']."</td>";
         echo "</tr>";
         echo "</table>"; 
    ?>
    
    <style type="text/css">
    #div1 {
         position:absolute;
         left:0px;
         top:2px;
         width:<?php echo ($count*75)."px"; ?>;
         height:104px;
     }
    #horizontal {
        position:absolute;
        width:<?php echo ($count*75)."px"; ?>;
        height:75px;
        padding:4px 0 4px 4px;
        list-style-type:none;
     }
    </style>
    </body>
    
    </html>
    Thanks again.
    God Bless.
    Last edited by vinyl-junkie; 02-25-2008 at 11:11 AM. Reason: Added code tags

  8. #23
    bluballs's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2008
    Posts
    1

    Re: scroll images using java script

    Hey guys

    I tried out your scroller and it works fine, but it seems you can only put as many images as will fit in the container. If you had 10 images and want them scrolling...you need a container 10 imgs wide.

    Am I missing something or is there a way?

  9. #24
    annasue's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2010
    Posts
    2

    Re: scroll images using java script multiple times on a page

    Is it possible to place more than one of these scroll images on a single page and have them work?

  10. #25
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: scroll images using java script

    Hi there annasue,

    and a warm welcome to these forums.

    Try this example...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <base href="http://www.coothead.co.uk">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    * {
        margin:0;
        padding:0;
     }
    
    body {
        background-image:url(images/bodyBg.jpg);
        margin:10px;
     }
    #vertical_container {
        position:relative;
        width:74px;
        height:284px;
        border-width:4px;
        border-style:solid;
        border-color:#454672 #454672 #24243c #24243c;
        background-color:#fff;
        overflow:hidden;
     }
    #vertical {
        position:absolute;
        width:66px;
        padding:4px 4px 0 4px;
        list-style-type:none;
     }
    #vertical li { 
        height:66px;
        margin-bottom:4px;
     }
    #vertical img {
        display:block;
        border:3px double #999;
     }
    #horizontal_container {
        position:relative;
        width:284px;
        height:74px;
        border-width:4px;
        border-style:solid;
        border-color:#454672 #454672 #24243c #24243c;
        background-color:#fff;
        overflow:hidden;
        margin:auto;;
     }
    #horizontal {
        position:absolute;
        width:1120px;
        height:66px;
        padding:4px 0 4px 4px;
        list-style-type:none;
     }
    #horizontal li {
        margin:0 4px 0 0;
        float:left;
     }
    #horizontal img {
        display:block;
        border:3px double #999;
     }
    #myimg_holder {
        position:absolute;
        border-width:5px;
        border-style:solid;
        border-color:#454672 #454672 #24243c #24243c;
        background-color:#333;
        padding:10px;  
    }
    #close{ 
        position:absolute;
        width:50px;
        line-height:20px;
        left:50%;
        margin-left:-25px;
        margin-top:10px;
        text-align:center;
        background-color:#333;
        border:1px solid #ccc;
        font-family:sans-serif;
        font-size:12px;
        color:#fff;
        cursor:pointer;
     }
    #myimg {
        display:block;
        border:3px double #666;
        background-color:#fff;
        filter:alpha(opacity=0);
        opacity:0;
     }
    .hide {
        visibility:hidden;
     }
    #direction_h {
        width:292px;
        height:40px;
        font-size:28px;
        margin:auto;
     }
    
    #direction_v {
        width:82px;
        height:40px;
        font-size:28px;
     }
    #direction_h span,#direction_v span {
        cursor:pointer;
     }
    .l {
        float:left;
     }
    .r {
        float:right;
     }
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    #vertical li {
        margin-bottom:1px;
     }
    </style>
    <![endif]-->
    
    <script type="text/javascript">
       var obj;
       var obj1;
       var obj2;
       var obj3;
       var rl=0;
       var ud=0;
       var rht;
       var lft;
       var upp;
       var dwn;
       var op=0;
       var fin;
       var speed=50;
       var preloads=[];
    
    function preload(){
    
    for(c=0;c<arguments.length;c++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[c];
      }
     }
    preload(
       'images/apple.jpg','images/banana.jpg','images/girl.jpg','images/aaa.jpg',
       'images/ten_quid.jpg','images/blood.jpg','images/grap.jpg','images/buddha.jpg',
       'images/col.jpg','images/autumn.jpg','images/lace.jpg','images/moon.jpg',
       'images/car.jpg','images/ball_shad.jpg','images/clouds.jpg','images/dog.jpg');
    
    function init(){
       obj=document.getElementById('myimg_holder');
       obj1=document.getElementById('myimg');
       obj2=document.getElementById('vertical');
       obj3=document.getElementById('horizontal');
       anc=obj2.getElementsByTagName('a');
       anc1=obj3.getElementsByTagName('a');
    for(c=0;c<anc.length;c++) {
    anc[c].onclick=function() {
       clearTimeout(fin);
       op=0;
       fadeIn();
       setPopup(this.href);
       return false;
       }
      }
    for(c=0;c<anc1.length;c++) {
    anc1[c].onclick=function() {
       clearTimeout(fin);
       op=0;
       fadeIn();
       setPopup(this.href);
       return false;
       }
      }
    document.getElementById('right').onmouseover=function() {
        goRight();
     }
    document.getElementById('left').onmouseover=function() {
        goLeft();
     }
    document.getElementById('up').onmouseover=function() {
        goUp();
     }
    document.getElementById('down').onmouseover=function() {
        goDown();
      }
     }
    
    function setPopup(pic) {
       obj1.src=pic
       w=obj1.offsetWidth;
       h=obj1.offsetHeight;
       obj.style.width=w+'px';
    if((document.body.offsetWidth-w)/2<110) {
       obj.style.left='110px';
     }
    else {
       obj.style.left=(document.body.offsetWidth-w)/2+'px';
     }                                                            
       obj.style.top='150px';
       obj.className='';
    document.getElementById('close').onclick=function() {
       obj.className='hide';
      }
     }
    
    function goRight() {
    if(rl<-840) {
       clearTimeout(rht);
       return;
     }
    document.getElementById('right').onmouseout=function() {
       clearTimeout(rht);
       return;
     }
       obj3.style.left=rl+'px';
       rl-=2;
       rht=setTimeout('goRight()',40);
     }
    
    function goLeft() {
    if(rl>0) {
       clearTimeout(lft);
       return;
     }
    document.getElementById('left').onmouseout=function() {
       clearTimeout(lft);
       return;
     }
       obj3.style.left=rl+'px';
       rl+=2;
       lft=setTimeout('goLeft()',40);
     }
    
    function goUp() {
    if(ud<-840) {
       clearTimeout(upp);
       return;
     }
    document.getElementById('up').onmouseout=function() {
       clearTimeout(upp);
       return;
     }
       obj2.style.top=ud+'px';
       ud-=2;
       upp=setTimeout('goUp()',40);
     }
    
    function goDown() {
    if(ud>0) {
       clearTimeout(dwn);
       return;
     }
    document.getElementById('down').onmouseout=function() {
       clearTimeout(dwn);
       return;
     }
       obj2.style.top=ud+'px';
       ud+=2;
       dwn=setTimeout('goDown()',40);
     }
    
    function fadeIn(){
    if(obj1.filters){
       obj1.style.filter='alpha(opacity='+op+')';
     }
    else {
       obj1.style.opacity=op/100;
     }
       op++;
    if(op>100) {
       op=0;
       clearTimeout(fin);
       return;
     }
       fin=setTimeout('fadeIn()',speed)
     }
    
    if(window.addEventListener){
       window.addEventListener('load',init,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',init);
      }
     }
    </script>
    
    </head>
    
    <body>
    
    <div id="myimg_holder" class="hide">
    <div id="close">close</div>
    
    <img id="myimg" src="" alt="">
    </div>
    
    <div id="horizontal_container">
    <ul id="horizontal">
     <li><a href="images/apple.jpg"><img src="images/apple_thumb.jpg" alt=""></a></li>
     <li><a href="images/banana.jpg"><img src="images/banana_thumb.jpg" alt=""></a></li>
     <li><a href="images/girl.jpg"><img src="images/girl_thumb.jpg" alt=""></a></li>
     <li><a href="images/aaa.jpg"><img src="images/aaa_thumb.jpg" alt=""></a></li>
     <li><a href="images/ten_quid.jpg"><img src="images/ten_quid_thumb.jpg" alt=""></a></li>
     <li><a href="images/blood.jpg"><img src="images/blood_thumb.jpg" alt=""></a></li>
     <li><a href="images/grap.jpg"><img src="images/grap_thumb.jpg" alt=""></a></li>
     <li><a href="images/buddha.jpg"><img src="images/buddha_thumb.jpg" alt=""></a></li>
     <li><a href="images/col.jpg"><img src="images/col_thumb.jpg" alt=""></a></li>
     <li><a href="images/autumn.jpg"><img src="images/autumn_thumb.jpg" alt=""></a></li>
     <li><a href="images/lace.jpg"><img src="images/lace_thumb.jpg" alt=""></a></li>
     <li><a href="images/moon.jpg"><img src="images/moon_thumb.jpg" alt=""></a></li>
     <li><a href="images/car.jpg"><img src="images/car_thumb.jpg" alt=""></a></li>
     <li><a href="images/ball_shad.jpg"><img src="images/ball_shad_thumb.jpg" alt=""></a></li>
     <li><a href="images/clouds.jpg"><img src="images/clouds_thumb.jpg" alt=""></a></li>
     <li><a href="images/dog.jpg"><img src="images/dog_thumb.jpg" alt=""></a></li>
    </ul>
    </div>
    <div id="direction_h"><span id="left" class="r"><img src="images/la.gif" alt=""></span><span id="right" class="l"><img src="images/ra.gif" alt=""></span> </div>
    
    
    <div id="vertical_container">
    <ul id="vertical">
     <li><a href="images/dog.jpg"><img src="images/dog_thumb.jpg" alt=""></a></li>
     <li><a href="images/clouds.jpg"><img src="images/clouds_thumb.jpg" alt=""></a></li>
     <li><a href="images/ball_shad.jpg"><img src="images/ball_shad_thumb.jpg" alt=""></a></li>
     <li><a href="images/car.jpg"><img src="images/car_thumb.jpg" alt=""></a></li>
     <li><a href="images/moon.jpg"><img src="images/moon_thumb.jpg" alt=""></a></li>
     <li><a href="images/lace.jpg"><img src="images/lace_thumb.jpg" alt=""></a></li>
     <li><a href="images/autumn.jpg"><img src="images/autumn_thumb.jpg" alt=""></a></li>
     <li><a href="images/col.jpg"><img src="images/col_thumb.jpg" alt=""></a></li>
     <li><a href="images/buddha.jpg"><img src="images/buddha_thumb.jpg" alt=""></a></li>
     <li><a href="images/grap.jpg"><img src="images/grap_thumb.jpg" alt=""></a></li>
     <li><a href="images/blood.jpg"><img src="images/blood_thumb.jpg" alt=""></a></li>
     <li><a href="images/ten_quid.jpg"><img src="images/ten_quid_thumb.jpg" alt=""></a></li>
     <li><a href="images/aaa.jpg"><img src="images/aaa_thumb.jpg" alt=""></a></li>
     <li><a href="images/girl.jpg"><img src="images/girl_thumb.jpg" alt=""></a></li>
     <li><a href="images/banana.jpg"><img src="images/banana_thumb.jpg" alt=""></a></li>
     <li><a href="images/apple.jpg"><img src="images/apple_thumb.jpg" alt=""></a></li>
    </ul>
    </div>
    <div id="direction_v"><span id="down" class="r"><img src="images/da.gif" alt=""></span><span id="up" class="l"><img src="images/ua.gif" alt=""></span> </div>
    
    </body>
    
    </html>
    

  11. #26
    annasue's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2010
    Posts
    2

    Re: scroll images using java script

    I hate to seem dense but am only briefly knowledgeable of css. Do I place this code without the header/body, etc. where I want the scroll to appear? Do you have an example online somewhere? Is there a way to call the images from an external file?



Page 2 of 2 First 1 2

Tags for this Thread