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)
PHP 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>
Javascript
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>
