Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Random photo gallery

  1. #1
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Random photo gallery

    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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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($files0$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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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/';
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    So I can't put it in my HTML file? If I was confused before, I'm really really confused now.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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($files0$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.
    Last edited by jscheuer1; 02-06-2012 at 03:59 AM. Reason: More Info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •