resize изображения и аналог getimagesize()
Хочу реализовать для js-галереи (http://learn.javascript.ru/play/tuto...ery/index.html) красивое отображение вертикальных и горизонтальных картинок в паспарту одного размера. На ПХП делал так: getimagesiz'ом сравнивал width и height и по результату присваивал картинке один из двух стилей.
Нашел аналог getimagesize для js: http://www.rsdn.ru/forum/web/987244.1 Подставляю эту функцию и пытаюсь присвоить ширину и высоту
function showThumbnail(href, title) {
var is = getImageSize( 'largeImg');
largeImg.src = href;
largeImg.alt = title;
if (is.width > is.height) largeImg.width = is.width;
else largeImg.height = is.height;
}
Должно по идее присваивать или ширину или высоту изначальной картинки. Вроде присвоение работает но ужасно. Изображения растягиваются, а иногда при повторном нажатии на один и тот же thumbnail картинка растягивается по вертикали.
function showThumbnail(href, title) {
var is = getImageSize( 'largeImg');
largeImg.src = href;
largeImg.alt = title;
if (is.width > is.height) largeImg.width = is.width;
/* else largeImg.height = is.height;*/
}
В таком виде ширина у всех картинок одинакова, ничего не растягивается, но вертикальные картинки выходят за паспарту.
function showThumbnail(href, title) {
var is = getImageSize( 'largeImg');
largeImg.src = href;
largeImg.alt = title;
if (is.width < is.height) largeImg.height = is.height;
/* else largeImg.height = is.height;*/
}
Если так - то же самое, что и в первом варианте. Т.е. выходит, что ширина нормально присваивается, а высота нет. Я новичок, так что простите за банальные вопросы. Может все вообще не этим путем надо решать? |
не проще банально задавать атрибутом в картинке ?
<img src="http://s2.uploads.ru/H43vD.jpg" width="200" /> или через стиль
<style>
#Wrap-block img{
width:200px;
height:auto;
max-height:350px!important;
}
</style>
|
у меня картинки в квадратном паспарту отображаются. в этом случае нельзя присвоить стандартную высоту или ширину, т.к. если картинка вертикальная, то с фиксированной шириной будет вылазить за пределы поля.
Так делал на ПХП:
<img class="
<?php if($size[0] > $size[1])
{
echo 'goriz';
}
else echo 'vert';
?>
.goriz{
display: block;
margin: 25px auto;
width: 500px;
}
.vert{
display:block;
margin: 10px auto;
height: 500px;
}
|
Цитата:
<style>
#Wrap-block img{
width:200px;
height:auto;
max-height:350px!important;
}
</style>
<div id=Wrap-block>
<img src="http://s2.uploads.ru/H43vD.jpg" />
<img src="http://images2.layoutsparks.com/1/95613/water-dragon-animal-image.jpg" />
<img src="http://media.professionali.ru/processor/commentimages/original/2011/12/31/500.jpg" />
<img src="http://s3.uploads.ru/2yB5d.jpg" />
</div>
по-ходу нужно искать картинки с пропорциями длинных и узких (height/width > X) и им принудительно выставлять атрибут width (Хотя вродь делал через стиль(может вру |
max-height не спасает
<style>.galcont{ /*паспарту для картин*/
height: 550px;
width: 550px;
background-color: #E7E6E9;
border: 1px solid grey;
margin: auto;
}
#largeImg {
width: 500px;
/* height: 400px;*/
display: block;
margin: auto;
}
</style>
<div class="galcont">
<p><img id="largeImg" src="http://media.professionali.ru/processor/commentimages/original/2011/12/31/500.jpg" alt="Large image"></p>
</div>
Хотел сделать просмотр, но пока не разобрался как. Так вот, max-height не спасает, потому что при вертикальном img нужно ограничить по высоте - тогда будет маленький width. Горизонталь - наоборот: width на максимум, а height маленький. |
Цитата:
правдо центрирование по высоте мон выполнить только при паспарту таблицей |
Цитата:
|
Пытался тут илюстрацию загрузить, но лажа получается. Короче, вопрос свелся вот к этому:
if (is.width > is.height) largeImg.width = '500'; else largeImg.height = '500'; Где is.width и is.height - результаты выполнения функции getImageSize. В этом месте что-то не работает. Хотя работает, но присваивает какую-то лабуду. |
http://www.bulgakova.in.ua/gallery/index/all
Вот илюстрация если чем-то поможет. |
Цитата:
Цитата:
http://htmlbook.ru/html/img/height http://htmlbook.ru/html/img/width -не нужно высоту или ширину предварительно задавать у тега вообще. Цитата:
-так же обратите внимание на единицы измерения |
не знаю зачем Вы мне эти ссылки кинули, но я допер в чем проблема. Просто надо при задании параметров
if (is.width > is.height) largeImg.width = '500';
else largeImg.height = '500';
удалять заданный ранее, а то получается квадрат. спасибо всем за помощь!
#largeImg {
09 /*width: 500px;*/
10 /* height: 400px;*/
11 display: block;
12 margin: auto;
закомментил - ничего не поменялось |
function showThumbnail(href, title) {
var is = getImageSize( 'largeImg');
largeImg.src = href;
largeImg.alt = title;
if (is.width > is.height) {
largeImg.width = '500';
largeImg.removeAttribute('height');
}
else {
largeImg.height = '500';
largeImg.removeAttribute('width');
}
}
Типа того. Цитата:
|
Цитата:
Цитата:
Цитата:
а по ссылкам нужно всётаки ознакомиться Цитата:
Цитата:
а изображения нужно готовить на сервере , при их загрузке на сервер |
if(Math.round(largeImg.height)/Math.round(largeImg.width) > 550/550) {largeImg.height='550px';largeImg.width="auto"}
|
Цитата:
var is = getImageSize( 'largeImg');поставить после загрузки изображения, т.е. largeImg.src = href;
function showThumbnail(href, title) {
largeImg.src = href;
largeImg.alt = title;
var is = getImageSize( 'largeImg');
if (is.width > is.height) {
largeImg.width = '500';
largeImg.removeAttribute('height');
}
else {
largeImg.height = '500';
largeImg.removeAttribute('width');
}
}
И все красиво. |
Цитата:
и "работает" это только потому что изображения закешировались. а при полной загрузке изображения возникает событие onload |
По-моему, для этого галерее изначально была эта функция:
/* предзагрузка */
var imgs = thumbs.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
var url = imgs[i].parentNode.href;
var img = document.createElement('img');
img.src = url;
}
Удалил кэш - все по прежнему работает. Я бы остановился, но просто интересно как надо бы с onload правильно сделать? |
img.src = url;
img.onload=function(){alert('загрузилось')}
alert('меняем размеры')
Цитата:
|
как onload работает я знаю. интересовала конкретная реализация.
последний совет конечно ок. только заработало - на свалку. а предложения по делу... |
Цитата:
Вот так нужно примерно:
function getImageSize(src, callback) {
var img = new Image();
img.onload = img.onerror = function() {
callback(img.width, img.height);
}
img.src = src;
}
getImageSize('http://javascript.ru/forum/image.php?u=25460&dateline=1356854759', function(w, h){
alert([w, h]);
});
|
devote, большое спасибо!
|
| Часовой пояс GMT +3, время: 19:36. |