CODEWITHSUNDEEP
javascriptjqueryhtmlcolorbox
mani
mani

Reputation: 1044

Colorbox Plugin is working for only first link which i am clicked first.?

Presently i am working on Colorbox plugin in website..

I have set of links in a page..(say links will be 50)..

This links holds the some data.. i.e, each link holds the one page. I want to display this page in colorbox when I am clicked the my link.

For this I am used the colorbox.. it works only for first link which I am clicked first. if I clicked the another link in the same page the color box won't work.

It's show an error like..

Uncaught TypeError: Object [object Object] has no method 'colorbox'

I have link like this.

<a href="link1" id="dynamicid" class="colorbox"></a>
<a href="link2"  id="dynamicid" class="colorbox"></a>
<a href="link3" id="dynamicid" class="colorbox"></a>
<a href="link4" id="dynamicid" class="colorbox"></a>

I used below code for calling colorbox.

 $(document).ready(function () {

     jQuery(".colorbox").on("click",function(event) {
                  console.log('i am here...');
                    event.preventDefault();
                    var elementURL = jQuery(this).attr("href");                     var elementID = jQuery(this).attr("id");
                    jQuery("#"+elementID).colorbox({href: elementURL, innerWidth: 1000, innerHeight: 700});
                  }); 

 });

I tried live also instead of on but I didn't get any result.

Upvotes: 0

Views: 159

Answers (1)

Chickenrice
Chickenrice

Reputation: 5727

In my opinion, you don't need to initial colorbox every time when user clicked the link.

You should initial them at once and then these links will work as you expect.

HTML

<a class="color-anchor" href="http://www.bbc.co.uk/">BBC</a>
<a class="color-anchor" href="http://edition.cnn.com/">CNN</a>

JS

$(function(){
    $("a.color-anchor").colorbox({href:$(this).attr("href") ,innerWidth: 700, innerHeight: 500, iframe:true});
});

Hope this is helpful for you.

Upvotes: 2

Related Questions