dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: View several pictures on one page.

  1. #1
    Join Date
    May 2017
    Posts
    6

    View several pictures on one page.

    On a given URL (for example: http://www.companyname.com/wp-content/uploads/2015/09/) the browser will display a list of jpg-files (clickable links). When I click them the browser will display only the picture I clicked.

    Is there a way to get the browser to display all the pictures at once in one window by writing a script or changing some settings in the browser, or by doing some other "trick"?

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,843
    There may be a way.
    Where are your images coming from?
    What code attempts have you made thus far?

  3. #3
    Join Date
    May 2017
    Posts
    6
    Quote Originally Posted by JMRKER View Post
    There may be a way.
    Where are your images coming from?
    What code attempts have you made thus far?
    I haven't done any code attempts, but I have downloaded the add-on "Image Preview" for Firefox.
    This makes a small preview when I move the cursor over the link.
    That is why I think it must be possible to get them all displayed at the same time.
    It would be much easier for me to scroll through down when there is a lot of files in the directory.

    What is your way?

  4. #4
    Join Date
    Dec 2012
    Posts
    1,390
    A common way to handle this situation is displaying thumbnails (small versions of the images) first and on click display a large version. It is also common to use a ready-to-use lightbox like Fancybox for displaying the large version. And if there are many images it is recommendable to create the HTML containing the thumbnails and the links to the fullsize versions by a PHP script. Some time ago I made such script that creates thumbnails. If you think it might benefit you I can look it up and post it.

  5. #5
    Join Date
    May 2017
    Posts
    6
    Yes please.

    Thank you

  6. #6
    Join Date
    Dec 2012
    Posts
    1,390
    This is the current version of the script:
    PHP Code:
    <?php 
                 
    //phpinfo();
                 
    error_reporting(E_ALL);
                 
    ini_set('display_errors''1');
    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        </head>
        <body>
            <?php
                
    function createThumbnail($filename$filename_thumb$factor) {
                    if (
    file_exists ($filename_thumb)) {
                        if (
    filemtime($filename) > filemtime($filename_thumb)) $create TRUE; else $create FALSE;
                    } else 
    $create TRUE;
                    if (
    $create) {
                        
    $info getimagesize($filename);
                        switch (
    $info[2]) {
                            case 
    IMAGETYPE_JPEG:
                                
    $image imagecreatefromjpeg($filename);
                                break;
                            case 
    IMAGETYPE_PNG:
                                
    $image imagecreatefrompng($filename);
                                break;
                            case 
    IMAGETYPE_GIF:
                                
    $image imagecreatefromgif($filename);
                                break;
                            default: return;
                        }
                        
    $width_th intval($info[0] * $factor);
                        
    $height_th intval($info[1] * $factor);
                        
    $imageth imagecreatetruecolor($width_th$height_th);
                        
    imagecopyresampled($imageth$image0000,
                            
    $width_th$height_th$info[0], $info[1]);
                        
    imagejpeg($imageth$filename_thumb100);
                    }
                }
                
    $filename 'images/dia0.jpg';
                
    $i 0;
                while (
    file_exists($filename)) {
                    
    $filename_thumb 'images/dia' $i '_th.jpg';
                    
    createThumbnail($filename$filename_thumb0.2);
                    echo 
    '<a href="' $filename '"><img src="' $filename_thumb '"></a>';
                    
    $i++;
                    
    $filename 'images/dia' $i '.jpg';
                }
            
    ?>
        </body>
    </html>
    Precondition: The files are enumerated according the scheme
    images/dia0.jpg images/dia1.jpg images/dia2.jpg ...
    Of course the folder and the prefix can be changed easily.
    It is also possible to read any file names by using the function glob(). If this option fits your needs better I can show you the code.

  7. #7
    Join Date
    May 2017
    Posts
    6
    Is it possible to have a script where the only input is the URL-directory, and then the script figures out the filenames and display the images?

  8. #8
    Join Date
    May 2017
    Posts
    6

  9. #9
    Join Date
    Dec 2012
    Posts
    1,390
    Obviously there are images of the same content in various sizes. This would require a code more complex in order to select one as a thumbnail and one as a large version and avoiding displaying the same content multiplely. I will try to code such algorithm.

  10. #10
    Join Date
    May 2017
    Posts
    6
    Cool

  11. #11
    Join Date
    Dec 2012
    Posts
    1,390
    This should do the job:
    PHP Code:
    <?php header('Content-Type: text/html; charset=ISO-8859-1');
          
    //phpinfo();
          
    error_reporting(E_ALL);
          
    ini_set('display_errors''1');
    ?>
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    </head>
    <body>
        <?php
        $images 
    glob("imggall/*.{jpg,jpeg,png}"GLOB_BRACE);
        
    natsort($images);
        
    var_dump($images);
        
    $thumbdone = []; $largedone = [];
        
    $thumbsize 80$largesize 600;
        
    $all = [];
        foreach(
    $images as $img) {
            
    $info getimagesize($img);
            
    $w $info[0];
            
    $h $info[1];
            
    //var_dump($img, $w, $h);
            
    $result preg_match ('/^.*\/(.*)-[0-9]+x[0-9]+\.(jpeg|jpg|png)/'$img$matches);
            if (
    $result) {
                
    $name $matches[1];
                if (!
    in_array($name$thumbdone) && $w $thumbsize && $h $thumbsize) {
                    
    $thumb $img;
                    
    $thumbdone[] = $name;
                    
    $all[$name]["thumb"] = $thumb;
                    
    var_dump($thumb);
                }
                if (!
    in_array($name$largedone) && $w $largesize && $h $largesize) {
                    
    $large $img;
                    
    $largedone[] = $name;
                    
    $all[$name]["large"] = $large;
                    
    var_dump($large);
                }
            }
        }
        
    var_dump($all);
        foreach (
    $all as $entry) {
            echo 
    '<a href="' $entry["large"] . '"><img src="' $entry["thumb"] . '"></a>';
        }
        
    ?>
        <style>
        </style>

    </body>
    </html>
    It determines one thumbnail and one large image for each name and creates a link and an image tag.
    Note that glob cannot read remote directories.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles