изображение elevatezoom показывает из коробки - PullRequest
Новая
       29

изображение elevatezoom показывает из коробки

0 голосов
/ 07 января 2019

Я пытаюсь использовать elevatezoom , но он показывает изображения в неправильных положениях

Скриншот

one

Примечание:

Мое изображение должно отображаться в зеленом поле, вместо этого оно отображается в красном поле и, как вы видите, попадает в другой столбец.

код

Вот как выглядит структура 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 коды начинаются с {{ и заканчиваются }} это печать лезвия.

Любое предложение, которое может решить мою проблему?

...