VPF::Масштабирование рисунков - Форум программистов

Bog d`An

Дата 18.2.2006, 08:06 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 217
Регистрация: 26.3.2005
Где: Украина:Днепропет ровск

Репутация: нет
Всего: 3

Люди подскажите скрипт, который все рисунки больше указанного размера (по одной из сторон или по обееим) уменьшал их до нужного размера, а те к-е меньше не масштабировал, но оставлял столько же места как и для больших...

--------------------

Удача откроет двери даже там, где их нет.Генри Морган--------------------[Furry team][Agent`s team][СРУКер]

GIK

Дата 18.2.2006, 09:58 (ссылка)

(нет голосов)

Загрузка ...

Добрый человек

Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14

Цитата

но оставлял столько же места как и для больших...

А что это значит?

Код


<html>
 <head>
  <script type="text/javascript">
   <!--
   var topTime;
   var wid;
   var IDid;
 function f4(obj,img,w){ 
wid=w;
IDid=img;
if(obj.width>120) {
 topTime=window.setInterval("wStyle()",10);
 }
}
function wStyle(){ 
 if(document.getElementById(IDid).width>120){ 
  document.getElementById(IDid).width=wid--; 
 }else {clearInterval(topTime);} 
} 
 //-->
   </script>
 </head>
<body id="bod">  
 <img src="1.jpg" id="img1" width=240 style="position:absolute;top:21;left:30;" onMouseOver="f4(this,'img1',this.width)"> 
 <img src="2.jpg" id="img2" width=230 style="position:absolute;top:21;left:155;" onMouseOver="f4(this,'img2',this.width)"> 
 <img src="3.jpg" id="img3" width=230 style="position:absolute;top:21;left:280;" onMouseOver="f4(this,'img3',this.width)"> 
</body>
</html>

--------------------

Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.

12345c

Дата 18.2.2006, 16:26 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Цитата(GIK @ 18.2.2006, 09:58

)

А что это значит?

Значит, рамку таблицы надо, а рисунок в середину.
Bog d`An, вообще, это всё очень зависит от дизайна и от того, задаются ли размеры рисунка заранее. Если нет, то вроде бы удобно, но изображения будут прыгать - сначала грузим большое, потом измеряем размеры, потом применяем логику. Таких скриптов не видел, написать не проблема (но часов 5 займёт), но главное, скрипт примера всё равно придётся переделывать под дизайн.

Точнее, чисто скрипт кое-какой сделать - это минут 30 с отладкой. Но будет некрасиво. Представьте - грузим картинки в столбец в таблицу. Когда они все загрузятся, пробегаем с проверкой размеров. Затем делаем таблицу видимой. Её размеры скачком уменьшатся, текст снизу подвинется вверх. Для дизайна явно надо что-то красивее. И работа над этим займёт означенное время.

Это сообщение отредактировал(а) 12345c - 18.2.2006, 16:33

Alx

Дата 19.2.2006, 00:54 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

12345c,
да это для форумов,я думаю, тут о дизайне речи не идет, каждая картинка - на новой строке.

Bog d`An
писал такую штуку, но IE only вроде, если надо, могу откопать ;)

--------------------

Bog d`An

Дата 19.2.2006, 06:52 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 217
Регистрация: 26.3.2005
Где: Украина:Днепропет ровск

Репутация: нет
Всего: 3

Цитата(12345c @ 18.2.2006, 16:26

)

Когда они все загрузятся, пробегаем с проверкой размеров.

максимальный размер задан зарание...

--------------------

Удача откроет двери даже там, где их нет.Генри Морган--------------------[Furry team][Agent`s team][СРУКер]

12345c

Дата 19.2.2006, 09:40 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Максимальный - да, но у каждой картинки размеры свои, я про эти размеры. Если они не заданы в массиве, то сначала придётся вывести картинки, затем обрабатывать локальным скриптом.

Короче, дайте html-код формата картинок в окончательном виде, который вы хотите видеть, а то это одни разговоры в ответ на разговоры. На этом примере быстро напишем скрипт.

Bog d`An

Дата 19.2.2006, 17:56 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 217
Регистрация: 26.3.2005
Где: Украина:Днепропет ровск

Репутация: нет
Всего: 3

смотри здесь "прикольные рисунки" и всё поймёшь...

--------------------

Удача откроет двери даже там, где их нет.Генри Морган--------------------[Furry team][Agent`s team][СРУКер]

12345c

Дата 20.2.2006, 02:30 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

посмотрел, теперь слухай сюды:

Показанный пример несколько отличается (противоречит) от постановки. Там видишь, есть низкие картинки-баннеры, т.е. высота минимальная не установлена, только ширина. Поэтому я хотел конкретный пример, а не постановку, которую потом 10 раз изменят.

На базе этого написал некий общий скрипт, который будет годиться и для заданной высоты, и для незаданной. А также для правки картинок вообще где угодно - в текстах, в многостолбцовых таблицах перевью-картинок (thumbnails) - задавайте правильно ширину и высоту или только ширину, и скрипт сработает.

Это не окончательный продукт, потому что делает характерный скачок из размеров таблицы в невидимом сосотоянии в размеры видимой таблицы. Так сказать, идея в полуголом виде. (Для кого эротика, для кого ...)

Код

<title>Картинки не более заданной ширины.</title>
<script>d=document;g=function(a){return d.getElementById(a);}

