Javascript: как выбрать изображения по определенному признаку и вытянуть путь
Имеются картинки в HTML с параметром rel="lytebox"
Нужно сделать так, чтобы если такой параметр на странице имеется - вызвать функцию ShowPR и подать в нее адрес изображения.
Если можно, по-подробнее, в Javascript я ноль!
есть картинки на странице, некоторые из них имеют rel="lytebox", например:
необходимо найти эти картинки и сделать так чтобы при клике на них вызывалась функция ShowPR(images/1.gif) и ей передавался путь к изображению в качестве фактического параметра.
Вот это круто!
И что в теге IMG делает атрибут rel?
Ну да ладно...
Вот решение:
{
var imgs = document.getElementsByTagName('IMG');
var l = imgs.length;
for(var i = 0; i<l; i++)
{
if("lytebox" == imgs.getAttribute('rel'))
{
imgs.onclick = function() {EventHandler(this.src);}
}
}
}
function EventHandler(txt)
{
alert(txt + ' get your fucking camera out of my face you dumbfuck!');
}
[HTML]<body>
<img src="images/1.gif" alt="image1"/>
<img src="images/2.gif" alt="image2"/>
<img src="images/3.gif" alt="image3" rel="lytebox"/>
<img src="images/4.gif" alt="image4" />
<img src="images/5.gif" alt="image5" rel="lytebox"/>
<img src="images/6.gif" alt="image6" rel="lytebox"/>
<img src="images/7.gif" alt="image7"/>
<script type="text/javascript">
SetAllImgEvents();
</script>
</body>[/HTML]
Поняли то возможно многие, но в контексте "в Javascript я ноль" который чаще всего стоит понимать как "сделайте за меня" желание помочь сильно уменьшается...
У меня еще один маленький вопросик. MrLinker оказался прав и параметр rel я действительно использовал не в изображении а в ссылке, в связи с этим изменил код.
{
var imgs = document.getElementsByTagName('A');
var l = imgs.length;
for(var i = 0; i<l; i++)
{
if("lytebox" == imgs.getAttribute('rel'))
{
imgs.onclick = function() {showPr(this.href);}
}
}
}
и появилась проблемка. Дело в том что при нажатии на ссылку открывается не только дополнительное окно с изображением, вызванное функцией showPr но и основное окно переходит по ссылке.
Как отменить переход по ссылке основного окна.
Пробовал изменять параметр href, но ничего хорошего из этого не вышло, потому что onclick берет ссылку тоже из href.(ИМХО)
Если кому интересно, я заменил строку
на строку
и добился желаемого результата. Все же приятно когда сам. Эх))
На всякий случай привожу полный код скрипта
var imageWindow;
function SetAllImgEvents()
{
var imgs = document.getElementsByTagName('A');
var l = imgs.length;
for(var i = 0; i<l; i++)
{
if("lytebox" == imgs.getAttribute('rel'))
{
imgs.href = "java script:showPr('"+imgs.href+"')";
}
}
}
function setWH()
{
var paramWnd="copyhistory=no,directories=yes,width=640,height=340,menubar=no,resizable=yes,status=yes,tollbar=no,scrollbars=yes" ;
return(paramWnd);
}
function showPr(ndx) {
if (imageWindow!=null) {
if (imageWindow.closed==false) imageWindow.close();
}
var tmp;
tmp=setWH();
var imagepath=ndx;
imageWindow=window.open(imagepath,ndx,tmp);
}
</script>
Это плохо.
Хотя бы потому, что пользователи с отключенным javascript обламываются.
Лучше оставить вариант с onclick и добавить "return false;".
Т.е. меняем код:
{
alert('test');
var imgs = document.getElementsByTagName('A');
var l = imgs.length;
for(var i = 0; i<l; i++)
{
if("lytebox" == imgs.getAttribute('rel'))
{
imgs.href = "java script:showPr('"+imgs.href+"')";
}
}
}
если видим после обновления страницы окно с надписью test, значит функция вызывается. Переставляем алерт ниже:
{
var imgs = document.getElementsByTagName('A');
alert('test');
var l = imgs.length;
for(var i = 0; i<l; i++)
{
if("lytebox" == imgs.getAttribute('rel'))
{
imgs.href = "java script:showPr('"+imgs.href+"')";
}
}
}
сохраняем, обновляем. Если опять видим окно, значит var imgs = document.getElementsByTagName('A') отработал как нужно.
В общем так для всей цепочки строк делаем, если алерт где-то не вылезет, значит ошибка в строке над алертом.
Метод тупой брудфост отладки, но это же ослик, что делать...
Пробовал так: imgs.onClick = "showPr(this.href);return false";
Но вы мне в коде писали еще и function() - но зачем это я не понимаю.
Лучше оставить вариант с onclick и добавить "return false;".
Полностью поддерживаю.
Стартопику читать тут: Почему <a href="java script:..."> - плохо.
Если IE пишет, что где-то ошибка, значит где-то ошибка. Не обязательно в этих функциях, но обязательно в скриптах запущенных на странице. Так, что алерт срабатывает везде, а браузер пишет об ошибке не бывает.
До меня дошло что this.href это переменная)
Прочитал статью, вроде бы запись такая же, может вы знаете что не так?
Провери функции showPr и setWH - там он не работает.
Так как setWH вызывается только функцией showPr то думаю проблема в ней.
Но какая - понятия не имею. Я ее даже не писал. Сейчас попробую разобраться.
До меня дошло что this.href это переменная)
Прочитал статью, вроде бы запись такая же, может вы знаете что не так?
this это вообще-то ссылка на текущий объект в текущем контексте. А там бывает все ох как неоднозначно порой, ибо контексте не всегда очевиден, так что лучше избегай его использования.
href это свойство объекта, а onclick, по хорошему, это метод. А вещать на него нужно обработчик, а обработчики обычно не так вещаются, хотя и такая форма на сколько я помню прокатывает. Т.е. в данном случае мне видится, что проблема в this.
Испробовал новую функцию, в ней в firefox все отлично, а в Explorer картинки открываются в новой вкладке.
Вот код:
{
var imgs = document.getElementsByTagName('A');
var l = imgs.length;
for(var i = 0; i<l; i++)
{
if("lytebox" == imgs.getAttribute('rel'))
{
imgs.href="java script:popup_img('"+imgs.href+"')";
}
}
}
function popup_img(filename)
{
var newImage = new Image();
newImage.src = filename;
newWin = window.open(filename,'pin_convert',
"copyhistory=no,directories=yes,width=640,height=340,menubar=no,resizable=yes,status=yes,tollbar=no,scrollbars=yes");
}
Только, как правильно заметил alekciy, указываем как метод, а не строку.
Вообще, если бы не IE, то можно было бы задавать события строкой через SetAttribute.
так как alert до нее работает, а после уже нет. Это из функции showPr:
if (imageWindow!=null) {
if (imageWindow.closed==false) imageWindow.close();
}
paramWnd="copyhistory=no,directories=yes,width=640,height=340,menubar=no,resizable=yes,status=yes,tollbar=no,scrollbars=yes" ;
alert('test');
imageWindow=window.open(ndx,ndx,paramWnd);
}
Ибо вот тут: http://ww-realty.ru/catalogue/dom/rumjanzevo-id253-101.html при клике по "Посмотреть местоположение на карте" все работает даже в IE.
и в свойствах вместо toolbar пиши tollbar
попробуй так
if (imageWindow!=null) {
if (imageWindow.closed==false) imageWindow.close();
}
paramWnd="directories=yes,width=640 ,height=340,menubar=no,resizable=yes,status=yes,toolbar=no,scrollbars=yes" ;
alert('test1');
imageWindow=window.open(ndx,'newWin',paramWnd);
alert('test2');
}
Не понял я что-то вас, почему в ndx должно быть разное, если это одна переменная.
1. Ну в общем alertom я проверил, в ndx действительно содержится путь к картинке. Если бы он там не содержался то и Firefox ничего окрыть бы не смог.
2. paramWnd - вообще необязательный парамет, так что пробовал без него, пробовал удалить все кроме размеров экрана -для firefox вообще ничего не изменилось, а Explorer просто открывает новую вкладку.
3. По-поводу tool и toll - пробовал и так , и сяк и вообще без него, безрезультатно.
Может будут еще варианты, или может у кого нибудь есть успешный опыт использования функции window.open в IE?
он всегда открывает всплывающие окна в новой вкладке
проверил на своем старом коде, который хорошо работал, результат отрицательный
проверил ссылку которую давал alekciy
на их сайте, в IE, окна тоже открывает в новой вкладке
так что могу предложить решение
делай на слоях как это сейчас делают все
Просто подзабыл уже входные параметры для данного метода. А второй параметр там имя окна, в данном случае оно у тебя совпадает с урлом, что по мне, не совсем правильно.
Может будут еще варианты, или может у кого нибудь есть успешный опыт использования функции window.open в IE?
Ссылку я уже приводил на рабочий пример. Можно конечно возразить, что там идет ссылка на страницу, а не картинку, но вот такой код:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
</head>
<body>
<button onclick="window.open('irina.jpg')">Показать картинку</button>
</body>
</html>
приводит к открытию нового окна с картинкой в IE6. Так что там все работает, ищи косяк у себя. Может где пути битые, или запрещено окрытие окон в самом ослике.
Вообще то идет открытие нового окна. Там это было так задуманно и так и было реализованно. Если браузер новые окна открывает в пределах родительского окна (как это реализованно в опере), то это абсолютно правильно. Открывается новая вкладка. Если же браузер поддерживает модель подобную IE6, то открывается новое окно. И это правильно ибо это пример реализации двух разных моделей интерфейса.
я таки нашел в чем проблема
проблема в настройках браузера
лезем Сервис > Свойства обозревателя
в закладке Общее смотрим пункт Вкладки и нажимаем Параметры
в группе При обнаружении всплывающего окна есть 3 варианта действий
по умолчанию стоит Всегда открывать всплывающие окна в новой вкладке
у меня IE версии 8 и по дефолту у меня этот пункт стоит
я поменял его на Всегда открывать всплывающие окна в новом окне и все заработало
toalekciy ты говорил что у тебя IE версии 6
возможно у тебя по дефолту стоят другие параметры
или ты сам их менял и забыл об этом
поэтому у тебя и открываются окна в новом окне, а не во вкладке
я как всегда что-то пропустил. ИЕ6 обзавелся вкладками? о_О
ой и правда. а я и забыл
мне казалось вкладки появились какраз таки в ие6 а не в ие7
ну влюбом случае ие6 уже устарел и офециально не подерживается
И вообще спасибо всем за помощь. Даже обидно немного, 2 суток просидел, а дело оказалось в настройках Explorer)) Блин, теперь я понимаю почему люди не любят Microsoft)
toalekciy ты говорил что у тебя IE версии 6
возможно у тебя по дефолту стоят другие параметры
или ты сам их менял и забыл об этом
поэтому у тебя и открываются окна в новом окне, а не во вкладке
Я конечно знаю о таких настройках, о чем уже упоминал, но ни когда их не менял ибо IE юзаю только для тестов.
Гы, IE6 сроду был безвкладковым приложением.