2

Есть сайт со слайдером проектов с зумированием изображений Хочу себе сделать такого же плана с сохранением стилей. Сам слайдер проектов перенес, все ок, но есть проблема с просмотром картинок в увеличенном виде - выскакивает в консоли ошибка jquery

GET http://site.ru/category/painting/age/featured-works?view=enlarge&go-away-chrome=1 404 (Not Found)

Насколько я понимаю это связано с тем, что у меня путь к странице несколько другой /paint/age/featured-works?view=enlarge

<img class='enlarge zoom-image high-quality bx-image'
data-href="/painting/age/featured-works?view=enlarge" data-slide='1'
data-src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg' data-srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/1010x580_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg 1x, [url]https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg[/url] 2x" data-enlarge='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg'  data-zoom="true" data-zoom-src="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/zoom/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg" alt=''>

Пытался разные пути прописывать, но все тщетно. Набросал код с используемым функционалом

var langInUrl = false;
var closeText = "Close";
var zoomText = "Zoom";
var screens = {};
var frontendParams = {
  currentScreen: null,
};
$("body").on("click", ".zoom-click", function(h) {
  h.preventDefault();
  var d = getOrCreateOverlay();
  d.find(".enlarge-wrapper").hide();
  $('<div id="zoomImage" oncontextmenu="/*return false;*/">                    <div id="zoomHeaderWrapper"><div id="zoomHeader">                            <div id="zoomHeaderClose">' + closeText + '</div>                            <div id="zoomHeaderText"></div></div></div><div id="zoomWrap">             <div id="pan"><img id="panImage" src="" srcset="" />                        </div></div><div id="zoomFooterWrapper"><div id="zoomFooter">                  <div class="content-conveyor ui-helper-clearfix">                              <div class = "zoomFooterControl" id="zoomFooterZoomOut"></div>                <div id="jQslider"></div><div class="zoomFooterControl"  id="zoomFooterZoomIn"></div></div></div></div>              </div>').show().appendTo(d);
  $("#zoomImage").css("background-color", $("#overlay").css("background-color"));
  var g = function() {
    var l = 3.5;
    var e = {
      minScale: 1,
      maxScale: l,
      contain: "invert"
    };
    if ($(window).width() > 767) {
      var k = $("#jQslider").slider({
        animate: true,
        range: "min",
        value: 1,
        min: 1,
        max: l,
        step: 0.05,
        slide: function(m, n) {
          $panzoom.panzoom("zoom", n.value)
        }
      });
      $.extend(e, {
        "$zoomIn": $("#zoomFooterZoomIn"),
        "$zoomOut": $("#zoomFooterZoomOut"),
        onZoom: function(o, n, p, m) {
          k.slider("value", p)
        }
      })
    }
    $panzoom = $("#pan").panzoom(e);
    $panzoom.parent().on("mousewheel.focal", function(n) {
      n.preventDefault();
      var o = n.delta || n.originalEvent.wheelDelta;
      var m = o ? o < 0 : n.originalEvent.deltaY > 0;
      $panzoom.panzoom("zoom", m, {
        increment: 0.1,
        animate: false,
        focal: n
      })
    });
    var j = new Hammer.Manager(document.getElementById("panImage"));
    j.add(new Hammer.Tap({
      event: "doubletap",
      taps: 2,
      interval: 500,
      threshold: 10,
      posThreshold: 100
    }));
    j.add(new Hammer.Tap({
      event: "singletap",
      interval: 500,
      threshold: 10,
      posThreshold: 100
    }));
    j.get("doubletap").recognizeWith("singletap");
    j.get("singletap").requireFailure("doubletap");
    j.on("doubletap", function(m) {
      if ($panzoom.panzoom("getMatrix")[0] == 1) {
        var o = (m.center.x - ($("#pan").width() / 2)) * 2.5;
        var n = (m.center.y - ($("#pan").height() / 2)) * 2.5;
        $panzoom.panzoom("zoom", 2.5);
        $panzoom.panzoom("pan", -o, -n)
      } else {
        $panzoom.panzoom("zoom", 1)
      }
    })
  };
  var f;
  if ($(h.target).is("img")) {
    f = $(h.target);
    $("#zoomHeaderClose").click(function() {
      $("#overlay").remove();
      $("body").removeAttr("style")
    })
  } else {
    f = $("#overlay .fader-items .slide:eq(" + sliderHandler.getCurrentSlide() + ") img");
    $("#zoomHeaderClose").click(function() {
      d.find(".enlarge-wrapper").show();
      $("#zoomImage").remove()
    })
  }
  collageDispatcher.trigger("panzoom.beforeImageLoad", f);
  $("#panImage").load(g).attr("src", f.data("zoom-src") ? f.data("zoom-src") : f.data("enlarge")).attr("srcset", f.data("zoom-srcset") ? f.data("zoom-srcset") : f.data("enlarge-srcset"));
  if (f.hasClass("high-quality")) {
    $("#panImage").addClass("high-quality")
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contentWrapper">
  <section id='featured-works'>
    <div id="multiple-slider-container">
      <div id="screen-featured-works">
        <div id="featured-works">
          <div id='slider-container'>
            <div id='screen-featured-works'>
              <div class='container
                          '>
                <div id='featured-works-container'>
                  <div class='
                              slider                                 full-slider
                              '>
                    <div data-screen="featured-works" class='fader-items
                                bx-preload
                                '>
                      <div class='slide'>
                        <figure class="">
                          <img class='
                                      enlarge            zoom-image            high-quality            bx-image        ' data-href="/paint/age/featured-works?view=enlarge" data-slide='1' data-src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg'
                            data-srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/1010x580_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg 2x"
                            data-enlarge='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg' data-zoom="true" data-zoom-src="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/zoom/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg"
                            alt=''>
                        </figure>
                        <figcaption>
                          <p>&quot;Age&quot;, 2015, Oil on Linen, 66x88 inches&nbsp;
                          </p>
                        </figcaption>
                      </div>
                      <div class='slide'>
                        <figure class="">
                          <img class='
                                      enlarge                        high-quality            bx-image        ' data-href="/paint/age/featured-works?view=enlarge" data-slide='2' data-src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg'
                            data-srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/1010x580_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg 2x"
                            data-enlarge='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg' alt=''>
                        </figure>
                        <figcaption>
                          <p>&quot;Age&quot;, Detail
                          </p>
                        </figcaption>
                      </div>
                      <div class='slide'>
                        <figure class="">
                          <img class='
                                      enlarge                        high-quality            bx-image        ' data-href="/paint/age/featured-works?view=enlarge" data-slide='3' data-src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg'
                            data-srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/1010x580_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg 2x"
                            data-enlarge='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg' alt=''>
                        </figure>
                        <figcaption>
                          <p>&quot;Age&quot;, Detail
                          </p>
                        </figcaption>
                      </div>
                    </div>
                    <div class="bx-thumbs">
                      <a href="" data-slide-index="0">
                        <img src="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg" srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/130x90_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg 2x"
                          alt="" />
                      </a>
                      <a href="" data-slide-index="1">
                        <img src="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg" srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/130x90_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg 2x"
                          alt="" />
                      </a>
                      <a href="" data-slide-index="2">
                        <img src="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg" srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/130x90_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg 2x"
                          alt="" />
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

Может быть подскажете, что мне нужно поправить?

7
  • 1
    У вас нерабочая ссылка на код, поправьте пожалуйста, а лучше воспользуйтесь местным сниппетом. 3 окт 2018 в 11:13
  • @Anton Mironov спасибо, поправил. Правда в таком виде он не особо рабочий, но сам смысл передает. Не думаю, что js проблема, т.к. на сайте он отрабатывает, а вот в путях или неправильном подулючении возможно.. Причем, саму область с кнопками загружает, а вот картинку - нет..
    – Вася
    3 окт 2018 в 11:25
  • @Anton Mironov если я ссылку на тестовый сайт предоставлю - вы сможете помочь разобраться?
    – Вася
    6 окт 2018 в 5:51
  • 1
    Сделайте воспроизводимой ошибку на jsfiddle или добавьте ссылку на тестовый сайт, это поможет быстрее разобраться в вашей проблеме.
    – Sergey-N13
    8 окт 2018 в 9:12
  • @SergeyN ссылка на тестовый сайт a-lot-of-money.ru/dwp/paint/age
    – Вася
    8 окт 2018 в 11:18

2 ответа 2

3
+50
  1. Первое, что бросается в глаза - обработчик события для тега $("body") повешен вне области $(document).ready(). Страница еще не загрузилась полностью, когда выполнился данный скрипт. И скрипт, соответственно, просто не увидел нужных ему объектов, т.к. тег загрузился ПОСЛЕ выполнения скрипта.
  2. Указывайте версию библиотек, которые используете, т.к. вашу ошибку воспроизвести не удалось. Консоль - пуста (с версией jQuery 3.2.1). Разобравшись со временем с исходным кодом с галереи стало понятно, что используется библиотека jQuery версии 1.11.2.
  3. Так же вы абсолютно ничего не сказано, КАКИЕ именно дополнительные библиотеки подключили, чем ввели остальных пользователей сайта, желающих вам помочь в заблуждение. В будущем указывайте эту информацию, чтобы было легче разобраться и помочь.
  4. Отсутствуют подключенные CSS-стили.
  5. По синтаксису получаемой ошибки. Скрипт осуществляет попытку открыть файл вне браузера, что запрещено политикой безопасности Chrome. Иначе бы можно было получать доступ к файлам пользователя на жестком диске. Ошибка, генерируемая в конечном счете: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
  6. Если откроете сайт с плагином и посмотрите вкладку "Network", то увидите запрос http://www.alibanisadr.com/paintings/age/featured-works?view=enlarge&go-away-chrome=1 который возвращает HTML-код. Все, что вам нужно для решения вашей задачи - это создать подобную страницу у себя, которая возвращала бы вам нужные данные.

Здесь не могу прикрепить архив. Структура каталога с проектом в моем случае:

+ /js/script.js - JS-скрипт, приведенный в примере
|
+ index.html - главная страница с галереей
|
+ enlarge.html - генерируемый HTML-код запроса

Код index.html и script.js:

var langInUrl = false;
var closeText = "Close";
var zoomText = "Zoom";
var screens = {};
var frontendParams = {
    currentScreen: null
};

$( document).ready(function(){

    $(".zoom-click").on("click", function(h) {
        h.preventDefault();

        var d = getOrCreateOverlay();
        d.find(".enlarge-wrapper").hide();
        $('<div id="zoomImage" oncontextmenu="/*return false;*/">                    <div id="zoomHeaderWrapper"><div id="zoomHeader">                            <div id="zoomHeaderClose">' + closeText + '</div>                            <div id="zoomHeaderText"></div></div></div><div id="zoomWrap">             <div id="pan"><img id="panImage" src="" srcset="" />                        </div></div><div id="zoomFooterWrapper"><div id="zoomFooter">                  <div class="content-conveyor ui-helper-clearfix">                              <div class = "zoomFooterControl" id="zoomFooterZoomOut"></div>                <div id="jQslider"></div><div class="zoomFooterControl"  id="zoomFooterZoomIn"></div></div></div></div>              </div>').show().appendTo(d);
        $("#zoomImage").css("background-color", $("#overlay").css("background-color"));
        var g = function() {
            var l = 3.5;
            var e = {
                minScale: 1,
                maxScale: l,
                contain: "invert"
            };
            if ( $(window).width() > 767) {
                var k = $("#jQslider").slider({
                    animate: true,
                    range: "min",
                    value: 1,
                    min: 1,
                    max: l,
                    step: 0.05,
                    slide: function(m, n) {
                        $panzoom.panzoom("zoom", n.value)
                    }
                });
                $.extend(e, {
                    "$zoomIn": $("#zoomFooterZoomIn"),
                    "$zoomOut": $("#zoomFooterZoomOut"),
                    onZoom: function(o, n, p, m) {
                        k.slider("value", p)
                    }
                })
            }
            $panzoom = $("#pan").panzoom(e);
            $panzoom.parent().on("mousewheel.focal", function(n) {
                n.preventDefault();
                var o = n.delta || n.originalEvent.wheelDelta;
                var m = o ? o < 0 : n.originalEvent.deltaY > 0;
                $panzoom.panzoom("zoom", m, {
                    increment: 0.1,
                    animate: false,
                    focal: n
                })
            });
            var j = new Hammer.Manager(document.getElementById("panImage"));
            j.add(new Hammer.Tap({
                event: "doubletap",
                taps: 2,
                interval: 500,
                threshold: 10,
                posThreshold: 100
            }));
            j.add(new Hammer.Tap({
                event: "singletap",
                interval: 500,
                threshold: 10,
                posThreshold: 100
            }));
            j.get("doubletap").recognizeWith("singletap");
            j.get("singletap").requireFailure("doubletap");
            j.on("doubletap", function(m) {
                if ($panzoom.panzoom("getMatrix")[0] == 1) {
                    var o = (m.center.x - ($("#pan").width() / 2)) * 2.5;
                    var n = (m.center.y - ($("#pan").height() / 2)) * 2.5;
                    $panzoom.panzoom("zoom", 2.5);
                    $panzoom.panzoom("pan", -o, -n)
                } else {
                    $panzoom.panzoom("zoom", 1)
                }
            })
        };
        var f;
        if ( $(h.target).is("img") ) {
            f = $(h.target);
            $("#zoomHeaderClose").click(function() {
                $("#overlay").remove();
                $("body").removeAttr("style")
            })
        } else {
            f = $("#overlay .fader-items .slide:eq(" + sliderHandler.getCurrentSlide() + ") img");
            $("#zoomHeaderClose").click(function() {
                d.find(".enlarge-wrapper").show();
                $("#zoomImage").remove()
            })
        }
        collageDispatcher.trigger("panzoom.beforeImageLoad", f);
        $("#panImage").load(g).
            attr("src", f.data("zoom-src") ? f.data("zoom-src") : f.data("enlarge")).
            attr("srcset", f.data("zoom-srcset") ? f.data("zoom-srcset") : f.data("enlarge-srcset"));
        if (f.hasClass("high-quality")) {
            $("#panImage").addClass("high-quality")
        }

    });

});
<!DOCTYPE html>
<html>
<head>
    <title>Gallery</title>
    <link rel="stylesheet" href="http://www.alibanisadr.com/css/9ddf051.css" />
    <link rel="stylesheet" href="http://fast.fonts.net/cssapi/f9c0ea93-78e6-466d-b5e6-bbbaae95f824.css" />
    <link rel="stylesheet" href="http://www.alibanisadr.com/style.cfdcfd09d41c637e5c0f2c3fb06f5633.css" />
    <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.alibanisadr.com/js/888b56b.js"></script>
    <script type="text/javascript" src="http://www.alibanisadr.com/js/87f086e.js"></script>
    <script type="text/javascript" src="http://www.alibanisadr.com/js/7240d26.js"></script>
    <script type="text/javascript" src="http://www.alibanisadr.com/scripts.7256e61d4c89a09ebe1c0664d69a0eeb.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body data-email-protected="" data-section-key="paintings" data-section-id="55f9e06a6aa72c5b39b1c098" class="s-paintings detail-page">
<div class="contentWrapper">
    <section id='featured-works'>
        <div id="multiple-slider-container">
            <div id="screen-featured-works">
                <div id="featured-works">
                    <div id='slider-container'>
                        <div id='screen-featured-works'>
                            <div class='container'>
                                <div id='featured-works-container'>
                                    <div class='slider full-slider'>
                                        <div data-screen="featured-works" class='fader-items bx-preload'>
                                            <div class='slide'>
                                                <figure class="">
                                                    <img class='enlarge zoom-image high-quality bx-image'
                                                            data-href="enlarge.html?view=enlarge"
                                                            data-slide='1'
                                                            data-src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg'
                                                            data-srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/1010x580_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg 2x"
                                                            data-enlarge='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg'
                                                            data-zoom="true"
                                                            data-zoom-src="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/zoom/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg"
                                                            alt=''
                                                            >
                                                </figure>
                                                <figcaption>
                                                    <p>&quot;Age&quot;, 2015, Oil on Linen, 66x88 inches&nbsp;
                                                    </p>
                                                </figcaption>
                                            </div>
                                            <div class='slide'>
                                                <figure class="">
                                                    <img class='enlarge high-quality bx-image'
                                                            data-href="enlarge.html?view=enlarge"
                                                            data-slide='2'
                                                            data-src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg'
                                                            data-srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/1010x580_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg 2x"
                                                            data-enlarge='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg'
                                                            alt=''
                                                            >
                                                </figure>
                                                <figcaption>
                                                    <p>&quot;Age&quot;, Detail
                                                    </p>
                                                </figcaption>
                                            </div>
                                            <div class='slide'>
                                                <figure class="">
                                                    <img class='enlarge high-quality bx-image'
                                                            data-href="enlarge.html?view=enlarge"
                                                            data-slide='3'
                                                            data-src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg'
                                                            data-srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/1010x580_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/2020x1160_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg 2x"
                                                            data-enlarge='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg'
                                                            alt=''
                                                            >
                                                </figure>
                                                <figcaption>
                                                    <p>&quot;Age&quot;, Detail
                                                    </p>
                                                </figcaption>
                                            </div>
                                        </div>
                                        <div class="bx-thumbs">
                                            <a href="" data-slide-index="0">
                                                <img src="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg"
                                                     srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/130x90_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg 2x"
                                                     alt=""/>
                                            </a>
                                            <a href="" data-slide-index="1">
                                                <img src="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg"
                                                     srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/130x90_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg 2x"
                                                     alt=""/>
                                            </a>
                                            <a href="" data-slide-index="2">
                                                <img src="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg"
                                                     srcset="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/130x90_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg 1x, https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/260x180_fit/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg 2x"
                                                     alt=""/>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
</body>
</html>

Код страницы enlarge.html

<div id='screen-featured-works' >
    <div>
        <div id='featured-works-container'>
            <div class='full-slider'>
                <div data-screen="featured-works" class='fader-items bx-preload'>
                    <div class='slide'>
                        <figure class="">
                            <img class='zoom-image high-quality bx-image'
                                 data-slide='1'
                                 data-src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg'        data-enlarge='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg'                    data-zoom="true"
                                 data-zoom-src="https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/zoom/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg"                alt=''
                                 src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/c1d1f86223877c96957cf5718d6faf36.jpeg' >
                        </figure>
                        <figcaption>
                            <p>&quot;Age&quot;, 2015, Oil on Linen, 66x88 inches&nbsp;</p>
                        </figcaption>
                    </div>
                    <div class='slide'>
                        <figure class="">
                            <img class='high-quality bx-image'
                                 data-slide='2'
                                 data-src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg'        data-enlarge='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg'                alt=''
                                 src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/d1f83aa674c4f2d7016c4ef5db3acf82.jpeg' >
                        </figure>

                        <figcaption>
                            <p>&quot;Age&quot;, Detail</p>
                        </figcaption>
                    </div>
                    <div class='slide'>
                        <figure class="">
                            <img class='high-quality bx-image'
                                 data-slide='3'
                                 data-src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg'        data-enlarge='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg'                alt=''
                                 src='https://s3.amazonaws.com/files.collageplatform.com.prod/image_cache/enlarge/55f9dfbb6aa72c7039b1c099/acc52a4c88337bd1187f921c5339aab8.jpeg' >
                        </figure>

                        <figcaption>
                            <p>&quot;Age&quot;, Detail</p>
                        </figcaption>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

17
  • 1
    @Вася, попробуйте так же создать файл index.html с кодом, который привел выше. Изначально, попробуйте где-то у себя локально создать папку с содержимым ./index.html, ./enlarge.html и /js/script.js без всего лишнего. Просто скопировать текст выше и вставить. И посмотреть, заработает ли.
    – Kosmos
    9 окт 2018 в 20:44
  • 1
    @Вася, давайте сначала попробую разобраться.
    – Kosmos
    10 окт 2018 в 8:24
  • 1
    @Вася, вчера, к сожалению не успел посмотреть. Постараюсь посмотреть сегодня. Основная причина, на мой взгляд, это то, что на 1м слайдере идет запрос в корень, где эмулируемый ответ в виде файла enlarge.html удается найти, а на 2м и последующих слайдах идет запрос на НЕсуществующие URI: index.html/overlay?view=slider#3 Т.к. указанного адреса не существует, то и возникает ошибка. Это в теории, надо еще проверить.
    – Kosmos
    11 окт 2018 в 18:09
  • 1
    @Вася, долго не мог ответить, не успевал. Обновил файл index.html. Удалил из тега a, что идет перед изображением класс class="zoom-click" и заработало. Простите, что вначале ввел в заблуждение. Масштабировать изображение можно только 1-е. Посмотрел на сайт, откуда брался скрипт, там точно так же можно увеличить только первое, два последние не увеличиваются с дополнительной увеличительной линейкой.
    – Kosmos
    15 окт 2018 в 17:26
  • 1
    @Вася, перевел файлы на сервер и попробовал запустить их как htt://mysite.ru/, дублируется / в пути. На работу галереи это не влияет, только откуда там берется дополнительный / так и не понял. Чтобы разобраться, нужно будет скачивать скрипты и деобфусцировать их, затем дебажить и разбрираться, что почем. Сразу говорю - это может быть долгий нудный процесс. По самой работе - вроде все ок.
    – Kosmos
    15 окт 2018 в 17:31
2

Отрываем сайт-донор, открываем отладчик (сеть, xhr), жмём на картинку и видим запрос paintings/age/featured-works?view=enlarge&go-away-chrome=1, смотрим что он возвращает (в отладчике). А возвращает он ответ с кодом 200 и кусок html'я с картинками (который вероятно используется js'ом). У вас такой же запрос возвращает код 404. Соответственно проблема вероятнее всего не на стороне клиента, а на стороне сервера. Верните код 200 и html с картинками как на сайте-доноре.

3
  • спасибо за подсказку, я воспроизвел ошибку на тестовом сайте, здесь тоже отдает 404. a-lot-of-money.ru/dwp/paint/age 2 недели мучаюсь, экспериментирую с ссылками и не только, не могу понять причину почему так..
    – Вася
    9 окт 2018 в 20:23
  • @Вася вам удалось решить проблему? Дело в том, что у вас нет нужного обработчика на стороне сервера. Вы используете какую-то cms? 10 окт 2018 в 9:15
  • пока нет, не удалось, в процессе. Да, использую wordpress
    – Вася
    10 окт 2018 в 10:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.