display pictures + add easy

fb2003 · #1 (**permalink**) 09-11-03, 06:42 AM

Hello, i'm making a website, it's a website whith many pictures. I already have gallery running

.. but I was in need for something more, so I made a index.htm file to put in some directories where I need this special layout of the pictures

I've attatched the source of the file ->

as you can see I have three bigpictures which I call big1.jpg .. big3.jpg

and a scrolling line of 6 pictures which I call 1.jpg .. 6.jpg

when a picture is being clicked on .. it's being displayed as big2.jpg so the middle picture .. pretty cool

'I think'

but now, I want to add more pics to the sliding picture bar .. but without editting all the html code inside the index.htm, so I thought maybe a little PHP can help me with this

.. so maybe that I can just upload pics called 1.jpg, 2.jpg, ... 21.jpg, 22.jpg, ect. and some php script automaticaly puts the pics in the sliding bar .. that would be perfect..

Thanks,

FRANK
The Netherlands

fb2003 · #2 (**permalink**) 09-12-03, 02:30 PM

did someone already came up with an idea to get this working?

thanks,
Frank

paulj000 · #3 (**permalink**) 09-12-03, 03:35 PM

this works, replace your javascript segments with these snippets of php that writes new javascript if an image named like 1.jpg exists in the same directory

PHP Code:


			
var picsrc = new Array();

<?

$i = 0;



while ($i <= 30) {

    $jpg = $i + 1;

    $jpg .= ".jpg";



    if (is_file($jpg)) {

    echo "picsrc[$i] = '$jpg';\r";

    }

$i++;

}

?>

and then a little furhter down the page is this bit that replaces your javascrpt also:

PHP Code:


			
var finalslide=''



<?

$i = 0;



while ($i <= 30) {

    $jpg = $i + 1;

    $jpg .= ".jpg";



    if (is_file($jpg)) {

    echo '

    leftrightslide[' .$i. ']=\'<a href="javascript:bigPic(' .$i. ');void(' .$i. ')"><img src="' .$jpg. '" height=100 style="border-style:solid; border-width:1; border-color:#000000; filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a>\'';

    }

$i++;



}

?>

i'm sure it can be written more elegantly and there is not much error checking but it works smoothly, all you need to do is add your jpg's in the same directory as this page or change the code to a diff dir.

pretty neat little slide show - whts the weather like in the netherlands? it's about 90degrees F and dry here in California

ermau · #4 (**permalink**) 09-13-03, 09:27 AM

However, you should use <?php rather than <?
Not all systems accept <?, so it's better to be on the safe side and type only 3 more letters and use <?php

fb2003 · #5 (**permalink**) 09-13-03, 10:12 AM

So I should just replace the:

<script>
xxx
</script>

with

<?php
xxx
php?>

and rename the file from index.htm to index.php ?

Cause I think I cannot just add php in a html file?

sorry I don't know much about php
Thanks,

FRANK

PS: Thanks very much PAULJ000

weather is quite good at the moment 24 degree Celcius .. know where a can find more small php example's like these .. bye

paulj000 · #6 (**permalink**) 09-13-03, 06:19 PM

hi, here is the entire page re-written. the PHP parts only appear in certain parts of the javascript where it was necessary to have php code performed. basically the page goes in and out of php/javascript.

you should rename your page to have .php as the extension however it is usually quite easy to set up the server to parse html (.htm/.html) files as php also but unless you have done this just be safe and use .php

this site has a pretty great archive of php scripts for all catagories. I have used some really good freeware php scripts from it before

PHP Code:


			
<html>



<head>

<meta http-equiv="Content-Language" content="en-us">

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>New Page 1</title>

<script language="JavaScript1.2">

function makevisible(cur,which){

strength=(which==0)? 1 : 0.2



if (cur.style.MozOpacity)

cur.style.MozOpacity=strength

else if (cur.filters)

cur.filters.alpha.opacity=strength*100

}

</script>

<script type="text/javascript" language="javascript">



var picsrc = new Array();

<?php

$i = 0;



while ($i <= 30) {

    $jpg = $i + 1;

    $jpg .= ".jpg";



    if (is_file($jpg)) {

    echo "picsrc[$i] = '$jpg';\r";

    }

$i++;



}

?>



function bigPic(which) {

     var el;

     if (el = document.getElementById('big'))

         el.src = picsrc[which];

}



</script>

</head>



