advanced code snippet search

Posted By

trepmal on 07/31/10


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Priestd09


Image Browser

 / Published in: HTML
 

URL: http://trepmal.com/scripts/image-browser/

Sometimes a client will provide a bunch of photos – which is great – but when they’re in a bunch of different folders, it can be hard to sort through and find the right one. So, just toss your web-friendly photos into a directory on their website, and use the script below to nicely display all the photos.\r\n\r\nIt makes thumbnails (with my ThumbFly script from earlier) and saves them to a temp directory for caching. Photos are sorted by sub-directory, and the image name is revealed on hover. It’s easy to make this script modal-box friendly.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Image Browser</title>
  6. <style type="text/css">
  7. <!--
  8. *{margin:0;padding:0;outline:0;}
  9. .clear{clear:both;}
  10. h2 {clear:both;margin: 5px 0 20px 0;background:#f3f3f3;padding:3px;border: 1px solid #555;}
  11. body {background:#292929;text-align:center;font-size: 62.5%;font-family:Verdana, Geneva, sans-serif;}
  12. #page {background:#fff; width:960px;margin: 20px auto;padding:20px;text-align:left;overflow:hidden;}
  13. a {display:block;width:125px;height:125px;overflow:hidden;margin:3px;float:left;position:relative;border: 1px solid #555;}
  14. a span {position:absolute;bottom:200px;left:0px;width:125px;background:#ccc;line-height:14px;}
  15. a:hover span {bottom:0px;}
  16. a img {border:none;}
  17. -->
  18. </style>
  19. <link rel="stylesheet" type="text/css" href="css/colorbox.css" />
  20. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  21. <script type="text/javascript" src="js/jquery.colorbox-min-1.3.6.js"></script>
  22. <script type="text/javascript">
  23. $(document).ready(function(){
  24.         $("a[href$='jpg']").colorbox();
  25. });
  26. </script></head>
  27. <body id="home">
  28.     <div id="page">
  29.         Click to enlarge.
  30. <?php
  31.  
  32. function get_imgs($type) {
  33.         $i = '0';
  34.         foreach(glob("*.$type") as $img) {
  35.                 echo '<a href="'.$img.'" title="'.$img.'" rel="'.$dir.'" class="popup">';
  36.                 echo '<img src="'.thumbfly( array( 'src' => $img, 'w' => 125, 'h' => 125 ) ). '" title="'.$img.'" />';
  37.                 echo '<span>'.$img.'</span>';
  38.                 echo '</a>'."\n";
  39.                 ++$i;
  40.         }
  41.         foreach(glob("*/",GLOB_ONLYDIR) as $dir) {
  42.                 if ($dir == 'tmp-tf/') continue;
  43.                 echo '<h2>'.$dir.'</h2>';
  44.                 foreach(glob("$dir*.$type") as $img) {
  45.                         echo '<a href="'.$img.'" title="'.$img.'" rel="'.$dir.'" class="popup">';
  46.                         echo '<img src="'.thumbfly( array( 'src' => $img, 'w' => 125, 'h' => 125) ). '" title="'.$img.'" />';
  47.                         echo '<span>'.str_replace(dirname($img),'',$img).'</span>';
  48.                         echo '</a>'."\n";
  49.                         ++$i;
  50.                 }
  51.         }
  52.         echo '<p class="clear">' . $i . ' ' . $type . ' match' . ( ($i != '1') ? 'es' : '' ) . '</p>';
  53. }
  54.         get_imgs('jpg'); repeat for 'gif' and/or 'png'
  55. ?>
  56. <?php include('tf.php'); /*include ThumbFly function*/ ?>
  57.     </div>
  58. </body>
  59. </html>

Report this snippet  

You need to login to post a comment.