Может сделать проше?
Вот держи в помощь унылой жабе=) готовенькое. уже давно использую.
Файл imgresize.php
| Код | /* $src = путь $width=73, ширина $height=63 высота $rgb цвет фона $quality качество */ function img_resize($src, $width=73, $height=63, $rgb=0xFFFFFF, $quality=100){ $src = $_SERVER['DOCUMENT_ROOT'].$src; //Путь if (!file_exists($src)) return false;
$size = getimagesize($src);
if ($size === false) return false;
$format = strtolower(substr($size['mime'], strpos($size['mime'], '/')+1)); $icfunc = "imagecreatefrom" . $format; if (!function_exists($icfunc)) return false;
$x_ratio = $width / $size[0]; $y_ratio = $height / $size[1];
$ratio = min($x_ratio, $y_ratio); $use_x_ratio = ($x_ratio == $ratio);
$new_width = $use_x_ratio ? $width : floor($size[0] * $ratio); $new_height = !$use_x_ratio ? $height : floor($size[1] * $ratio); $new_left = $use_x_ratio ? 0 : floor(($width - $new_width) / 2); $new_top = !$use_x_ratio ? 0 : floor(($height - $new_height) / 2);
$isrc = $icfunc($src); $idest = imagecreatetruecolor($width, $height);
imagefill($idest, 0, 0, $rgb); imagecopyresampled($idest, $isrc, $new_left, $new_top, 0, 0, $new_width, $new_height, $size[0], $size[1]);
imagejpeg($idest /*, $dest, $quality*/);
imagedestroy($isrc); imagedestroy($idest); //return true; }
header("Content-type: image/jpeg"); if (isset($_GET['url']) and $_GET['url']!=''){ $w = (isset($_GET['w']) && intval($_GET['w'])!='') ? $_GET['w'] : 73; $h = (isset($_GET['h']) && intval($_GET['h'])!='') ? $_GET['h'] : 63; $c = (isset($_GET['c']) && $_GET['c']!='') ? "0x".$_GET['c'] : 0xFFFFFF; img_resize($_GET['url'],'', $w ,$h , $c); }
|
В чем суть вы храните одну детальную картинку и выводите таким размером каким хотите
<img src="/imgresize.php&url=/upload/kartinka.jpg&h=150&w=220&t=<?=time()?>">
Метод работает и для аякса...
Пример делаем показ картинки с подгрузкой из аякса...
Файл ajax.php
| Код | <? if($_POST['image']!=''){ if(file_exists($_SERVER['DOCUMENT_ROOT'].$_POST['image'])) $filepath = $_SERVER['DOCUMENT_ROOT'].$_POST['image'];
//image_type_to_mime_type() // print 'd'; $size = getimagesize($filepath); $wr = 50; $hr = 50; if(!$size===true){print 'немогу загрузить изображение!!!';}else{
if($size[0] >= 800) $wr= 800; else $wr = $size['0']; if($size[1] >= 640) $hr= 640; else $hr = $size['1'];
//print "<img src=\"/resize_image.php?url=".$_POST['file']."&w=$wr&h=$hr\" width=\"$wr\" height=\"$hr\" />"; print '<img style="border:2px solid #525252;" src="'.$_POST['image'].'" width="'.$wr.'" height="'.$hr.'" />'; //include 'resize_image.php?url='; } //width } ?>
|
Css стиль сделать в файл..
| Код | #overlay { position: fixed; z-index:100000; top: 0px; left: 0px; height:100%; width:100%; display: none;
text-align:center;
}
.overlayBG { background-color:#000000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }
* html #overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); }
#imageconteiner { display:none; position:absolute; position: fixed; width:100%; text-align:center; z-index: 100001; color:#000000; display:none; top:15%; /*left:25%;*/ } *html #imageconteiner { /* ie6 hack */ position: absolute; /*margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');*/ }
|
HTML код: С JS под фреймворк jquery
| Код | <body> <div id="imageconteiner"></div> <div id="overlay" class="overlayBG"></div>
<script type="text/javascript"> function endAnim(){ $('div#imageconteiner').css('display','none').hide(300); $('div#overlay').css('display','none'); $('div#imageconteiner').html(''); }
function startAnim(){ $('div#overlay').css('display','block'); $('div#imageconteiner').css('display','block').show(300);
}
function getImage(file){ $.post("\ajax.php", { image: file }, function(data){ $('div#imageconteiner').html(data); startAnim(); }, "html"); }
$('div#overlay').bind('click', function(e){ //e = new Event(e); endAnim(); //e.stop(); });
$('div#imageconteiner').bind('click', function(e){ //e = new Event(e); endAnim(); //e.stop(); }); </script>
|
Это обезательно после боди вставлять.
| Код | <div id="imageconteiner"></div> <div id="overlay" class="overlayBG"></div>
|
JS код под mootools
| Код |
<script type="text/javascript"> var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 3); var fx = new Fx.Tween('imageconteiner', { property: 'opacity', transition: Fx.Transitions.Quad.easeOut, delay:1000, duration:1000, wait:false, link: 'chain' });
$('overlay').addEvent('click', function(e){ e = new Event(e); endAnim(); e.stop(); });
function startAnim(){ var vv = $(document.body).getSize(); $('overlay').setStyle('display','block'); $('imageconteiner').setStyle('display','block'); fx.start(0,1); }
function endAnim(){ $('imageconteiner').setStyle('display','none'); $('overlay').setStyle('display','none'); }
function ajaxPrepare(body){ var param_str=""; if(typeof(body) == "string"){ param_str = body.replace(/^\?/, ""); }else if(typeof(body) == "object"){ for(var name in body){ if (!body.hasOwnProperty(name)) continue; if (name != '') param_str += "&" + name + "=" + body[name]; } } return param_str; }
function SendAjax(Parms,reqID){ $(document.body).getSize().y var dealogdata = new Request.HTML({ method: 'post', url:'/ajax.php', evalScripts:true, data:ajaxPrepare(Parms), onRequest: function(){ $(reqID).set('html', ''); }, onSuccess: function(a,b,c){ $(reqID).set('html',c); }, onFailure: function() {} }).send(); }
function getImage(url){ SendAjax({image:url},'imageconteiner'); startAnim(); } </script>
|
Может что то где то не так со стороны JS, firebug в помощь... Счасливо! |