Открытие нового окна под размер изображения
Есть код для просмотра изображения в новом окне
<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; } Как сделать чтобы окно открывалось не на весь экран, а размером с открываемое изображение и на черном фоне? |
|
Не трудно, и похожее проделывал, но найти не удалось.
Я имел ввиду, чтобы окно было не всегда одного и того же размера, а под размер открываемого изображения. Ну или на крайний случай, чтобы открываемый popup был html страницей в котором содержалось изображение по центру а сама страница была залита черным цветом. |
Цитата:
как изменить размер уже открытого окна? |
|
Нашел! Но мне нужна помощь, чтобы объедините его с предыдущим, чтобы он срабатывал, только когда <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 --> |
foto1.onload = function() { viewFoto(...); } foto1.src=(img); if( this.className == 'popup' ) ... http://javascript.ru/unsorted/why_href_js_is_bad |
Блина запутался, сначала, с 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'), первый вариант с присваивание просто класса намного проще, но он открывает окно на весь экран, что смотрится очень убого, как эти два скрипта правильно объединить или что дописать в первый вариант? |
Цитата:
Цитата:
потом, как перенести javascript из href в onclick видно из статьи как лучше определить размер незагруженного еще изображения я тебе написал чтобы решить свою проблему, ты должен разобраться, как работают эти два варианта. А потому задавай конкретные вопросы ;) |
Спасибо всем кто пытался помочь, в другом месте в момент подсказали :)
хотя я думал будет наоборот, все таки форум спец по JavaScript. " складываешь их вместе window.open(t.href,'',''); меняешь на CaricaFoto(t.href); " |
тут, похоже, просто никто не захотел дать тебе готовое решение
p.s. в любом случае у тебя "..." определение, когда фотография уже загрузилась, и может приводить к некорректным размерам окна кроме того, оно неоправданно загружает браузер, хотя не знаю насколько актуально последнее для твоего проекта |
Часовой пояс GMT +3, время: 12:42. |