I'm using a light box to make a preview for some images so I used this light box in this demo :Here's a link
so when I try to add it to my site this error is shown :
Uncaught TypeError: Object #<Object> has no method 'colorbox' soap:281
(anonymous function) soap:281
(anonymous function)
(anonymous function)
D.extend.each
D.extend.ready
here is the jQuery code that i use :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="<?php echo base_url();?>js/jquery.colorbox.js"></script>
<script>
var jQuery_min1 = $.noConflict(true);
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".inline").colorbox({inline:true, width:"50%"});
});
</script>
and in my images gallery i put this :
<ul id="carousel" class="elastislide-list" style="direction: ltr;">
<?php
foreach ($content as $key => $value) {
echo '<li><a class="inline" href="#'.$value->p_id.'" ><img src="'. base_url().$value->p_image.'" alt="image01" /></a></li>';
}
?>
</ul>
foreach ($content as $key => $value) {
echo'<div id = "'.$value->p_id.'" style = "display:none;" class="hidden">
<div class="view-product-info">
<div class="view-product-image">
<span class="field-content">
<img src="'.base_url().$value->p_image.'" alt="" title="" width="266" height="216" />
</span>
</div>
<div class="info" style="display: inline-block;">
<div class="views-product-title" >
<br><br>
<span class="field-content"><a href="#1">'; if($language == 'ar') echo $value->p_name_ar; else echo $value->p_name; echo'</a></span>
<br>
</div>
</div>
</div>
</div>';
note : there are many another jQuery libraries I used ..
how can I solve this problem ?