Scrolling Image PHP?

cottager · December 22nd, 2003, 03:22 PM

I've seen it done a million times in Java, but is there a way to scroll a group of images using only php?

What I want to do is grab the paths to about 10 images from a MySQL DB and display them, but I don't want to take up the whole page with images. So making it possible to scroll through them in the space of 1 image makes sense.

I think it would keep my pages a lot cleaner if I don't have to mix php and Java. Any ideas?

The best ideas are not the simple ones, they're the complex ones made easy.

richard.york · December 22nd, 2003, 04:43 PM

Keep in mind that PHP cannot control anything on the client-side environment. PHP can to an extent work with Java. If that is what you want then have a look at the manual pages on PHP/Java Integration.

http://www.php.net/java

Personally I'd use an inline frame and some JavaScript.

Here's a working example of that method:

Code:

<html>
    <head>
    </head>
    <body>
        <script language='javascript' type='text/javascript'>

            var scrolling;

            function startScroll(theframe)
            {
                scrolling=setInterval('window.' + theframe + '.scrollBy(0,12);', 100);
            }

            function stopScroll()
            {
                clearInterval(scrolling);
            }

            function back(theframe)
            {
                scrolling=setInterval('window.' + theframe + '.scrollBy(0,-12);', 100);
            }

        </script>

        <a href='javscript:void(0);' onmouseover='back("this_iframe")' onmouseout='stopScroll()'>Scroll Up</a><br />
        <iframe src='' name='this_iframe' id='this_iframe' style='width: 50px; height: 50px;' frameborder='0' scrolling='no' /></iframe><br />
        <a href='javascript:void(0);' onmouseover='startScroll("this_iframe")' onmouseout='stopScroll()'>Scroll Down</a><br />

        <script language='JavaScript' type='text/javascript'>
            frames['this_iframe'].document.open();
            frames['this_iframe'].document.write("<html><head><body>");
            frames['this_iframe'].document.write("<img src='image1.jpg' style='width: 25px; height: 25px;' /><br />");
            frames['this_iframe'].document.write("<img src='image2.jpg' style='width: 25px; height: 25px;' /><br />");
            frames['this_iframe'].document.write("</body></html>");
            frames['this_iframe'].document.close();
        </script>

    </body>
</html>

The code which writes to the iframe, for this example must appear *after* the iframe. Of course you could modify that to use an external source file also. Also the custom scrolling aparatus can be made auto or self-scrolling, use images instead of links.

hth,
: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::