/    Sign up×
Community /Pin to ProfileBookmark

photo gallery & highlighting a layer

I’m building a photo gallery for a website. I don’t know * a lot * about scripting, but i can stumble around a bit..

I am using a PHP script to pull and shrink every image from a singlefolder and post them on a page… now I want to be able to click on the image and have it open the picture in full resolution on a new layer (darkening the page)..

so while i’ve been trying to accomplish this, i stumbled across this old post about hidden fields and layering and what not..
[URL=”http://www.webdeveloper.com/forum/showthread.php?t=171288″]http://www.webdeveloper.com/forum/showthread.php?t=171288[/URL]

I’ve been toying with it, and i just want to be able to add some html tag to the photo script being generated by my PHP to change which appears in the feature_div based on what picture they click on from the gallery..

here is what i have so far:

[code=php]
<?php
$a = ‘0’;
$filepath = “photos”;
$dir = dir($filepath);
echo “<table border=”0″ cellpadding=”2″ cellspacing=”1″ width=”520″ align=”center”>”;
while($entry=$dir->read()) {
if($entry == “.” || $entry == “..”) {
continue;
}
$fp = @fopen(“$filepath/$entry”,”r”);

$image_stats = GetImageSize($filepath.”/”.$entry);

$imagewidth = $image_stats[0];

$imageheight = $image_stats[1];

$ratio = ($imagewidth / 1.3);
$ratio2 = ($imagewidth / 1.5);
$ratio3 = ($imagewidth / 1.8);

if($ratio3 > “518”) {
$w_ratio = ($imagewidth / 2.3);
$h_ratio = ($imageheight / 2.3);
} elseif ($ratio2 > “518”) {
$w_ratio = ($imagewidth / 1.8);
$h_ratio = ($imageheight / 1.8);
} elseif ($ratio1 > “518”) {
$w_ratio = ($imagewidth / 1.5);
$h_ratio = ($imageheight / 1.5);
} else {
$w_ratio = ($imagewidth / 1.3);
$h_ratio = ($imageheight / 1.3);
}
?>
<tr>
<td align=”center”>
<a href=”<? echo “$filepath/$entry” ?>”><img src=”<? echo “$filepath/$entry” ?>” width=”<? echo “$w_ratio” ?>” height=”<? echo “$h_ratio” ?>” border=”1″ onclick=”highlight_div()”></a>
</td>
<?
$a = $a + 1;
}
?>
[/code]

and the link above shows the highlight function i am trying to use..

i would greatly appreciate any help accomplishing this goal!
ray

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@novemba15authorJul 27.2008 — figured it out.. i ended up just creating a new <div> for every image as generated by the php script..

here's the new code

[code=php]<style type="text/css">
.hide {
display:none;
}
#screen {
position:fixed;
z-index:1;
left:0;
top:0;
width:100%;
height:100%;
background-color:#000;
opacity:0.8;
filter:alpha(opacity=80);
}
</style>

<!--[if IE 6]>
<style type="text/css">
html,body {
overflow:auto;
}
#screen {
position:absolute;
}
</style>
<![endif]-->
[/code]

and
[code=php]<?php
$a = '0';
$filepath = "gallery";
$dir = dir($filepath);
echo "<table border="0" cellpadding="2" cellspacing="1" width="520" align="center">";
while($entry=$dir->read()) {
if($entry == "." || $entry == "..") {
continue;
}
$fp = @fopen("$filepath/$entry","r");

$image_stats = GetImageSize($filepath."/".$entry);

$imagewidth = $image_stats[0];

$imageheight = $image_stats[1];

if ($a == '0') {echo "<tr>";}
if ($a == '2') {echo "<tr>";}
if ($a == '4') {echo "<tr>";}
if ($a == '6') {echo "<tr>";}
if ($a == '8') {echo "<tr>";}
if ($a == '10') {echo "<tr>";}
if ($a == '12') {echo "<tr>";}
if ($a == '14') {echo "<tr>";}
if ($a == '16') {echo "<tr>";}
if ($a == '18') {echo "<tr>";}
if ($a == '20') {echo "<tr>";}
if ($a == '22') {echo "<tr>";}
if ($a == '24') {echo "<tr>";}
if ($a == '26') {echo "<tr>";}
if ($a == '28') {echo "<tr>";}
if ($a == '30') {echo "<tr>";}
if ($a == '32') {echo "<tr>";}
if ($a == '34') {echo "<tr>";}
if ($a == '36') {echo "<tr>";}
if ($a == '38') {echo "<tr>";}
if ($a == '40') {echo "<tr>";}
if ($a == '42') {echo "<tr>";}
if ($a == '44') {echo "<tr>";}
if ($a == '46') {echo "<tr>";}
if ($a == '48') {echo "<tr>";}
if ($a == '50') {echo "<tr>";}
if ($a == '52') {echo "<tr>";}

if ($imageheight > $imagewidth) {
$dimension = "top:30%; left:60%";
$size = "height="600" width="width = 600 *$imageheight / $imagewidth"";
} else {
$dimension = "top:50%; left:50%";
$size = "width="600" height="height = 600 * $imageheight / $imagewidth"";
}

?>
<td align="center">
<img src="<? echo "$filepath/$entry" ?>" width="259" height="<? echo "height = 259 * $imageheight / $imagewidth" ?>" border="1" onclick="document.getElementById('<? echo "$entry" ?>').className=''; document.getElementById('screen').className='';" style="cursor:pointer;" alt="<? echo "$entry" ?>" title="click to exit">
<div id="<? echo "$entry" ?>" class="hide" onclick="document.getElementById('<? echo "$entry" ?>').className='hide'; document.getElementById('screen').className='hide';" style="position:fixed; <? echo "$dimension" ?>; z-index:2; border:3px #000; text-align:center; margin: -15% 0 0 -27%; cursor:pointer;">
<img src="<? echo "$filepath/$entry" ?>" <? echo "$size" ?> align="center" valign="center" title="click to exit" alt="<? echo "$entry" ?>"><br>
<font size="2" face="Verdana" color="#D8A877">
..click to exit..
</font>
</div>
</td>
<?
$a = $a + 1;
}
?>
</tr>
</table>[/code]


ugly but functional.. even has it determine how the picture should be oriented & resized.. which i was very happy about ?

i'm still trying to figure out how to change the arrangement of the pictures and perhaps a more efficient solution for adding in a table row every other picture.
×

Success!

Help @novemba15 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...