How to specify a variable property for a javascript object when passing arguments to a jquery plugin

Question

I am implementing this jQuery image zoomer on my site. The essence of how it works is I have HTML markup like so: (Fiddle)

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

I then need to activate the plugin like so: (note the plugin is invoked on the image's parent container, in this case the <a> tag, not the image itself)

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

As you can see I have specified the url to the big image in the activation code. Is there a way to obtain the big image url from the href of the image's parent, or perhaps a data-bigimage attribute in the html?

E.g something like.

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

Which clearly doesn't work but hopefully indicates what is required.

Answer 1

The plugin looks for a data-src attribute first if no url parameter is provided, so you can do it as follows : http://jsfiddle.net/3ktNJ/33/

Place the URL to the large image in the data-src attribute :

<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>

Call the function with no URL parameter :

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