loadGallery=function(objGal,nameGal,widthGal,heightGal){//вывод галереи
    //параметры:(объект_в котором правят размеры,
    //  имя группы картинок,
    //  макс.ширина и высота(может отсут.) картинки)
if(!heightGal)heightGal=1999;
g(objGal).style.width=widthGal;
var arrGal=d.getElementsByName(nameGal);
var i,k;
for(i=0;i<arrGal.length;i++){
    k=1;
    if(arrGal[i].offsetWidth>widthGal)k=arrGal[i].offsetWidth/widthGal;
    if(arrGal[i].offsetHeight>heightGal)k=Math.max(k,arrGal[i].offsetHeight/heightGal)
    arrGal[i].style.width=arrGal[i].offsetWidth/k;
    arrGal[i].style.visibility='visible';
}
}</SCRIPT>

<body onload=g('in1').disabled=g('in2').disabled=!1;>
<B>Картинки не более заданной ширины.</B><br><br>
<STYLE>img{visibility:hidden;}
    #gal{text-align:center;}
</STYLE>

<input id=in2 type=button value=Править_галерею_на_400х280 onclick=loadGallery('gal','gal1',400,280) disabled><br>
<input id=in1 type=button value=Править_галерею_на_100х... onclick=loadGallery('gal','gal1',100) disabled><br><br>
<div id=gal>
<img name=gal1 src=Imaf4-YM20041031.jpg><br><br>
<img name=gal1 src=fo167-YM20030829-1.jpg><br><br>
<img name=gal1 src=snow21.gif><br><br>

</div>
(размеры без Reload не восстанавливаются)

Демо здесь: http://js2.ru/example/JsPrimeryCode-61.htm

Наконец, "заказывали" чтобы малые картинки занимали столько же места, как большие. Это сделать, очевидно, легко без скриптов, помещая каждую картинку в таблицу заданных минимальных размеров.

Также замечу, что масштабирование затрагивает только те картинки, которые имеют имя name=... , которое может быть разным для разных групп. Поэтому масштабировать группы можно с разными параметрами.

Это сообщение отредактировал(а) 12345c - 3.3.2008, 17:59

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Bog d`An

Дата 20.2.2006, 03:53 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 217
Регистрация: 26.3.2005
Где: Украина:Днепропет ровск

Репутация: нет
Всего: 3

12345c, пасиба большое! Ну и +, чтобы было что в карман ложить smile

.
пойду прикручивать...

зы: моно я пока тему не буду закрывать?.. а то на жаваскрипте писал токмо 1 раз smile

--------------------

Удача откроет двери даже там, где их нет.Генри Морган--------------------[Furry team][Agent`s team][СРУКер]

Bog d`An

Дата 20.2.2006, 06:21 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 217
Регистрация: 26.3.2005
Где: Украина:Днепропет ровск

Репутация: нет
Всего: 3

А моно для каждой картинки отдельно автоматом как только загрузится - изменить размер?
И ещё: можно ли ДО загрузки картинки задавать размер?

--------------------

Удача откроет двери даже там, где их нет.Генри Морган--------------------[Furry team][Agent`s team][СРУКер]

12345c

Дата 20.2.2006, 14:19 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

О, да, плюс карман не тянет.

Можно. Вот скрипт с автоформатированием галереи по заданной ширине.

Код

<title>Картинки не более заданной ширины (автовыравнивание).</title>
<script>d=document;g=function(a){return d.getElementById(a);}
widthGal=400,heightGal=320;
corrDims=function(t){//коррекция размеров картинки
    if(!heightGal)heightGal=1999;
    g('gal').style.width=widthGal;
    var k=1;
    if(t.offsetWidth>widthGal)k=t.offsetWidth/widthGal;
    if(t.offsetHeight>heightGal)k=Math.max(k,t.offsetHeight/heightGal)
    t.style.width=t.offsetWidth/k;
}</SCRIPT>
<body>
<B>Картинки не более заданной ширины (автоматическое выравнивание на 
<script>widthGal=prompt('На какую выровнять ширину?',widthGal);
    document.write(' '+widthGal+'px).</B><br><br>');</SCRIPT>
<STYLE>#gal{text-align:center;}</STYLE>
<div id=gal>
<img name=gal1 src=Imaf4-YM20041031.jpg onload=corrDims(this)><br><br>
<img name=gal1 src=fo167-YM20030829-1.jpg onload=corrDims(this)><br><br>
<img name=gal1 src=snow21.gif onload=corrDims(this)><br><br>
</div>(размеры без Reload не восстанавливаются)

Цитата(Bog d`An @ 20.2.2006, 06:21

)

можно ли ДО загрузки картинки задавать размер

Размер каждой картинки? Можно, если вручную или в ПХП вычисляешь на сервере. Но тогда на сервере же стоит сразу задать размеры для тех, которые большие, в теге img, в атрибуте width.

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Bog d`An

Дата 20.2.2006, 17:35 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 217
Регистрация: 26.3.2005
Где: Украина:Днепропет ровск

Репутация: нет
Всего: 3

Цитата(12345c @ 20.2.2006, 14:19

)

Но тогда на сервере же стоит сразу задать размеры для тех, которые большие, в теге img, в атрибуте width.

Из за того что б этого не делать всё и началось...

--------------------

Удача откроет двери даже там, где их нет.Генри Морган--------------------[Furry team][Agent`s team][СРУКер]

12345c

Дата 20.2.2006, 19:21 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Но в массив хотя бы ты можешь загнать или размеры, илирезультат выражения t.offsetWidth>widthGal, где t.offsetWidth - ширина каждой картинки? Тогда по мере появления загрузки у <img id=gal003 name=gal1 src=snow21.gif onload=corrDims(this)> берём его прописанный ид, извлекаем номер, вставляем в массив, применяем условие.

Или проще - задаёшь не массив, а хеш (пары)

Код

galHash={gal001:220,gal002:401,gal003:52};

и выбор по galHash['gal003'] . Знаком с таким? Удобно прочитать в "Куроводстве" .

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »