Revision [13346]

This is an old revision of AjaxGallery made by YodaHome on 2006-02-28 16:29:43.

 

AjaxGallery


This action is actually only partly based on ajax technique and is my first aproach to this kind of enhancements.

What it can do


What it cannot do (yet)



Prerequisites / Installation


Your server needs GD support for PHP installed for the resizement work. Furthermore this extension depends on two JavaScript libraries: Prototype and script.aculo.us. They need to be placed in a subdirectory "scripts" in the actions directory. Make sure you copy the .htaccess file from the action directory to this subdirectory!

The two files need to be placed in the actions directory:

ajaxgallery.php

<?php

if (isset($_GET['show'])) {

function thumb($source, $w, $h, $quality = 85)
    {
        /* Check for the image's exisitance */
        if (!file_exists($source)) {
            echo 'File does not exist!';
        }
        else {
            $size = getimagesize($source); // Get the image dimensions and mime type
            if ($size[0]>$w && $size[1]>$h) {
            if ($size[0]>$size[1]) {
                $newHeight = ($w * $size[1]) / $size[0];
                $newWidth = $w;
                if ($size[1]>$h)
                    {
                        $newWidth = ($h * $size[0]) / $size[1];
                        $newHeight = $h;
                    }
            } else {
                $newWidth = ($h * $size[0]) / $size[1];
                $newHeight = $h;
           
            }
            } else { $newWidth = $size[0];$newHeight = $size[1]; }
            $resize = imagecreatetruecolor($newWidth, $newHeight); // Create a blank image

            /* Check quality option. If quality is greater than 100, return error */
            if ($quality > 100) {
                echo 'The maximum quality is 100. <br>Quality changes only affect JPEG images.';
            }
            else {            
                header('Content-Type: '.$size['mime']); // Set the mime type for the image

                switch ($size['mime']) {
                    case 'image/jpeg':
                    $im = imagecreatefromjpeg($source);
                    imagecopyresampled($resize, $im, 0, 0, 0, 0, $newWidth, $newHeight, $size[0], $size[1]); // Resample the original JPEG
                    imagejpeg($resize, '', $quality); // Output the new JPEG
                    break;

                    case 'image/png':
                    $im = imagecreatefrompng($source);
                    imagecopyresampled($resize, $im, 0, 0, 0, 0, $newWidth, $newHeight, $size[0], $size[1]); // Resample the original PNG
                    imagepng($resize, '', $quality); // Output the new PNG
                    break;

                    case 'image/gif':
                    $im = imagecreatefromgif($source);
                    imagecopyresampled($resize, $im, 0, 0, 0, 0, $newWidth, $newHeight, $size[0], $size[1]); // Resample the original PNG
                    imagegif($resize, '', $quality); // Output the new PNG
                    break;
                }

                imagedestroy($im);
            }
        }
    }
    # echo $_GET['picture'].$_GET['width'].$_GET['height'];
    if (isset($_GET['createpic'])) thumb($_GET['picture'], $_GET['width'], $_GET['height']); else {
        echo '<html><head></head><body>';
        echo '<center><img src="'.$_SERVER['PHP_SELF'].'?picture='.$_GET['picture'].'&width='.$_GET['width'].'&height='.$_GET['height'].'&createpic=1&show=1" alt="Show Picture" align="center"></center>';
        echo '</body></html>';
    }

} else {
function GetFileList1($dirname, $extensoes = FALSE, $reverso = FALSE)
    {
    if(!$extensoes) //EXTENSIONS OF FILE YOU WANNA SEE IN THE ARRAY
    $extensoes = array("jpg", "png", "jpeg", "gif");
    $files = array();
    $dir = opendir($dirname);
    while(false !== ($file = readdir($dir)))
        { //GET THE FILES ACCORDING TO THE EXTENSIONS ON THE ARRAY
        for ($i = 0; $i < count($extensoes); $i++)
            {
            if (eregi("\.". $extensoes[$i] ."$", $file))
                { $files[] = $file; }
            }
        } //CLOSE THE HANDLE
        closedir($dir); //ORDER OF THE ARRAY
        if ($reverso)
            {
            rsort($files);
            } else {
            sort($files);
            } return $files;
    }

//thumbnail: generate thumbnails  http://www.alt-php-faq.org/local/105/
  function createthumb1($dir,$filename)
{  
    $thumb_path = $dir."/.thumbs/tn_".$filename;
    $thumb_width = 100;
    if(strtolower(substr($filename,strlen($filename)-4,strlen($filename))) == ".png"){
        $src_img = imagecreatefrompng("$dir/$filename");
    }elseif(strtolower(substr($filename,strlen($filename)-4,strlen($filename))) == ".jpg" || substr($filename,strlen($filename)-4,strlen($filename)) == "jpeg" ){
        $src_img = imagecreatefromjpeg("$dir/$filename");
    }elseif(strtolower(substr($filename,strlen($filename)-4,strlen($filename))) == ".gif"){
        $src_img = imagecreatefromgif("$dir/$filename");
    }
    $origw=imagesx($src_img);
    $origh=imagesy($src_img);
    $new_w = $thumb_width;
    $diff=$origw/$new_w;
    //$new_h=$new_w;
    $new_h=$origh/$diff;

    // the folowing line is commented out to get a better thumbnail,  but the imagecreatetruecolor only works with gd 2 or higher
    //$dst_img = imagecreate($new_w,$new_h);
    $dst_img = imagecreatetruecolor($new_w,$new_h);
    imagecopyresized($dst_img,$src_img,0,0,0,0,$new_w,$new_h,imagesx($src_img),imagesy($src_img));

    imagejpeg($dst_img, "$thumb_path");
    return true;
}

//framework output

echo '<script type="text/javascript" src="./scripts/prototype.js"></script>
<script type="text/javascript" src="./scripts/scriptaculous.js"></script>

<script type="text/javascript">

var h,w;
function get_viewport ()
    {
        if (self.innerHeight) // all except Explorer
            {
                w = self.innerWidth;
                h = self.innerHeight;
            }
        else if (document.documentElement && document.documentElement.clientHeight)
    // Explorer 6 Strict Mode
            {
                w = document.documentElement.clientWidth;
                h = document.documentElement.clientHeight;
            }
        else if (document.body) // other Explorers
            {
                w = document.body.clientWidth;
                h = document.body.clientHeight;
            }
    }
   
function load_picture(picture)
    {
        get_viewport();
        var url = "./actions/show.php";
        var pars = "picture=" + picture + "&width=" + (w-100) + "&height=" + (h-100);
        var myAjax = new Ajax.Updater("viewer", url, { method: "get", parameters: pars,onComplete: showResponse});
        //var myAjax = new Ajax.Updater("viewer", url, { method: "get", parameters: pars});
    }
   
    function showResponse(originalRequest)
    {
        Effect.toggle("viewer","appear");
   
    }
</script><div style="position:fixed;top:50px;left:50px;right:50px;bottom:50px;display:none;" id="viewer" onclick="Effect.toggle(\'viewer\',\'appear\');return false;"></div>
'
;

//$dir = $vars['dir']; // First thing to do, I suppose is to retrieve all of the filenames in the directory
$dir = $vars['dir'];
    if ( !is_dir($dir) )
        {
        $output = "That directory does not exists (or it could be a file!)";
        } else
        { // Does the thumbs directory exist? If not then make it...
        $thumbdir = $dir."/.thumbs";
        if ( true !== file_exists($thumbdir) )
        {
        mkdir($thumbdir);
        }
        $files = GetFileList1($dir);
        // Right, with that done, we need to see if a thumb exists for each pic
        // If it doesn't, then we gots to create one!
        // Thumbs will be called tn_filename.jpg
        $position = 0;
        $output .= "<center><table cellpadding=\"0\" cellspacing=\"5\" width=\"75%\"> <tr>";
        foreach ( $files as $filename )
            {
            $thumbname = "tn_".$filename;
            if ( true !== file_exists($thumbdir."/".$thumbname) )
                {
                createthumb1($dir,$filename);
                }
            $imageref = "javascript:load_picture('.$dir/$filename');";
            $output .= "<td><a href=\"$imageref\"><img src=\"$thumbdir/$thumbname\" style=\"border : 0px;\"/></a></td>";
            $position += 1;
            if ( $position == "4" )
                {
                $output .= "</tr>";
                $position = 0;
                $output .= "<tr>";
                }
            }
            $output .= "</tr>";
        }
        $output .= "</table></center>"; print($output);

}
?>


