PDA

View Full Version : Random photo gallery



Heatherfly
02-03-2012, 04:00 AM
I am pulling my hair out trying to get this to work.

I want to make a photo gallery with 20 or so squares that would be randomly populated every night from a group of 100+ photos that are on my server. Like a gallery of random picture-of-the-days.

I am searching for some sort of Java Script because I am a little unsure about PHP and server side scripting. If there is a code out there that I could just put in my header and my picture placeholders that would be ideal, but I am pulling my hair out trying to get everything that I've found to work for me.

Can anyone help me?

jscheuer1
02-03-2012, 05:23 PM
Why unsure about PHP? Not sure that your server has it? Or perhaps unsure that if it does, it has the permissions required to fetch files from a folder? If it does, that's probably the way to go. After all, you also seem unsure enough about javascript to be asking for help with it.

But assuming it doesn't or you just have to have a javascript solution -

Are these files always going to be the same 100+ images?

Are their filenames in an uninterrupted alphanumeric sequence?

You see, with javascript you cannot fetch the files. You either have to list them all one by one in your code or have them in some sort of uninterrupted naming sequence that can be iterated over in some sort of loop. If they're not always going to be the same 100+ image files, unless they use the exact same filenames as the previous 100+ image files, you will have to update the script every time the image files change.

So unless you have PHP, answer those two questions. If you have PHP, why not use it? It can fetch all the image files in a folder and randomly pick 20 or so of them to display. Another advantage with PHP is that the visitor to your site need not have javascript enabled to see the images.

Heatherfly
02-04-2012, 04:13 AM
I am aware that with Java script I would have to list each picture name, which is a pain, but I don't really care at this point as long as I could get the script to work.

My server has PHP enabled, but I would have no idea where to even begin with that, which is why I am trying to use Java script. It's a linux box, and my knowledge there is limited as well. I am learning as I go I guess, but it is a very frusterating process : (

jscheuer1
02-04-2012, 08:30 AM
Put this file - call it randomimages.php, in the folder with the images in it:


<!DOCTYPE html>
<html>
<head>
<title>My Random Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<?php
function randomimages(){
$dirname = isset($_REQUEST['dir'])? $_REQUEST['dir'] : './';
$numimages = isset($_REQUEST['num'])? $_REQUEST['num'] : 20;
$pattern = '#\.(jpg|jpeg|png|gif|bmp)$#i';
$files = array();
if($handle = opendir($dirname)){
while(($file = readdir($handle)) !== false){
if(preg_match($pattern, $file)){
array_push($files, "\t<img src='" . $dirname . $file . "' alt='' />");
}
}
closedir($handle);
shuffle($files);
}
return implode("\n", array_slice($files, 0, $numimages)) . "\n";
}

echo randomimages();
?>
</body>
</html>

Alternatively you can put it anywhere and set the folder it will pull images from by linking to it from another page and giving it a query, example link to it:


<a href="randomimages.php?dir=./pics/">Random Images</a>

Heatherfly
02-04-2012, 10:42 PM
Okay so I put the php file in the folder on the server with the pictures in it .... so what do I put in the html where I want the pictures to show up? I'm still confused.

jscheuer1
02-04-2012, 10:58 PM
You can navigate directly to it to see the pictures. Or you can put it's PHP portion on any PHP page. You can set the folder in the code*

Let's see if it's working first though. What's the address to it on your server?



*on this line:


$dirname = isset($_REQUEST['dir'])? $_REQUEST['dir'] : './';

which you could change to something simple like:


$dirname = 'images/';

Heatherfly
02-04-2012, 11:30 PM
So I can't put it in my HTML file? If I was confused before, I'm really really confused now.

jscheuer1
02-05-2012, 02:12 AM
Please post the link to your randomimages.php file as requested. If it works (we have to make sure your server is PHP enabled), we can put its PHP code on your html page with just a little tweak to make it point to the images folder and by adding the .php extension to the html file. I'd need to see it (your html page) as well, what's it's address?

By way of explanation, and like I said, you can put it on any PHP file. What you might not know is that any HTML file can be a PHP file all you have to do is change the extension from - say:

gallery.html

to:

gallery.php

All the ordinary HTML on it will work exactly like before. And any stuff between <?php and ?> will act as PHP.

Heatherfly
02-06-2012, 02:33 AM
http://www.thebestpet.net/petpictures/

jscheuer1
02-06-2012, 04:13 AM
OK, so:

http://www.thebestpet.net/petpictures/randomimages.php

