0

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 ?


Change div on avatar-block to position relative:

div.avatar-block .item-avatar {
    position: relative;
4

0 回答 0