show.php
<?php

function generate($source, $w, $h, $quality = 85)
    {
        /* Check for the image's exisitance */
        if (!file_exists($source)) {
            echo 'File does not exist!';
        }
        else {
            $size = getimagesize($source); // Get the image dimensions and mime type
            if ($size[0]>$w && $size[1]>$h) {
            if ($size[0]>$size[1]) {
                $newHeight = ($w * $size[1]) / $size[0];
                $newWidth = $w;
                if ($size[1]>$h)
                    {
                        $newWidth = ($h * $size[0]) / $size[1];
                        $newHeight = $h;
                    }
            } else {
                $newWidth = ($h * $size[0]) / $size[1];
                $newHeight = $h;
           
            }
            } else { $newWidth = $size[0];$newHeight = $size[1]; }
            $resize = imagecreatetruecolor($newWidth, $newHeight); // Create a blank image

            /* Check quality option. If quality is greater than 100, return error */
            if ($quality > 100) {
                echo 'The maximum quality is 100. <br>Quality changes only affect JPEG images.';
            }
            else {            
                header('Content-Type: '.$size['mime']); // Set the mime type for the image

                switch ($size['mime']) {
                    case 'image/jpeg':
                    $im = imagecreatefromjpeg($source);
                    imagecopyresampled($resize, $im, 0, 0, 0, 0, $newWidth, $newHeight, $size[0], $size[1]); // Resample the original JPEG
                    imagejpeg($resize, '', $quality); // Output the new JPEG
                    break;

                    case 'image/png':
                    $im = imagecreatefrompng($source);
                    imagecopyresampled($resize, $im, 0, 0, 0, 0, $newWidth, $newHeight, $size[0], $size[1]); // Resample the original PNG
                    imagepng($resize, '', $quality); // Output the new PNG
                    break;

                    case 'image/gif':
                    $im = imagecreatefromgif($source);
                    imagecopyresampled($resize, $im, 0, 0, 0, 0, $newWidth, $newHeight, $size[0], $size[1]); // Resample the original PNG
                    imagegif($resize, '', $quality); // Output the new PNG
                    break;
                }

                imagedestroy($im);
            }
        }
    }
    # echo $_GET['picture'].$_GET['width'].$_GET['height'];
    if (isset($_GET['createpic'])) thumb($_GET['picture'], $_GET['width'], $_GET['height']); else {
        echo '<html><head><script type="text/javascript" src="./scripts/prototype.js"></script>
                          <script type="text/javascript" src="./scripts/scriptaculous.js"></script></head><body onload="new Effect.Appear(\'loading\');return false;">'
;
        echo '<div id="loading" style="position:absolute;top:0px;right:50%;background-color:lightgray;z-index:1;"><b>Loading...</b></div>';
        echo '<center><img style="position:absolut;top:0px;left:0px;display:none;z-index:2;" id="img" src="'.$_SERVER['PHP_SELF'].'?picture='.$_GET['picture'].'&width='.$_GET['width'].'&height='.$_GET['height'].'&createpic=1" alt="Show Picture" align="center" onLoad="javascript:Effect.toggle(\'img\',\'appear\');Effect.toggle(\'loading\',\'appear\');return false;"></center>';
        echo '</body></html>';
    }
   
?>


CategoryUserContributions
There are no comments on this page.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki