Jquery colorbox problem

Here is some code:

    <script type="text/JavaScript" src="@Url.Content("~/Scripts/cloud-zoom.1.0.2.js")"></script> 
    <script type="text/JavaScript" src="@Url.Content("~/Scripts/jquery.colorbox.js")"></script>
    <script type="text/JavaScript" src="@Url.Content("~/Scripts/jquery.colorbox-min.js")"></script>
    <link href="@Url.Content("~/Content/colorbox.css")" rel="stylesheet" type="text/css" />

       <div id="large-image">
        <a  href='http://some-image'  class = 'color cloud-zoom'  id='zoom1' rel="adjustX: 10, adjustY:10">
            <img  src="http://some-image" />
        </a>
        <a  href='http://some-image2'  class = 'color cloud-zoom'  id='zoom1' rel="adjustX: 10, adjustY:10">
            <img  src="http://some-image2" />
        </a>
      </div>

As you may already have noticed i use in the same anchor both cloud- zoom and colorbox. Cloud-zoom works just fine but colorbox does not because of the cloud-zoom plugin.

For instance if i remove cloud-zoom from the class of <a> this code works fine

$('a.color').colorbox({ width: "75%", height: "85%"});

So due to the cloud-zoom plugin the above line does not work. I also tried:

 $('#large-image').click(function () {
    jQuery("a.color").colorbox({ width: "75%", height: 开发者_如何学编程"85%" });
     });

but neither this does not work..

Any ideas??

$mouseTrap.bind('click',this,function(event){
     $("#zoom").trigger("click");
});

add in zoom.js

$('#zoom').colorbox();