Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Открытие нового окна под размер изображения (https://javascript.ru/forum/events/3494-otkrytie-novogo-okna-pod-razmer-izobrazheniya.html)

Не_Робот 27.04.2009 00:00

Открытие нового окна под размер изображения
 
Есть код для просмотра изображения в новом окне

<a href="img1.jpg" class="popup"><img src="prev/img1.jpg"></a>

document.onclick = function(e) {
  e = e || event;
  var t = e.target || e.srcElement;
  while (t && t.nodeType == 1 && t.tagName.toLowerCase() != 'a')
     t = t.parentNode;

  if (t && t.nodeType == 1 && /\bpopup\b/.test(t.className)) {
    window.open(t.href,'…','…');
    return false;
  }
  return true;
}


Как сделать чтобы окно открывалось не на весь экран, а размером с открываемое изображение и на черном фоне?

Gvozd 27.04.2009 01:24

неужели это так трудно?

Не_Робот 28.04.2009 11:47

Не трудно, и похожее проделывал, но найти не удалось.
Я имел ввиду, чтобы окно было не всегда одного и того же размера, а под размер открываемого изображения.

Ну или на крайний случай, чтобы открываемый popup был html страницей в котором содержалось изображение по центру а сама страница была залита черным цветом.

Riim 28.04.2009 11:51

Цитата:

Сообщение от Не_Робот
Я имел ввиду, чтобы окно было не всегда одного и того же размера, а под размер открываемого изображения.

перевод вероятно такой:
как изменить размер уже открытого окна?

x-yuri 28.04.2009 12:59

не думаю
http://www.quirksmode.org/js/popup.html

Не_Робот 28.04.2009 16:24

Нашел! Но мне нужна помощь, чтобы объедините его с предыдущим, чтобы он срабатывал, только когда <a> присваивается класс popup.


<A HREF="javascript:CaricaFoto('lg-1.gif')><IMG SRC="1.gif"></A>

<!-- Begin
function CaricaFoto(img){
  foto1= new Image();
  foto1.src=(img);
  Controlla(img);
}
function Controlla(img){
  if((foto1.width!=0)&&(foto1.height!=0)){
    viewFoto(img);
  }
  else{
    funzione="Controlla('"+img+"')";
    intervallo=setTimeout(funzione,20);
  }
}
function viewFoto(img){
  largh=foto1.width+20;
  altez=foto1.height+20;
  stringa="width="+largh+",height="+altez;
  finestra=window.open(img,"",stringa);
}
//  End -->

x-yuri 28.04.2009 18:02

foto1.onload = function() {
    viewFoto(...);
}
foto1.src=(img);

if( this.className == 'popup' ) ...

http://javascript.ru/unsorted/why_href_js_is_bad

Не_Робот 28.04.2009 22:47

Блина запутался, сначала, с html и css хорошо разбираюсь но javascript вообще никак.

1 вариант

Этот скрипт при щелчке на превью открывает изображение в popup окне, если в теге <a> параметру class присвоено значение popup

<a href="img1.jpg" class="popup"><img src="prev/img1.jpg"></a>


document.onclick = function(e) {
  e = e || event;
  var t = e.target || e.srcElement;
  while (t && t.nodeType == 1 && t.tagName.toLowerCase() != 'a')
     t = t.parentNode;
 
  if (t && t.nodeType == 1 && /\bpopup\b/.test(t.className)) {
    window.open(t.href,'…','…');
    return false;
  }
  return true;
}


[hr]

2 вариант

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

<A HREF="javascript:CaricaFoto('lg-1.gif')"><IMG SRC="1.gif"></A>


function CaricaFoto(img){
  foto1= new Image();
  foto1.src=(img);
  Controlla(img);
}
function Controlla(img){
  if((foto1.width!=0)&&(foto1.height!=0)){
    viewFoto(img);
  }
  else{
    funzione="Controlla('"+img+"')";
    intervallo=setTimeout(funzione,20);
  }
}
function viewFoto(img){
  largh=foto1.width+20;
  altez=foto1.height+20;
  stringa="width="+largh+",height="+altez;
  finestra=window.open(img,"",stringa);
}


я бы конечно использовал второй вариант, но там javascript прям в href, по моему не откроется если у кого не будет включен javascript и прописывать каждое изображение нужно ('lg-1.gif'), первый вариант с присваивание просто класса намного проще, но он открывает окно на весь экран, что смотрится очень убого, как эти два скрипта правильно объединить или что дописать в первый вариант?

x-yuri 29.04.2009 18:09

Цитата:

по моему не откроется если у кого не будет включен javascript
а что, первый вариант без использования javascript? Просто для пользователей, у которых отключен javascript, в href можно что-то полезное подставить
Цитата:

прописывать каждое изображение нужно ('lg-1.gif')
в любом случае, лучше чтобы было два варианта файла (с разными разрешениями). Другое дело, что увеличенный вариант может отличаться от уменьшенного какой-нибудь приставкой 'lg-' и тогда его имя не нужно прописывать - можно его образовать из уменьшенного.

потом, как перенести javascript из href в onclick видно из статьи
как лучше определить размер незагруженного еще изображения я тебе написал
чтобы решить свою проблему, ты должен разобраться, как работают эти два варианта. А потому задавай конкретные вопросы ;)

Не_Робот 30.04.2009 01:00

Спасибо всем кто пытался помочь, в другом месте в момент подсказали :)
хотя я думал будет наоборот, все таки форум спец по JavaScript.

" складываешь их вместе
window.open(t.href,'',''); меняешь на CaricaFoto(t.href); "

x-yuri 30.04.2009 01:16

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


Часовой пояс GMT +3, время: 12:42.