Javascript-форум - Как извлечь адрес картинки, указанный внутри функции onclick?

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Как извлечь адрес картинки, указанный внутри функции onclick? (https://javascript.ru/forum/events/35199-kak-izvlech-adres-kartinki-ukazannyjj-vnutri-funkcii-onclick.html)

sidarvik

03.02.2013 14:19

Как извлечь адрес картинки, указанный внутри функции onclick?

Добрый день!
Есть маленькая картинка, при клике по которой появляется большая:

<img class="highslide" onclick="try {hs.expand(this,{src:'/images/big_pic.jpg'});}catch(e){}" src="/images/small_pic.jpg" width="200" height="150" alt="picture" border="0" />

Я хочу переделать html под галерею fancybox следующим образом:

<a rel="group1" href="/images/big_pic.jpg" class="fancybox">
  <img src="/images/small_pic.jpg" alt="picture" border="0" height="150" width="200" />
</a>

Поскольку страниц, где нужно внести изменения, очень много, хочу сделать это с помощью скрипта. Я полагаю, что для этого мне нужно получить адрес большой картинки (строку '/images/big_pic.jpg'), чтобы затем подставить его в атрибут href другой ссылки, которая позже обернет картинку.
Подскажите, пожалуйста, как извлечь адрес большой картинки методами js/jquery? Как на него указать?

danik.js

03.02.2013 14:41

А в каком окружени вы собрались вносить изменения? NodeJS? В браузер то файлы особо не подгрузишь и тем более не сохранишь.

sidarvik

03.02.2013 15:16

Простите, не совсем поняла вопрос... Фотографии уже хранятся на сервере (путь к ним указан). Если я вручную изменяю html-код, как мне нужно, то все работает, фото грузятся (и большие, и маленькие).

Я пока только еще изучаю js и jquery, поэтому не уверена, правильная ли логика, но мне кажется, скрипт должен быть примерно таким:

var bigImgLink = $('???????'); /* вот тут у меня и возникли затруднения...*/
$('img.highslide').each(function(){
    $(this).removeAttr("onclick").removeClass().wrap("<a rel='group1' class='fancybox'></a>").attr("href", bigImgLink)
});

sidarvik

03.02.2013 15:25

Т.е. в идеале значение переменной bigImgLink должно быть равно строке /images/big_pic.jpg, и это значение потом подставляется в href=""

danik.js

03.02.2013 15:31

Проще сделать закос под highslide ))

hs = {
    expand: function(element, options) {
        $.fancybox.open({href: options.src});
    }
};

только не помню - .open() или .show(). Но в целом идею думаю поняли. Если не заработает - F12 || Ctrl+Shift+I в помощь. Правда хреново что вызов заключен в try-catch - все ошибки заглушит.

danik.js

03.02.2013 15:33

Цитата:

Сообщение от sidarvik

Простите, не совсем поняла вопрос...

Цитата:

Сообщение от sidarvik

Поскольку страниц, где нужно внести изменения, очень много, хочу сделать это с помощью скрипта.

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

Теперь ясно что вы просто хотите поставить костыль чтоб все работало со старым кодом :)

рони	03.02.2013 15:53

sidarvik,
напишите ещё парочку примеров с

<img class="highslide" onclick="try {hs.expand(this,{src:'/images/big_pic.jpg'});}catch(e){}" src="/images/small_pic.jpg" width="200" height="150" alt="picture" border="0" />

меня интересует всегдали images/big_pic.jpg или есть другие указатели

danik.js

03.02.2013 16:05

рони, какой смысл шуршать DOM'ом когда можно просто подстроиться под старый код?

рони	03.02.2013 16:28

Цитата:

Сообщение от danik.js

рони, какой смысл шуршать DOM'ом когда можно просто подстроиться под старый код?

я не в теме того что вы предложили.

sidarvik

03.02.2013 16:29

Вообще images/big_pic.jpg - это условный пример был)
Вот реальный html со страницы:

<p class="fotoline"><img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/hurgada-.jpg'});}catch(e){}" src="/d/163953/d/180489406_5.jpg" width="180" height="120" alt="Хургада " border="0" /><img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/3170138978_07448bfbdf_o.jpg'});}catch(e){}" src="/d/163953/d/180488006_5.jpg" width="180" height="135" alt="3170138978_07448bfbdf_o" border="0" /><img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/egipet_1600.jpg'});}catch(e){}" src="/d/163953/d/109448406_5.jpg" width="180" height="135" alt="egipet_1600" border="0" /><img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/180489006_7.jpg'});}catch(e){}" src="/d/163953/d/180489006_5.jpg" width="180" height="135" alt="4064" border="0" /><img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/81.jpg'});}catch(e){}" src="/d/163953/d/109447006_5.jpg" width="180" height="135" alt="81" border="0" /></p>

рони	03.02.2013 16:30

sidarvik,
Вариант замены

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('img.highslide').each(function(){
 var bigImgLink =  $(this).attr("onclick").replace(/[\s\S]+src:.(.*?jpg)[\s\S]+/,'$1')
 var a = $("<a/>").attr({'rel':'group1' , 'class' : 'fancybox' , 'href' : bigImgLink})
 $(this).removeAttr("onclick").removeClass().wrap(a)
});
alert($('body').html());
});
</script>
</head>
<body>
<p class="fotoline"><img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/hurgada-.jpg'});}catch(e){}" src="/d/163953/d/180489406_5.jpg" width="180" height="120" alt="Хургада " border="0" /><img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/3170138978_07448bfbdf_o.jpg'});}catch(e){}" src="/d/163953/d/180488006_5.jpg" width="180" height="135" alt="3170138978_07448bfbdf_o" border="0" /><img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/egipet_1600.jpg'});}catch(e){}" src="/d/163953/d/109448406_5.jpg" width="180" height="135" alt="egipet_1600" border="0" /><img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/180489006_7.jpg'});}catch(e){}" src="/d/163953/d/180489006_5.jpg" width="180" height="135" alt="4064" border="0" /><img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/81.jpg'});}catch(e){}" src="/d/163953/d/109447006_5.jpg" width="180" height="135" alt="81" border="0" /></p>
</html>

