Есть сайт со слайдером проектов с зумированием изображений
Хочу себе сделать такого же плана с сохранением стилей.
Сам слайдер проектов перенес, все ок, но есть проблема с просмотром картинок в увеличенном виде - выскакивает в консоли ошибка 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>"Age", 2015, Oil on Linen, 66x88 inches
</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>"Age", 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>"Age", 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>
Может быть подскажете, что мне нужно поправить?
js
проблема, т.к. на сайте он отрабатывает, а вот в путях или неправильном подулючении возможно.. Причем, саму область с кнопками загружает, а вот картинку - нет..