php javascript getcontents display
Ok here's what I want to do I kinda had an idea that seemed like it would function but failed for a number of reasons. I want php to search a directory for all standard image files (jpg, jpeg, png, gif, tif). Then write the html code to display that image with an echo for each one (<img src="" />). I then want the code to go into a javascript function that would the user to scroll threw the images. I thought the code below was close but alas it was far from that. The directory checking code i had didnt limit it to images only, and the getimagesize code I had to determine the total width didnt work. The javascript function also was jumpy one some versions I tried. Don't know if anyone knows of a script like this or could modify mine to get it to function..maybe? Thanks for any ideas.
PHP with the html (not the right sizing)
JavascriptPHP Code:<style type="text/css">
@charset "UTF-8";
/* CSS Document */
#frame {
width:500px;
height:450px;
background-repeat:no-repeat;
border-width:2px;
border-color:#000000;
border-style:solid;
margin:1px auto;
}
#images {
width:750px;
height:230px;
}
#left {
background:url(left.jpng) no-repeat center;
width:75px;
height:75px;
float:left;
}
#right {
float:right;
width:75px;
height:75px;
background:url(right.png) no-repeat center;
}
html,body {
height:100%;
padding:0;
margin:0;
background:#000000;
width:100%;
}
#contain {
width:70%;
margin:auto;
background-color:#FFFFFF;
height:100%;
overflow:auto;
}
#leftside {
background:#FFFFFF;
font-weight:bold;
width:33%;
float:left;
text-align:left;
padding-top:185px;
line-height:1.4;
}
#leftside img {
padding-bottom:20px;
}
#leftside a {
padding-left:75px;
color:#000000;
font-size:12px;
font-family:Helvetica, sans-serif, Verdana, Arial;
text-decoration:none;
}
#leftside a:hover {
color:#999999;
}
#rightside {
text-align:right;
background-color:#ffffff;
float:right;
width:67%;
}
</style>
</head>
<body>
<div id="contain">
<div id="left">
<img src="logo.jpg" alt="EFES Logo" />
<a href="">HOME</a><br />
<a href="">DENIM</a><br />
<a href="http://www.esefdenim.blogspot.com">BLOG</a><br />
<a href="http://www.esefdenim.bigcartel.com">CONTACT</a><br />
<a href="">ONLINE BOUTIQUE</a><br />
<a href="">LIFE</a><br />
<a href="">GALLERY</a>
</div>
<div id="right">
<?php
$size = 0;
$dirname = "../test/";
$dir = opendir($dirname);
while(false != ($file = readdir($dir)))
{
if(($file != ".") and ($file != ".."))
{
$fileChunks = explode(".", $file);
if($fileChunks[1] == 'jpg' || 'jpeg' || 'gif' || 'png' || 'tif') //interested in second chunk only
{
$file9 = "../test/images.txt";
//add image code to text file to display image after loop
$handle = fopen($file9, "a+");
$data = '<img src="../test/' . $file . '" alt="esef user image" border="0" / style:"padding-left:2px; padding-right:2px; ">';
fwrite($handle, $data );
fclose($handle);
//get the image size
list($width) = getimagesize("../test/" . $file);
echo $size;
$size = $size + $width;
$file10 = "../test/size.txt";
//open the size text file and write the size of the new image plus the size of previous images into it
$handle2 = fopen($file10, "w+");
fwrite($handle2, $size);
fclose($handle2);
}
}
}
closedir($dir);
//write html page contents
$file3 = "../test/images.txt";
$handle3 = fopen($file3, "r");
$display = fread($handle3, 20000000);
fclose($handle3);
echo '<div id="frame"><div id="images_container" style="width:' . $size . '; overflow:hidden; height:430px;"><div id="images">' . $display . '</div></div> </div></div>';
?>
</div>
</div>
</div>
</body>
</html>
Code:<script type="text/javascript"> //<![CDATA[ var left; var right; var mar=0; var speed=3; window.onload=function() { bh=document.getElementById('images_container').offsetWidth; obj=document.getElementById('images'); ch=obj.offsetWidth; objr=document.getElementById('right'); objl=document.getElementById('left'); objr.onmouseover=function() { goLeft(); } objr.onmouseout=function() { clearTimeout(left); speed=3; return; } objl.onmouseover=function() { goRight(); } objl.onmouseout=function() { clearTimeout(right); speed=3; return; } objr.onclick=function() { speed=15; // change this value to suit your requirements } objl.onclick=function() { speed=15; // change this value to suit your requirements } } function goLeft() { clearTimeout(right); obj.style.marginLeft=mar +'px' mar-=speed; if(mar+ch<=bh){ mar=bh-ch; clearTimeout(left); return; } left=setTimeout('goLeft()',20); } function goRight() { clearTimeout(left); obj.style.marginLeft=mar +'px' mar+=speed; if(mar>=0){ mar=0; clearTimeout(right); return; } right=setTimeout('goRight()',20); } //]]> </script>
CSS Codes
Reply With Quote
Bookmarks