Deff	03.02.2013 16:32

<script src="http://code.jquery.com/jquery-latest.js"></script>


<a  rel="group1" href="/images/big_pic.jpg" class="fancybox">
  <img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="picture" border="0" height="150" width="200" />
</a>


<script type="text/javascript">
$('a.fancybox').on('click',function(){
  alert($(this).attr("href"));
  return false;
});
</script>

sidarvik

03.02.2013 16:33

Цитата:

Сообщение от danik.js (Сообщение 231250)

Да, именно так :)

sidarvik

03.02.2013 16:46

Цитата:

Сообщение от рони

$('img.highslide').each(function(){
 var bigImgLink =  $(this).attr("onclick").replace(/[\s\S]+src:.(.*?jpg)[\s\S]+/,'$1')
 var a = $("<a/>").attr({'rel':'group1' , 'class' : 'fancybox' , 'href' : bigImgLink})
 $(this).removeAttr("onclick").removeClass().wrap(a)
});

Фантастика! Теперь все работает! Спасибо большое, рони!
Я сама тоже как раз подумала про регулярные выражения...

sidarvik

03.02.2013 16:51

Deff,
простите, а это

Цитата:

Сообщение от Deff (Сообщение 231274)

<script src="http://code.jquery.com/jquery-latest.js"></script>


<a  rel="group1" href="/images/big_pic.jpg" class="fancybox">
  <img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="picture" border="0" height="150" width="200" />
</a>
<script type="text/javascript">

$("a.fancybox img").load(function(){
    $(this).parent().get(0).setAttribute("onclick","return false")
});
$('a.fancybox img').on('click',function(){alert("A")

});

</script>

для чего?

Deff	03.02.2013 16:55

Цитата:

Сообщение от sidarvik

для чего?

Эт я тестировал (live или on в данной библе

Тут "on" c 1.9 идет
========================== Сейчас код рабочий

danik.js

03.02.2013 22:55

рони, я предложил сделать прокси для fancybox через фэйковый hs. ИМХО самое напрашивающееся и быстрое решение.
Deff, задача то совершенно другая. Нужно чтоб старый код для hs работал с fancybox.

Цитата:

Сообщение от sidarvik

Я сама тоже как раз подумала про регулярные выражения...

Я тоже о них подумал сначала. А потом посмотрел на код и подумал: это же тупо - парсить javascript-код, когда его можно просто запускать, воссоздав недостающие объекты и функции )))

Всегда избегаю регулярки, если подругому никак или медленно.

Deff	04.02.2013 00:00

Цитата:

Сообщение от danik.js

Deff, задача то совершенно другая. Нужно чтоб старый код для hs работал с fancybox.

<!DOCTYPE html>
<html>
<head>
  <title></title>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<script>
$(document).ready(function(){
  $("p.fotoline").find("img").each(function(){
    var href=$(this).attr('onclick').toString().replace(/^[\s\S]*?src:'([\s\S]*?)'[\s\S]*$/img,'$1');
    $(this).removeAttr("class").wrap('<a  rel="group1" class="gallery" href="'+href+'"></a>')
    $(this).parent().html($(this).parent().html().replace(/onclick=".*?"/i,''));
  });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
    $("a.gallery").fancybox();
});
</script>
</head>
<body>
              <p class="fotoline">
                <img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/hurgada-.jpg'});}catch(e){}" src="/d/163953/d/180489406_5.jpg" width="180" height="120" alt="Хургада " border="0">
                <img class="highslide" onclick="try{hs.expand(this,{src:'http://www.holydieexplorer.com/wp-content/uploads/2011/07/pyramids-cairo-egypt-1600-1024x768.jpg'});}catch(e){}" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm0lSr3gjMZ12XQh6m8_6S2kfOEU2ryue9XLfByz3XIFuj-mMmcqjcXcyv" width="180" height="135" alt="3170138978_07448bfbdf_o" border="0">
                <img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/egipet_1600.jpg'});}catch(e){}" src="/d/163953/d/109448406_5.jpg" width="180" height="135" alt="egipet_1600" border="0">
                <img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/180489006_7.jpg'});}catch(e){}" src="/d/163953/d/180489006_5.jpg" width="180" height="135" alt="4064" border="0">
                <img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/81.jpg'});}catch(e){}" src="/d/163953/d/109447006_5.jpg" width="180" height="135" alt="81" border="0">
              </p>

</body>
</html>

danik.js

04.02.2013 00:34

http://jsfiddle.net/danya_postfactum/YDPQy/
К сожалению в моем варианте не будет работать группировка.

рони	04.02.2013 01:05

Все трое мастерили одно и тоже )))

<!DOCTYPE html>
<html>
<head>
  <title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<script language="JavaScript" type="text/javascript">
var hs = {
    expand: function(element, options) {
        $.fancybox( {href : options.src,
        title : 'НАДОЖЕ РАБОТАЕТ',
        openEffect	: 'elastic',
    	closeEffect	: 'elastic'} );

    }
};
</script>
<img class="highslide" onclick="try {hs.expand(this,{src:'http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_b.jpg'});}catch(e){}" src="http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_m.jpg" width="200" height="150" alt="picture" border="0" />
</body>
</html>

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