I'm building a site for a buddy who runs a Minecraft server and I want to have a directory of about 30 images of screenshots from the game, and then have 6 thumbnails on the site that are randomly picked from that directory. I found a script that lets you randomize images like this but I also want it so that when you click on a thumbnail, it pops up a window with the corresponding fullsize image. How do I make it so that when a user clicks on one of the randomly selected thumbnails, it links them to the correct image?
Randomizing images on a site
- Thread starter o hai guyz
- Start date
you should be able to have a script load all images from a directory, put them in an array, select 6, then create image links to them.
Have the thumbnails and the full sized images named similarly:
image1thumb.jpg
image1full.jpg
When you get the random thumbnail just replace the 'thumb' with 'full' and it will relate to the correct one.
image1thumb.jpg
image1full.jpg
When you get the random thumbnail just replace the 'thumb' with 'full' and it will relate to the correct one.
Here's a script I use to create thumbnails on the fly, I call it thumb.php
and I use this in htaccess:
Then if you have an existing image called "blahblah.jpg" you can also use "thumb_130x130_blahblah.jpg" which will be a 130x130 thumbnail.
I believe this might only work with jpg though.
Code:
/* Create filename from GET variables (see htaccess) */
$file_name = './'.$_GET['path'].$_GET['filename'];
if(file_exists($file_name)){
$MAX_WIDTH = $_GET['width'];
$MAX_HEIGHT = $_GET['height'];
if($image = imagecreatefromjpeg($file_name)){
$width = imagesx($image);
$height = imagesy($image);
$scale = min($MAX_WIDTH/$width, $MAX_HEIGHT/$height);
if($scale < 1){
$new_width = floor($scale*$width);
$new_height = floor($scale*$height);
$temp_image = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($temp_image, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
imagedestroy($image);
$image = $temp_image;
}
}
header('Content-Type: image/jpeg');
imagejpeg($image);
}
Code:
RewriteRule ^(.*)thumb_([0-9]+)x([0-9]+)_(.+)$ /thumb.php?path=$1&width=$2&height=$3&filename=$4 [L]I believe this might only work with jpg though.
I'm not great with PHP, can you help me out with that script?
I'm using jquery to pop up the fullsize pics now if it makes a difference.
PHP: readdir - Manual
look at example #2, it's quite easy. instead of echoing out the file names, save them:
$files[] = $file;
and then:
if(count($files) > 0){
$file_keys = array_rand($files, min(count($files), 6));
if(!is_array($file_keys)) $file_keys = array($file_keys);
foreach($file_keys as $file_key) echo '<img src="'.$files[$file_key].'" />';
}
I use this on a shared host with no problems.
If it becomes a problem, easy fix. Just keep a cache of thumbnails. thumb.php would check to see if a cache exists and serve that up. If not, do the dynamic thumbnail and save it locally for next time.
I don't have a problem creating thumbnails manually as there are only a few new pics added per week. I couldn't get the randomization to work properly so I just picked the best ones for the homepage and I'm putting the rest on a gallery page.
Code:
<?php
/*
AUTOMATIC IMAGE ROTATOR
Version 2.2 - December 4, 2003
Copyright (c) 2002-2003 Dan P. Benjamin, Automatic, Ltd.
All Rights Reserved.
http://www.hiveware.com/imagerotator.php
http://www.automaticlabs.com/
DISCLAIMER
Automatic, Ltd. makes no representations or warranties about
the suitability of the software, either express or
implied, including but not limited to the implied
warranties of merchantability, fitness for a particular
purpose, or non-infringement. Dan P. Benjamin and Automatic, Ltd.
shall not be liable for any damages suffered by licensee
as a result of using, modifying or distributing this
software or its derivatives.
ABOUT
This PHP script will randomly select an image file from a
folder of images on your webserver. You can then link to it
as you would any standard image file and you'll see a random
image each time you reload.
When you want to add or remove images from the rotation-pool,
just add or remove them from the image rotation folder.
VERSION CHANGES
Version 1.0
- Release version
Version 1.5
- Tweaked a few boring bugs
Version 2.0
- Complete rewrite from the ground-up
- Made it clearer where to make modifications
- Made it easier to specify/change the rotation-folder
- Made it easier to specify/change supported image types
- Wrote better instructions and info (you're them reading now)
- Significant speed improvements
- More error checking
- Cleaner code (albeit more PHP-specific)
- Better/faster random number generation and file-type parsing
- Added a feature where the image to display can be specified
- Added a cool feature where, if an error occurs (such as no
images being found in the specified folder) *and* you're
lucky enough to have the GD libraries compiled into PHP on
your webserver, we generate a replacement "error image" on
the fly.
Version 2.1
- Updated a potential security flaw when value-matching
filenames
Version 2.2
- Updated a few more potential security issues
- Optimized the code a bit.
- Expanded the doc for adding new mime/image types.
Thanks to faithful ALA reader Justin Greer for
lots of good tips and solid code contribution!
INSTRUCTIONS
1. Modify the $folder setting in the configuration section below.
2. Add image types if needed (most users can ignore that part).
3. Upload this file (rotate.php) to your webserver. I recommend
uploading it to the same folder as your images.
4. Link to the file as you would any normal image file, like this:
<img src="http://example.com/rotate.php">
5. You can also specify the image to display like this:
<img src="http://example.com/rotate.php?img=gorilla.jpg">
This would specify that an image named "gorilla.jpg" located
in the image-rotation folder should be displayed.
That's it, you're done.
*/
/* ------------------------- CONFIGURATION -----------------------
Set $folder to the full path to the location of your images.
For example: $folder = '/user/me/example.com/images/';
If the rotate.php file will be in the same folder as your
images then you should leave it set to $folder = '.';
*/
$folder = '.';
/*
Most users can safely ignore this part. If you're a programmer,
keep reading, if not, you're done. Go get some coffee.
If you'd like to enable additional image types other than
gif, jpg, and png, add a duplicate line to the section below
for the new image type.
Add the new file-type, single-quoted, inside brackets.
Add the mime-type to be sent to the browser, also single-quoted,
after the equal sign.
For example:
PDF Files:
$extList['pdf'] = 'application/pdf';
CSS Files:
$extList['css'] = 'text/css';
You can even serve up random HTML files:
$extList['html'] = 'text/html';
$extList['htm'] = 'text/html';
Just be sure your mime-type definition is correct!
*/
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
// You don't need to edit anything after this point.
// --------------------- END CONFIGURATION -----------------------
$img = null;
if (substr($folder,-1) != '/') {
$folder = $folder.'/';
}
if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
file_exists( $folder.$imageInfo['basename'] )
) {
$img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info['extension'] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);
if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}
}
if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}
}
?>I agree with him, make sure that thumbnails and full sized ones are named similar. I've got that problem before since I have this dotdot.jpg and when I tried to upload a new image I named it dotdot.png so it actually didn't run than I expected.
