Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Открытие картинки в ajax окне, Срабатывает не так как надо 
V
    Опции темы
filipp76
  Дата 6.8.2011, 00:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



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

Код

<script> 
function op(image) { 
new _uWnd('myName','Изображение',500,200,{autosize:1,min:0,header:1,max:1,resize:0},'<img src='+image+' />'); 
} 
</script> 

<a href="java script://" onclick="op('$IMG_URL1$');"><img src="$IMG_SMALL_URL1$" alt="Нажмите, для просмотра в полном размере..." border=0></a>
 

В чем проблема ? Также если есть другие варианты буду очень ард примеру, главная задача чтоб полная картинка открывалась не в новом окне, а в текущем поверх основной страницы.

Это сообщение отредактировал(а) filipp76 - 6.8.2011, 00:41
PM MAIL WWW ICQ   Вверх
Amphiluke
Дата 6.8.2011, 14:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Цитата(filipp76 @  6.8.2011,  04:33 Найти цитируемый пост)
В чем проблема ?

Вероятно, в том, что вы пытаетесь зафиксировать размеры окна до того, как загрузится полностью большая картинка (пока изображение не загрузилось, его истинные размеры неизвестны). А в случае повторного открытия (т.е. если картинка загружалась ранее), время на загрузку изображения не требуется благодаря кэшу браузера, поэтому окно ресайзится нормально.

Есть несколько вариантов решений:
  1.  Делать прелоад больших картинок на Javascript.
  2.  Усовершенствовать клиентский и серверный сценарии, чтобы серверный дополнительно просчитывал размеры картинки и передавал их в ф-цию op() вместе с путем $IMG_URL1$, а ф-ция op() соответственно принимала эти размеры в качестве аргументов
  3.  Устанавливать размеры окна после полной загрузки картинки. Понадобится обработчик события onload картинки. IE поддерживает и событие onreadystatechange для объектов HTMLImageElement.

PM   Вверх
filipp76
Дата 6.8.2011, 16:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата(Amphiluke @ 6.8.2011,  14:50)
Цитата(filipp76 @  6.8.2011,  04:33 Найти цитируемый пост)
В чем проблема ?

Есть несколько вариантов решений:

  1.  Делать прелоад больших картинок на Javascript.
  2.  Усовершенствовать клиентский и серверный сценарии, чтобы серверный дополнительно просчитывал размеры картинки и передавал их в ф-цию op() вместе с путем $IMG_URL1$, а ф-ция op() соответственно принимала эти размеры в качестве аргументов
  3.  Устанавливать размеры окна после полной загрузки картинки. Понадобится обработчик события onload картинки. IE поддерживает и событие onreadystatechange для объектов HTMLImageElement.

А можно с примером, я первый раз вообще смотрю на javascript, а этот пример взял с другого форума.
PM MAIL WWW ICQ   Вверх
Amphiluke
Дата 6.8.2011, 18:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Ну, вот вам несколько символических примеров для иллюстрации:

Цитата(Amphiluke @  6.8.2011,  18:50 Найти цитируемый пост)
Делать прелоад больших картинок на Javascript.

Код

<script type="text/javascript">
(new Image()).src = "$IMG_URL1$";
</script>
...
<a href="#" onclick="op('$IMG_URL1$');">
    <img src="$IMG_SMALL_URL1$" alt="Нажмите, для просмотра в полном размере..." border=0>
</a>



Цитата(Amphiluke @  6.8.2011,  18:50 Найти цитируемый пост)
Усовершенствовать клиентский и серверный сценарии, чтобы серверный дополнительно просчитывал размеры картинки и передавал их в ф-цию op() вместе с путем $IMG_URL1$, а ф-ция op() соответственно принимала эти размеры в качестве аргументов

Код

<script type="text/javascript"> 
function op(image, w, h) { 
// далее зависит от реализации конструктора _uWnd. Суть — надо передать
// ему истинные размеры картинки и отключить авто-ресайз. Наверное, как-то так:
new _uWnd('myName','Изображение',w,h,{autosize:0,min:0,header:1,max:1,resize:0},'<img src='+image+' />'); 
} 
</script> 

<a href="#" onclick="op('$IMG_URL1$', $IMG_WIDTH1$, $IMG_HEIGHT1$);">
    <img src="$IMG_SMALL_URL1$" alt="Нажмите, для просмотра в полном размере..." border=0>
</a>

Определить размеры картинки ($IMG_WIDTH1$, $IMG_HEIGHT1$) на стороне сервера не представляет труда, например, на PHP можно использовать ф-ции imageSX, imageSY. На ASP — не знаю, но тоже несложно, думаю.


