/    Sign up×
Community /Pin to ProfileBookmark

Random image that’s a link to bigger image?

Copy linkTweet thisAlerts:
Jan 03.2006

Hopefully I’m in the right section. I’m fairly familiar with HTML but very green with everything else, heck I just started using css in the last week lol.

Anyway, I want 1, maybe 2 thumbnails to show up on my main page of my website. I have around 200-250 pictures on my site and thier T/N version already. I’d like to be able to click the image (t/n) and have it open up the larger image, preferably in it’s own window that’s sized to the picture (aka not a new browser window).

I’m sure it’s not too hard to do but I have no clue where to start. I hate asking people to do the work for me, but since this is a bit more indepth than I have time to learn and write myself I wouldn’t object either ?

I’m assuming I need PHP to do this since I’ll need to add an array I believe, not just a random number like js could do?

Thanks for the help and patience ladies and gents!
Lynn

to post a comment
PHP

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@bokehJan 03.2006 — The following code could be a lot more compact but it works just fine.[code=php]<?php
// set variables/CONSTANTS
$image_dir = "/images/"; // fill in your image directory (relative to root)
define('PATH', $_SERVER['DOCUMENT_ROOT'].$image_dir);
define('HTTPPATH', 'HTTP://'.$_SERVER['HTTP_HOST'].$image_dir);

if(($_GET['src'])) { //serve the thumbnails
$filename = PATH.$_GET['src'];
$image = imagecreatefromstring(file_get_contents($filename));
$width = 100;
$height = 100;
$width_orig = imagesx($image);
$height_orig = imagesy($image);
if ($width && ($width_orig < $height_orig)) {
$width = ($height / $height_orig) * $width_orig;
} else {
$height = ($width / $width_orig) * $height_orig;
}
$image_p = imagecreatetruecolor($width, $height);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
header('Content-type: image/jpeg');
imagejpeg($image_p, null, 100);
imagejpeg($image, null, 100);
exit;
} // end serve the thumbnails


$images = array(); //read images into an array
if(is_dir(PATH)) {
if ($dh = opendir(PATH)) {
while (($file = readdir($dh)) !== false) {
if(eregi('.(jpe?g|gif|png)$', $file)) {
$images[] = $file;
}
}
closedir($dh);
}
} // end read images into an array

shuffle($images); // randomise order

//make first thumbnail tag
$width = 100;
$height = 100;
list($width_orig, $height_orig) = getimagesize(PATH.$images[0]);
if ($width && ($width_orig < $height_orig)) {
$width = ($height / $height_orig) * $width_orig;
} else {
$height = ($width / $width_orig) * $height_orig;
}
$thumb1 = '<a href="'.HTTPPATH.$images[0].'">'."n".
'<img src="http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?src='.$images[0].'" width="'.$width.'" height="'.$height.'" alt="'.$images[0].'">'."n".
'</a>';

//make second thumbnail tag
$width = 100;
$height = 100;
list($width_orig, $height_orig) = getimagesize(PATH.$images[1]);
if ($width && ($width_orig < $height_orig)) {
$width = ($height / $height_orig) * $width_orig;
} else {
$height = ($width / $width_orig) * $height_orig;
}

$thumb2 = '<a href="'.HTTPPATH.$images[1].'">'."n".
'<img src="http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?src='.$images[1].'" width="'.$width.'" height="'.$height.'" alt="'.$images[0].'">'."n".
'</a>';

// The following is your html page

?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Random image</title>
</head>
<body>
<!-- the following is the first random thumbnail -->
<?php echo $thumb1 ?>
<br>
<!-- the following is the second random thumbnail -->
<?php echo $thumb2 ?>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@AmickRacingauthorJan 05.2006 — I'll see if I can't get that to work this weekend when I have a few spare moments.

Thanks a bunch for the help!
Copy linkTweet thisAlerts:
@SpectreReturnsJan 05.2006 — But bokeh, sir, he already HAS the thumbnails!
Copy linkTweet thisAlerts:
@bokehJan 06.2006 — But bokeh, sir, he already HAS the thumbnails![/QUOTE]I didn't read the question properly but with my method he wouldn't need a truckload of thumbnail files.
Copy linkTweet thisAlerts:
@AmickRacingauthorJan 07.2006 — Might not need them, but I already have em lol. My image gallery is set up pretty old school at the moment, so I figured I could just use them since I already have em. But... I'll give that a try and hopefully get it to work ;-)

Doesn't matter too much either way really, long as it works one way or another I'm a happy guy.
Copy linkTweet thisAlerts:
@bokehJan 07.2006 — Might not need them, but I already have em lol. My image gallery is set up pretty old school at the moment, so I figured I could just use them since I already have em. But... I'll give that a try and hopefully get it to work ;-)

Doesn't matter too much either way really, long as it works one way or another I'm a happy guy.[/QUOTE]The thing with thumbnails is that they are a fixed size; if you want to change the size you have to change the lot. On the other hand if you make the thumbnails dynamically (like this script) change the width and height in the script and you're away.
×

Success!

Help @AmickRacing 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.5,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...