Random photo gallery

**Heatherfly** · 02-03-2012, 03: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, 04: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, 03: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, 07:30 AM

Put this file - call it randomimages.php, in the folder with the images in it:

PHP Code:


<!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:

HTML Code:

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

**Heatherfly** · 02-04-2012, 09: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, 09: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:

Code:

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

which you could change to something simple like:

Code:

$dirname = 'images/';

**Heatherfly** · 02-04-2012, 10: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, 01: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, 01:33 AM

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

**jscheuer1** · 02-06-2012, 03: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:

PHP 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.

Thread: Random photo gallery

Thread Tools

Search Thread

Random photo gallery

Bookmarks

Bookmarks

Posting Permissions