Блог

Я внедряю этот jQuery image zoomer на своем сайте. Суть того, как это работает, заключается в том, что у меня есть разметка HTML следующим образом: (Скрипка)

 <a class="zoom" href="bigimage.jpg">
    <img src="smallimage.jpg" />
</a>
  

Затем мне нужно активировать плагин следующим образом: (обратите внимание, что плагин вызывается в родительском контейнере изображения, в данном случае в <a> теге, а не в самом изображении)

 $(function() {
    $('a.zoom').zoom({url: 'bigimage.jpg'});
});
  

Как вы можете видеть, я указал URL-адрес большого изображения в коде активации. Есть ли способ получить URL-адрес большого изображения из href родительского изображения или, возможно data-bigimage , атрибута в html?

Например, что-то вроде.

 $('a.zoom').zoom({
    url: $(this).attr('href') // or $(this).data('bigimage')
});
  

Который явно не работает, но, надеюсь, указывает, что требуется.

Плагин сначала ищет атрибут data-src, если параметр url не указан, поэтому вы можете сделать это следующим образом: http://jsfiddle.net/3ktNJ/33 /

Поместите URL-адрес большого изображения в атрибут data-src :

 <a class="zoom">
    <img data-src="http://placekitten.com/400/600" src="http://placekitten.com/200/300" />
</a>
<br>
<a class="zoom">
    <img data-src="http://placekitten.com/500/700" src="http://placekitten.com/200/300" />
</a>
  

Вызов функции без параметра URL :

 $('a.zoom').zoom();
  

Если то, что у вас есть, не работает, вы можете попробовать:

 $(function(){
    $('a.zoom').each(function(){
        var thisURL = $(this).attr('href');
        $(this).zoom({url: thisURL});
    });
}
  

Ваша скрипка здесь обновлена: http://jsfiddle.net/3ktNJ/1 /

ОБНОВЛЕНИЕ По запросу OP в плагин было внесено небольшое изменение. Это не влияет на нормальное использование плагина:

Этот раздел был отредактирован:

 if (!settings.url) {
    $urlElement = $source.find('img');
    if ($urlElement[0]) {
        settings.url = $urlElement.data('src') || $urlElement.attr('src');
    }
    if (!settings.url) {
        return;
    }
} 
  

К этому: вы заметите, что я добавил здесь дополнительный оператор ‘if’, чтобы обойти диспетчер URL. Я все еще не уверен, почему значение !settings.url false, даже когда оно выводит реальную строку URL… Но, похоже, это работает.

 if (!settings.url) {
    if ($(target).attr('href')) {
        settings.url = $(target).attr('href');
    } else {
        $urlElement = $source.find('img');
        if ($urlElement[0]) {
            settings.url = $urlElement.data('src') || $urlElement.attr('src');
        }
        if (!settings.url) {
            return;
        }
    }
} 
  

ОБНОВЛЕННЫЙ FIDDLE ЗДЕСЬ В качестве дополнительного бонуса, специально для ваших нужд, вам не нужно указывать родительский источник href для небольшого изображения. Он автоматически захватит его и будет использовать, если вы не укажете URL. В нижней части скрипки вы заметите, что он не отправляет никаких URL-адресов, но он все еще работает, как планировалось. Затем, если вы удалите href in your <a> , он будет работать нормально, как и раньше (что в любом случае не идеально).

Надеюсь, это поможет!

Если я правильно понимаю вопрос…вы хотите получить href родительского div изображения…это должно сработать:

 $("img").parent(".zoom").attr("href"); 
  

Я добавил его в верхнюю строку вашей скрипки здесь: http://jsfiddle.net/mN7m3 /