Цитата(Amphiluke @  6.8.2011,  18:50 Найти цитируемый пост)
Устанавливать размеры окна после полной загрузки картинки. Понадобится обработчик события onload картинки. IE поддерживает и событие onreadystatechange для объектов HTMLImageElement.

Тоже зависит от реализации конструктора _uWnd. Принцип таков, что получив путь до изображения, он должен определить обработчик события onload картинки, для которой устанавливается атрибут src="$IMG_URL1$". Например,
Код

function _uWnd(..., imagePath, ...) {
    ...
    image.src = imagePath;
    image.onload = function() {
        image_window.style.width = image.offsetWidth + "px";
        image_window.style.height = image.offsetHeight + "px";
    }
    ...
}

Опять же, это только пример для иллюстрации. Конечный код будет зависеть от текущей реализации вашего приложения.

Это сообщение отредактировал(а) Amphiluke - 6.8.2011, 18:23
PM   Вверх
filipp76
Дата 6.8.2011, 18:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



В итоге сделал вот так:

Код

function op(image) { 
setTimeout(1500);    
new _uWnd('myName','Изображение',200,200,{autosize:1,min:0,header:1,max:1,resize:0},'<img src='+image+' />')
} 
</script>
<?if($IMG_URL1$)?>
<a href="javascript://" onclick="op('$IMG_URL1$');"><img src="$IMG_SMALL_URL1$" alt="Нажмите, для просмотра в полном размере..." border=0></a> 
<?endif?>


Тупо но почему-то работает, пробовал ваш первый вариант тоже все работает но медленно грузит сайт + трафик, остальные я просто не понимаю.
PM MAIL WWW ICQ   Вверх
Amphiluke
Дата 6.8.2011, 19:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Цитата(filipp76 @  6.8.2011,  22:56 Найти цитируемый пост)
setTimeout(1500);    

 smile 
Даже спрашивать не буду, откуда вы это взяли.
PM   Вверх
filipp76
Дата 6.8.2011, 19:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата(Amphiluke @ 6.8.2011,  19:05)
Цитата(filipp76 @  6.8.2011,  22:56 Найти цитируемый пост)
setTimeout(1500);    

 smile 
Даже спрашивать не буду, откуда вы это взяли.

Просто логически подумал, чтоб браузер схавал размер картинки ему надо хоть чуть-чуть ее закачат, вот на это ему наверно и хватит 1500мс, разберусь с javascript и переделаю по человечески )

Это сообщение отредактировал(а) filipp76 - 6.8.2011, 19:13
PM MAIL WWW ICQ   Вверх
Amphiluke
Дата 6.8.2011, 19:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Переделайте обязательно. Потому что запись
Цитата(filipp76 @  6.8.2011,  22:56 Найти цитируемый пост)
setTimeout(1500);

просто некорректна. Метод setTimeout ожидает два аргумента, первый из которых должен быть корректным исполняемым кодом или ссылкой на функцию, но никак не числом.
PM   Вверх
filipp76
Дата 6.8.2011, 19:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата(Amphiluke @ 6.8.2011,  19:17)
Переделайте обязательно. Потому что запись
Цитата(filipp76 @  6.8.2011,  22:56 Найти цитируемый пост)
setTimeout(1500);

просто некорректна. Метод setTimeout ожидает два аргумента, первый из которых должен быть корректным исполняемым кодом или ссылкой на функцию, но никак не числом.

Епт, перестало работать ! )) Надо что-то делать. У меня на сервере нет доступа к php как получить размеры изображения без него ?

Это сообщение отредактировал(а) filipp76 - 6.8.2011, 19:36
PM MAIL WWW ICQ   Вверх
Amphiluke
Дата 6.8.2011, 19:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Что вам непонятно в способе с обработчиком события onload? Вы пробовали вообще?  smile 
Попробуйте что-нибудь типа этого:
Код

function op(image) {
    function foo() {
        new _uWnd('myName','Изображение',500,200,{
            autosize:1,min:0,header:1,max:1,resize:0},'<img src='+image+' />'); 
    }
    var img = new Image();
    img.src = image;
    if (!img.complete) {
        img.onload = foo;
    } else {
        foo();
    }
} 

PM   Вверх
filipp76
Дата 6.8.2011, 20:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата(Amphiluke @ 6.8.2011,  19:52)
Что вам непонятно в способе с обработчиком события onload? Вы пробовали вообще?  smile 
Попробуйте что-нибудь типа этого:
Код

function op(image) {
    function foo() {
        new _uWnd('myName','Изображение',500,200,{
            autosize:1,min:0,header:1,max:1,resize:0},'<img src='+image+' />'); 
    }
    var img = new Image();
    img.src = image;
    if (!img.complete) {
        img.onload = foo;
    } else {
        foo();
    }
} 

Работает, спасибо !!!
PM MAIL WWW ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0520 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.