<body topmargin="5" leftmargin="0" bgcolor="#DEDEDE">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1" height="90%">

  <tr>

    <td width="34%">

    <p align="center">

    <img src="big1.jpg" style="border-style: solid; border-width: 1"></td>

    <td width="33%">

    <p align="center">

    <img id="big" border="0" src="big2.jpg" style="border-style: solid; border-width: 1"></td>

    <td width="33%">

    <p align="center">

    <img src="big3.jpg" style="border-style: solid; border-width: 1"></td>

  </tr>

  <tr>

    <td width="100%" height="1%" colspan="3">

    <p align="center">&nbsp;<!--webbot bot="HTMLMarkup" startspan --><script language="JavaScript1.2">



//Specify the slider's width (in pixels)

var sliderwidth="700"

//Specify the slider's height

var sliderheight="102"

//Specify the slider's slide speed (larger is faster 1-10)

var slidespeed=3

//configure background color:

slidebgcolor="#DEDEDE"







//Specify the slider's images

var leftrightslide=new Array()

var finalslide=''



<?php

$i = 0;



while ($i <= 30) {

    $jpg = $i + 1;

    $jpg .= ".jpg";



    if (is_file($jpg)) {

    echo '

    leftrightslide[' .$i. ']=\'<a href="javascript:bigPic(' .$i. ');void(' .$i. ')"><img src="' .$jpg. '" height=100 style="border-style:solid; border-width:1; border-color:#000000; filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a>\'';

    }

$i++;



}

?>







////NO NEED TO EDIT BELOW THIS LINE////////////



var copyspeed=slidespeed

leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'

var iedom=document.all||document.getElementById

if (iedom)

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')

var actualwidth=''

var cross_slide, ns_slide



function fillup(){

if (iedom){

cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2

cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3

cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide

actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth

cross_slide2.style.left=actualwidth+20+"px"

}

else if (document.layers){

ns_slide=document.ns_slidemenu.document.ns_slidemenu2

ns_slide2=document.ns_slidemenu.document.ns_slidemenu3

ns_slide.document.write(leftrightslide)

ns_slide.document.close()

actualwidth=ns_slide.document.width

ns_slide2.left=actualwidth+20

ns_slide2.document.write(leftrightslide)

ns_slide2.document.close()

}

lefttime=setInterval("slideleft()",30)

}

window.onload=fillup



function slideleft(){

if (iedom){

if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))

cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"

else

cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30+"px"



if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))

cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"

else

cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30+"px"



}

else if (document.layers){

if (ns_slide.left>(actualwidth*(-1)+8))

ns_slide.left-=copyspeed

else

ns_slide.left=ns_slide2.left+actualwidth+30



if (ns_slide2.left>(actualwidth*(-1)+8))

ns_slide2.left-=copyspeed

else

ns_slide2.left=ns_slide.left+actualwidth+30

}

}





if (iedom||document.layers){

with (document){

document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')

if (iedom){

write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')

write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')

write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')

write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')

write('</div></div>')

}

else if (document.layers){

write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')

write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')

write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')

write('</ilayer>')

}

document.write('</td></table>')

}

}

          </script><!--webbot bot="HTMLMarkup" endspan --></td>

  </tr>

</table>

</body>



</html>

fb2003 · #7 (**permalink**) 09-14-03, 10:38 AM

Hey .. well This looks really good, but I keep getting this error

Quote:

Parse error: parse error, unexpected T_STRING, expecting ',' or ';' in /var/www/frank/slide/index.php on line 87

paul Do you know how this can be..

thanks,

Frank

ermau · #8 (**permalink**) 09-14-03, 11:51 AM

Code:

 onMouseout="makevisible(this,1)"></a>'';

Should be

Code:

onMouseout="makevisible(this,1)"></a>';

fb2003 · #9 (**permalink**) 09-14-03, 12:12 PM

I'm sorry, but I keep getting the same error in line 78 after changed

onMouseout="makevisible(this,1)"></a>'';[/QUOTE] [QUOTE]
to
onMouseout="makevisible(this,1)"></a>';

paulj000 · #10 (**permalink**) 09-14-03, 05:21 PM

oops, try this attachment zip of entire page. i just realized that my backslashes in the code are gettting removed when I posted to this page. So i typed BACKSLASH where they are supposed to appear...

line should begin like this (replace BACKSLASH with the actual character)

leftrightslide[' .$i. ']=BACKSLASH'

and end like this (thats another backslash before a SINGLE QUOTE then immediately follows another SINGLE quote on end of line, NOT backslash double quote)

onMouseout="makevisible(this,1)"></a>BACKSLASH'';