elevatezoom图片显示开箱即用

Question

我正在尝试使用elevatezoom，但它显示的图片位置错误

屏幕截图

注意：

我的图像应该显示为绿色框，而是显示为红色框，并随即显示在我的另一列。

代码

这是HTML结构的样子：

<div class="row">
  <div class="col-sm-6">
     <div class="image">
        //slider codes
     </div>
  </div>
  <div class="col-sm-6">
   // product title etc.
  </div>
</div>

Slider

<div class="image">
  @foreach($images as $image)
  @if(!empty($product->label))
    @if($product->label_from <= $mytime && $product->label_to >= $mytime)
    <span class="prolabel top-right">
      <span class="prolabels-image" style="cursor:pointer;">
        <span class="productlabeltext" style="background:#{{$product->label_color}};">
          {{$product->label}}
        </span>
      </span>
    </span>
    @endif
  @endif
  @if($loop->first)
    <img class="img-responsive" id="zoom_01" src="{{ url('images/') }}/{{ $image->name }}" title="{{$image->image_alt}}" alt="{{$image->image_alt}}" data-zoom-image="{{ url('images/') }}/{{ $image->name }}" />
  @endif
  @endforeach
</div>


<div class="center-block text-center">
  <span class="zoom-gallery"><i class="fa fa-search"></i> Click image for Gallery</span>
</div>

<div class="image-additional" id="gallery_01">
  @foreach($images as $image)
  <a class="thumbnail" href="#" data-zoom-image="{{ url('images/') }}/{{ $image->name }}" data-image="{{ url('images/') }}/{{ $image->name }}" title="Laptop Silver black">
    <img src="{{ url('images/') }}/{{ $image->name }}" title="{{$image->image_alt}}" alt ="{{$image->image_alt}}"/>
  </a>
  @endforeach
</div>

JavaScript

 <script>
    // Elevate Zoom for Product Page image
    $("#zoom_01").elevateZoom({
      gallery:'gallery_01',
      cursor: 'pointer',
      galleryActiveClass: 'active',
      imageCrossfade: true,
      zoomWindowFadeIn: 500,
      zoomWindowFadeOut: 500,
      lensFadeIn: 500,
      lensFadeOut: 500,
      responsive: true,
      loadingIcon: '/theme/new/image/progress.gif',
    }); 
    //////pass the images to swipebox
    $("#zoom_01").bind("click", function(e) {
      var ez =   $('#zoom_01').data('elevateZoom');
      $.swipebox(ez.getGalleryList());
      return false;
    });
 </script>

  

PS：为了清楚起见，我在laravel上使用了此滑块，这就是为什么我的   php代码以{{开头，以}}结尾，是刀片打印。

有什么建议可以解决我的问题吗？