works (click it and see). Now I need the link to the page you want the 20 random images to appear on. I'm guessing it's bestpet_002.htm.

If so, save a backup copy of it and make a new page called bestpet_002.php. On it use this code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Generated by Avanquest Technology v:8.0. For information please visit: http://www.avanquestusa.com/ -->
<html lang="en">
<head>
<title> Gallery </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css;">
<link rel="stylesheet" href="bestpet_g.css" type="text/css" media="screen,projection,print"> <!--// Document Style //-->
<link rel="stylesheet" href="bestpet_002_p.css" type="text/css" media="screen,projection,print"> <!--// Page Style //-->

</head>


<body>
<div id="page" class="page">
<span id="e23" class="navigation_box"></span>
<span id="e22" class="cc05"></span>
<h6 id="e21" class="footer">
Copyright (C) Heather Egbert. All Rights Reserved
</h6>
<span id="e20" class="logo"></span>
<span id="e19" class="logo"></span>
<span id="e18" class="logo"></span>
<span id="e17" class="logo"></span>
<span id="e16"></span>
<span id="e15" class="navigation_box"></span>
<span id="e14" class="navigation_box"></span>
<span id="e13" class="navigation_box"></span>
<a href="index.html">
<img id="e12" name="e12" class="cc06" src="images/bestpet002006.jpg" title="" alt="bestpet002006.jpg" align="right" border="0"></a>
<span id="e11" class="cc06"></span>
<span id="e10" class="cc06"></span>
<span id="e9" class="cc06"></span>
<span id="e8"></span>
<span id="e7" class="cc06"></span>
<div id="e6" class="cc07">
GOOGLE ADSENCE<br>
GOOGLE ADSENCE<br>
GOOGLE ADSENCE<br>
GOOGLE ADSENCE<br>
GOOGLE ADSENCE<br>
GOOGLE ADSENCE<br>
GOOGLE ADSENCE<br>
GOOGLE ADSENCE<br>
GOOGLE ADSENCE
</div>
<div id="e5" class="cc07" style="width: 100%;">

<?php
function randomimages(){
$dirname = 'petpictures/';
$numimages = isset($_REQUEST['num'])? $_REQUEST['num'] : 20;
$pattern = '#\.(jpg|jpeg|png|gif|bmp)$#i';
if($handle = opendir($dirname)){
while(($file = readdir($handle)) !== false){
if(preg_match($pattern, $file)){
$files[] = "\t<img src='$dirname$file' alt='' />";
}
}
closedir($handle);
shuffle($files);
}
return implode("\n", array_slice($files, 0, $numimages)) . "\n";
}

echo randomimages();
?>

</div>
</body>
</html>

Upload it to the root folder (replace the live copy of bestpet_002.htm with it). That should give you a rough idea, you can tweak the styles to get the layout you want.

Heatherfly
02-06-2012, 05:26 AM
Ha you are ingenious! Thank you so much!! I guess I thought php was something I would have to do in linux and not something I could just drop into my file transfer program. One more question, how would I go about tweeking it so that the pictures are more spaced out? Thanks again : )

jscheuer1
02-06-2012, 06:02 AM
We've dumped the images into a div with an id of 'e5'. So we could put something like so in the stylesheet:


#e5 img {
margin: 3px;
}

Heatherfly
02-07-2012, 01:57 AM
Got it. Thanks again. You've been a huge help.

newbieCoder
02-07-2012, 04:57 PM
We've dumped the images into a div with an id of 'e5'. So we could put something like so in the stylesheet:


#e5 img {
margin: 3px;
}

Btw, i want to ask is it possible to drag or copy a picture from the dynamic image array?

jscheuer1
02-07-2012, 05:00 PM
Btw, i want to ask is it possible to drag or copy a picture from the dynamic image array?

In the normal manner, yes. The PHP code used here simply writes ordinary HTML img tags to the page.

grendel54
06-01-2013, 01:33 AM
I am pulling my hair out trying to get this to work.

I want to make a photo gallery with 20 or so squares that would be randomly populated every night from a group of 100+ photos that are on my server. Like a gallery of random picture-of-the-days.

I am searching for some sort of Java Script because I am a little unsure about PHP and server side scripting. If there is a code out there that I could just put in my header and my picture placeholders that would be ideal, but I am pulling my hair out trying to get everything that I've found to work for me.

Can anyone help me?

anyway to do this and have the pics be links to other websites?

jscheuer1
06-01-2013, 02:04 AM
Please start a new thread for a new question. Please give more specifics and a link to what you have so far.