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.

presidentnickson · Accepted Answer · 2014-06-27 10:37:01Z

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();

edited Jun 27, 2014 at 10:37

answered Jun 27, 2014 at 10:24

presidentnickson

1,0858 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

harryg Over a year ago

wow right you are. Strange that the author didn't seem to put that in the docs or readme

presidentnickson Over a year ago

that got me too, so i came up with a bit of a wild (not so great) solution first! then i had a look through the source code and noticed that he's checking for a data-src in there =)

ntgCleaner · Accepted Answer · 2014-06-27 17:26:58Z

1

If what you have there doesn't work, you may be able to try:

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

Your fiddle here updated: http://jsfiddle.net/3ktNJ/1/

UPDATE Per OP request, a small change has been made to the plugin. This does not effect the plugin's normal usage:

This section has been edited:

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

To this: You'll notice I added an extra 'if' statement in here to walk around the URL manager. I'm still not sure why the !settings.url says false, even when it's outputting a real URL string... But this seems to work.

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

UPDATED FIDDLE HERE As an added bonus, specifically for your needs, you do not have to supply the small image's parent href source. It will automatically grab it and use it if you do not supply a URL. You will notice at the bottom of the fiddle that it is not sending any URL, but it is still working as planned. Then if you remove the href in your <a>, it will work normally as before (which is not ideal anyways).

I hope this helps!

edited Jun 27, 2014 at 17:26

answered Jun 26, 2014 at 23:04

ntgCleaner

6,00510 gold badges54 silver badges87 bronze badges

12 Comments

harryg Over a year ago

Indeed that does work but involves invoking the plugin for each instance of the markup which might hurt performance. Is there a way that only involves invoking it once?

ntgCleaner Over a year ago

@harryg Will you only have one image? Don't you need this for all images that have the class named zoom?

harryg Over a year ago

I might have multiple zoom containers. The original method will target all of these containers as once whilst your method loops through them one-by-one. It's not a bad solution but it would be nice to optimise.

ntgCleaner Over a year ago

@harryg Very true, it will loop through one by one at dom load. I think this could only cause a problem when there are hundreds of images. I will keep looking into it

ntgCleaner Over a year ago

@ActionDan Sorry, you're wrong. He's getting the URL of the <a> tag, not the image inside of it.

|

Cody Reichert · Accepted Answer · 2014-06-26 23:05:59Z

-1

If I'm understanding the question correctly...you want to get the href of the parent div of the image...this should do the trick:

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

I added it to the top line of your fiddle here: http://jsfiddle.net/mN7m3/

answered Jun 26, 2014 at 23:05

Cody Reichert

1,62815 silver badges13 bronze badges

1 Comment

harryg Over a year ago

No sorry I don't think you understood correctly. My question is asking how to pass the value of the href to the plugin invoking function.

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

12 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related