improve image scaling (fixes #59)
* add width and height to AJAX result * handle preview image width and height changes * improve default_horizontal theme's css to handle vertical images
This commit is contained in:
		
							parent
							
								
									922d234f11
								
							
						
					
					
						commit
						62d1ba55fe
					
				
					 4 changed files with 43 additions and 27 deletions
				
			
		|  | @ -32,6 +32,10 @@ define(IMAGESEC, "images"); | |||
| define(GALLERYSEC, "gallery"); | ||||
| define(GALLERY_RE, '/^[\w\d _-]+$/'); | ||||
| 
 | ||||
| define(SCALE_WIDTH, 0); | ||||
| define(SCALE_HEIGHT, 1); | ||||
| define(SCALE_BOTH, 2); | ||||
| 
 | ||||
| $basedir = realpath(implode(DIRECTORY_SEPARATOR, array(dirname(__file__), '..'))); | ||||
| $inifile = implode(DIRECTORY_SEPARATOR, array($basedir, 'gallery.ini')); | ||||
| 
 | ||||
|  | @ -118,11 +122,14 @@ function getImageInfo($galleryname, $imagename) { | |||
| 
 | ||||
|   $label = getImageLabel($galleryname, $imagename); | ||||
|   $gallerylabel = getGalleryLabel($galleryname); | ||||
|   $scaledimage = getScaledImage($galleryname, $imagename, | ||||
|                                 $theme->previewsize, SCALE_BOTH); | ||||
|   $scaledsize = getimagesize($configuration['gallerydir'] . | ||||
|                              DIRECTORY_SEPARATOR . $scaledimage);   | ||||
|   return array("name" => $imagename, | ||||
|                "label" => $label, | ||||
|                "preview" => $configuration['gallerypath'] . '/' . | ||||
|                getScaledImage($galleryname, $imagename, | ||||
|                               $theme->previewsize, false), | ||||
|                "preview" => array($configuration['gallerypath'] . '/' . | ||||
|                                   $scaledimage, $scaledsize[0], $scaledsize[1]), | ||||
|                "full" => implode('/', array($configuration['gallerypath'], | ||||
|                                             $galleryname, $imagename)), | ||||
|                "title" => sprintf("%s :: %s", $gallerylabel, $label) | ||||
|  | @ -229,13 +236,31 @@ function getCurrentGallery() { | |||
|  * | ||||
|  * @return Pfad des skalierten Bildes relativ zu @a gallerydir | ||||
|  */ | ||||
| function getScaledImage($galleryname, $basename, $maxdim, $scaleheight=true) { | ||||
| function getScaledImage($galleryname, $basename, $maxdim, $scaletype) { | ||||
|   global $configuration; | ||||
| 
 | ||||
|   if ($maxdim == 0) { | ||||
|     debug_print_backtrace(); | ||||
|   } | ||||
|   $gallerydir = realpath($configuration['gallerydir'] . DIRECTORY_SEPARATOR . $galleryname); | ||||
|   $originalfile = $gallerydir . DIRECTORY_SEPARATOR . $basename; | ||||
|   switch($scaletype) { | ||||
|   case SCALE_WIDTH: | ||||
|     $scaleheight = false; | ||||
|     break; | ||||
|   case SCALE_HEIGHT: | ||||
|     $scaleheight = true; | ||||
|     break; | ||||
|   case SCALE_BOTH: | ||||
|     $originalsize = getimagesize($originalfile); | ||||
|     $scaleheight = ($originalsize[1] > $originalsize[0]); | ||||
|     break; | ||||
|   default: | ||||
|     header('Content-Type: text/plain'); | ||||
|     debug_print_backtrace(); | ||||
|     die('Unknown scaletype'); | ||||
|   } | ||||
|    | ||||
|   if ($scaleheight) { | ||||
|     $scaleddir = sprintf("scaled_x%d", $maxdim); | ||||
|   } else { | ||||
|  | @ -256,7 +281,6 @@ function getScaledImage($galleryname, $basename, $maxdim, $scaleheight=true) { | |||
|   $scaledimage = $scaleddirpath . DIRECTORY_SEPARATOR . $basename; | ||||
|   if (!is_file($scaledimage)) { | ||||
|     // Datei erzeugen
 | ||||
|     $originalfile = $gallerydir . DIRECTORY_SEPARATOR . $basename; | ||||
|     $origimage = imagecreatefromjpeg($originalfile); | ||||
|     $origx = imagesx($origimage); | ||||
|     $origy = imagesy($origimage); | ||||
|  | @ -293,17 +317,13 @@ function getThumbNailInfo($galleryname) { | |||
| 
 | ||||
|   $thumbsizes = array(); | ||||
|   $thumbdimsum = 2; | ||||
|   $scaletype = ($theme->themetype == 'horizontal') ? SCALE_HEIGHT : SCALE_WIDTH; | ||||
|   foreach (glob(realpath($configuration['gallerydir'] . DIRECTORY_SEPARATOR . | ||||
|                          $galleryname) . DIRECTORY_SEPARATOR . | ||||
|                 '*.jp{e,}g', GLOB_BRACE) as $filename) { | ||||
|     $basename = basename($filename); | ||||
|     if ($theme->themetype == 'horizontal') { | ||||
|       $thumbfile = getScaledImage($galleryname, $basename, $theme->thumbsize, | ||||
|                                   true); | ||||
|     } else { | ||||
|       $thumbfile = getScaledImage($galleryname, $basename, $theme->thumbsize, | ||||
|                                   false); | ||||
|     } | ||||
|     $thumbfile = getScaledImage($galleryname, $basename, $theme->thumbsize, | ||||
|                                 $scaletype); | ||||
|     if ($thumbsize = getimagesize(realpath($configuration['gallerydir'] . | ||||
|                                            DIRECTORY_SEPARATOR . | ||||
|                                            $thumbfile))) { | ||||
|  | @ -406,7 +426,7 @@ function getFirstPreview(&$thumbinfo) { | |||
|   $galleryname = $thumbinfo[1]; | ||||
|   $fullname = $configuration['gallerypath'] . '/' . $galleryname . '/' . $basename; | ||||
|   $scaledimage = getScaledImage($galleryname, $basename, | ||||
|                                 $theme->previewsize, false); | ||||
|                                 $theme->previewsize, SCALE_BOTH); | ||||
|   $scaledimagesize = getimagesize(realpath($configuration['gallerydir'] . | ||||
|                                            DIRECTORY_SEPARATOR . | ||||
|                                            $scaledimage)); | ||||
|  |  | |||
|  | @ -56,10 +56,8 @@ function updateContentImage(pathParts) { | |||
|         "galleryname" : pathParts.gallery | ||||
|     }, function(data, textStatus) { | ||||
|         $("#imagedescription").text(data["label"]); | ||||
|         $("#content_main img").attr("alt", data["label"]); | ||||
|         $("#content_main img").attr("src", data["preview"]); | ||||
|         $("#content_main a").attr("href", data["full"]); | ||||
|         $("#content_main a").attr("title", data["label"]); | ||||
|         $('#content_main img').attr('alt', data.label).attr('src', data.preview[0]).attr('width', data.preview[1]).attr('height', data.preview[2]); | ||||
|         $("#content_main a").attr("href", data["full"]).attr("title", data["label"]); | ||||
|         document.title = data["title"]; | ||||
|     }, 'json'); | ||||
| } | ||||
|  |  | |||
|  | @ -1,4 +1,4 @@ | |||
| /* | ||||
| git sta/* | ||||
|  * Copyright (c) 2008 Jan Dittberner <jan@dittberner.info> | ||||
|  * Jan Dittberner IT-Consulting & -Solutions | ||||
|  * Cottbuser Str. 1, D-01129 Dresden | ||||
|  | @ -66,9 +66,8 @@ a.lightbox img { | |||
| } | ||||
| #imagedescription { | ||||
| position:relative; | ||||
|   weight: 330px; | ||||
|   height: 25px; | ||||
|   top: 300px; | ||||
|   top: 330px; | ||||
|   left: 0px; | ||||
|   color: #ffffff; | ||||
|   font-size:10px; | ||||
|  | @ -76,7 +75,6 @@ position:relative; | |||
|   font-weight:normal; | ||||
|   text-align:center; | ||||
|   vertical-align:center;   | ||||
|    | ||||
| } | ||||
| .imgdescription { | ||||
|   color: #ffffff; | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| /* | ||||
|  * Copyright (c) 2008 Jan Dittberner <jan@dittberner.info> | ||||
|  * Copyright (c) 2008, 2009 Jan Dittberner <jan@dittberner.info> | ||||
|  * Jan Dittberner IT-Consulting & -Solutions | ||||
|  * Cottbuser Str. 1, D-01129 Dresden | ||||
|  * | ||||
|  | @ -203,7 +203,7 @@ a:active { | |||
| #content_sub { | ||||
|    position:absolute; | ||||
|    width:330px; | ||||
|    height:330px; | ||||
|    height:350px; | ||||
|    left: 143px; | ||||
|    top: 149px; | ||||
| } | ||||
|  | @ -213,7 +213,7 @@ a:active { | |||
|    width:20px;  | ||||
|    height:10px;  | ||||
|    left: 298px; | ||||
|    top: 305.5px; | ||||
|    top: 330px; | ||||
|    z-index:1; | ||||
| } | ||||
| 
 | ||||
|  | @ -221,8 +221,8 @@ a:active { | |||
|    position:absolute; | ||||
|    width:311px; | ||||
|    height:311px; | ||||
|    top: 9.5px; | ||||
|    left: 9.5px; | ||||
|    top: 9px; | ||||
|    left: 9px; | ||||
|    text-align:center; | ||||
|    font-weight: normal; | ||||
| } | ||||
|  |  | |||
		Reference in a new issue