Hey everyone. I'm looking to display a selection of images on a website in a very simple 'gallery'. The page will load and there'll just be a header, a small nav bar at the side and a container in the centre which will display various images. This doesn't need to have controls or slick animation (just a fade will suffice). It just needs to sit in a certain place on a website and loop through a selection of images (preferably randomly from a folder such as /img/gallery/ so the client can easily FTP new photos there). The main thing to note is that the images will be different sizes/aspect ratios so once I define a container I'd like the images to be displayed correctly in there. I've done a lot of searching around this morning and the majority of the solutions I've found are much too complex for what I'm looking for.

 

Thanks in advance. Have a great weekend!

 

Regards

Edited June 23, 201214 yr by EATTHERICH

Use a jQuery plugin for the gallery - something like Nivo Slider, or an alternative.

 

To get the images on the page from a folder, use some PHP. I have just written this out, but with a bit of luck it should do the job...

 

<?

//Change this to your image folder (from the root of your website, not server)
define('RELATIVE_IMAGE_FOLDER', '/images');


//Quick filter to make this quite robust
$rel_dir	= '/' . preg_replace('/^\/+|\/+$/', '', RELATIVE_IMAGE_FOLDER);
//The dir for the script to scan
$full_dir 	= $_SERVER['DOCUMENT_ROOT'] . $rel_dir;

//Grab all the file names from the full_dir directory
$files 		= scandir($full_dir);

//For each file, if it's an image, print it to the page (remember scandir will pick up non-image/hidden files)
foreach ($files as $file){
if (is_image($file)){
	echo "<a href='$rel_dir/$file' rel='gallery'><img src='$rel_dir/$file' /></a>";
}
}

//Very simple, just checks the file extension of given file name for common image filetypes
//@return bool
function is_image($file){
return preg_match("/\.(jpg|jpeg|bmp|gif|png|tiff)$/i", $file);
}

 

Edit: Made is_image function case-insensitive - some programs save as .JPEG, or .JPG. Also commented so you can see what's happening...

Edited June 23, 201214 yr by andyl

Hi, Andyl - thank you for taking the time to provide the code for me, it's much appreciated. I don't have time to test it right now but I'll get on it as soon as I can. Have a great weekend.

Hi, Andyl - thank you for taking the time to provide the code for me, it's much appreciated. I don't have time to test it right now but I'll get on it as soon as I can. Have a great weekend.

 

Hi,

 

Just my two pennies. As Andyl says use jQuery because it is simple, you will pick it up quickly and offers much.

For simple slideshow if you do not need it to actually slide you can use simple fadeIn, fadeOut with timing or .click().