$(function() {
var $all = $("img"),
$windowWidth = $(window).width(),
$windowHeight = $(window).height(),
$imgPreviewBlock = $("section#img_preview").hide(),
$imgPreviewHeader = $imgPreviewBlock.find("h2"),
$imgPreviewBlockFigure = $imgPreviewBlock.find("figure").css("cursor", "default"),
$imgPreview = $imgPreviewBlock.find("img").css("cursor", "default"),
$previewCounter = $imgPreviewBlock.find("span"),
$sectionProductFoto = $("section#product_foto"),
$sectionProductHeader = $sectionProductFoto.find("h2"),
$mainProductFotofigure = $sectionProductFoto.find("figure.main_product_foto"),
$mainProductFoto = $mainProductFotofigure.find("img"),
$productFotoList = $sectionProductFoto.find("ul#foto_list"),
$productFotoBlockLi = $productFotoList.find("li"),
$foto = $productFotoBlockLi.find("img"),
$activeImg = $foto.filter(".main"),
$activeImgSrc = $activeImg.attr("src"),
$openFotoPreview = $("figure.foto_block"),
$fotoControlButtons = $imgPreviewBlock.find(".button"),
$fotoControlButtonsArrows = $imgPreviewBlock.find(".arrows"),
$imgPreviewBlockTitle = $imgPreviewBlock.find("p"),
$imgPreviewBlockHeader = $imgPreviewBlock.find("h2"),
$gallery = $("section#foto_gallery"),
$galleryBlock = $gallery.find("ul"),
$galleryItems = $galleryBlock.find("li"),
$galleryItemsLength = $galleryItems.length,
$galleryImg = $galleryItems.find("img"),
$transitionClass = $("section#foto_gallery ul li figure figcaption").css({"transition": "all 0.2s ease"});
$mainProductFoto.attr("src", $activeImgSrc);
$all.css({
"width" : "100" + "%"
});
//функция смены картинки для главной картинки блока с товаром
function changeImg() {
var $this = $(this),
$newFoto = $this.attr("src");
if ($foto.hasClass("main")) {
$mainProductFoto.attr("src", $newFoto);
$foto.removeClass("main");
$this.addClass("main");
}
}
//функция просмотра картинки
function openFotoPreview() {
var $this = $(this),
$actionImg = $this.find("img"),
$apt = $actionImg.parents("li"),
$imgNumber = $apt.index() + 1,
$app = $apt.find("p"),
$actionGalleryTitle = $app.html(),
$fotosrc = $actionImg.attr("src"),
$imgPreviewWidth = $imgPreview.width(),
$imgPreviewHeight = $imgPreview.height();
$imgPreview.addClass("position");
//определяем размермы картинки и делаем для них стили
if ($windowWidth > $imgPreview.width()) {
$imgPreview.css({
"width" : "auto",
"height": "100" + "%"
});
}
//закончили, и открываем по клику блок просмотра картинки
if ($this.hasClass("main_product_foto")) {
$imgPreview.attr("src", $fotosrc);
$fotoControlButtonsArrows.show();
$imgPreviewBlockHeader.show();
$previewCounter.hide();
$imgPreviewBlockTitle.hide();
$imgPreviewHeader.html($sectionProductHeader);
$imgPreviewBlock.show();
alert([$imgPreview.width(),$windowWidth]);
} else if ($this.hasClass("gallery")) {
$imgPreview.attr("src", $fotosrc);
$fotoControlButtonsArrows.show();
$imgPreviewBlockHeader.hide();
$previewCounter.show();
$imgPreviewBlockTitle.show();
$previewCounter.html($imgNumber + " из " + $galleryItemsLength);
$actionImg.addClass("gallery_active_foto");
$imgPreviewBlockTitle.html($actionGalleryTitle);
$imgPreviewBlock.show();
alert([$imgPreview.width(),$windowWidth]);
} else {
$imgPreview.attr("src", $fotosrc);
$fotoControlButtonsArrows.hide();
$previewCounter.hide();
$imgPreviewBlockHeader.hide();
$imgPreviewBlockTitle.hide();
$imgPreviewBlock.show();
alert([$imgPreview.width(),$windowWidth]);
}
}
function fotoPreviewControl() {
var $this = $(this),
$activeFoto = $foto.filter(".main"),
$activeFotoSrc = $activeFoto.attr("src"),
$activeLi = $activeFoto.parents("li"),
$nextLi = $activeLi.next(),
$nextFoto = $nextLi.find("img"),
$prevLi = $activeLi.prev(),
$prevFoto = $prevLi.find("img"),
$firstLi = $productFotoBlockLi.first(),
$firstFoto = $firstLi.find("img"),
$lastLi = $productFotoBlockLi.last(),
$lastFoto = $lastLi.find("img"),
$allImages = $("img"),
$activeGalleryFoto = $allImages.filter(".gallery_active_foto"),
$activeGalleryItem = $activeGalleryFoto.parents("li"),
$firstGalleryItem = $galleryItems.first(),
$firstGalleryFoto = $firstGalleryItem.find("img"),
$lastGalleryItem = $galleryItems.last(),
$lastGalleryFoto = $lastGalleryItem.find("img"),
$nextGalleryItem = $activeGalleryItem.next(),
$nextGalleryFoto = $nextGalleryItem.find("img"),
$prevGalleryItem = $activeGalleryItem.prev(),
$prevGalleryFoto = $prevGalleryItem.find("img"),
$nextGalleryTitle = $nextGalleryItem.find("p"),
$nextGalleryTitleText = $nextGalleryTitle.html()
$prevGalleryTitle = $prevGalleryItem.find("p"),
$prevGalleryTitleText = $prevGalleryTitle.html(),
$firstGalleryTitle = $firstGalleryItem.find("p"),
$firstGalleryTitleText = $firstGalleryTitle.html()
$lastGalleryTitle = $lastGalleryItem.find("p"),
$lastGalleryTitleText = $lastGalleryTitle.html(),
$firstImgNumber = $firstGalleryItem.index() + 1,
$lastImgNumber = $lastGalleryItem.index() + 1,
$nextImgNumber = $nextGalleryItem.index() + 1,
$prevImgNumber = $prevGalleryItem.index() + 1;
if ($this.hasClass("right")) {
if ($activeGalleryFoto.hasClass("gallery_active_foto")) {
if ($nextGalleryFoto.length) {
$nextGalleryFotoSrc = $nextGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$nextGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($nextGalleryTitleText);
$previewCounter.html($nextImgNumber + " из " + $galleryItemsLength);
} else {
$nextGalleryFotoSrc = $firstGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$firstGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($firstGalleryTitleText);
$previewCounter.html($firstImgNumber + " из " + $galleryItemsLength);
}
} else {
if ($nextFoto.length) {
$nextFotoSrc = $nextFoto.attr("src");
$foto.removeClass("main");
$nextFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);
} else {
$nextFotoSrc = $firstFoto.attr("src");
$foto.removeClass("main");
$firstFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);
}
}
} else if ($this.hasClass("left")) {
if ($activeGalleryFoto.hasClass("gallery_active_foto")) {
if ($prevGalleryFoto.length) {
$nextGalleryFotoSrc = $prevGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$prevGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($prevGalleryTitleText);
$previewCounter.html($prevImgNumber + " из " + $galleryItemsLength);
} else {
$nextGalleryFotoSrc = $lastGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$lastGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($lastGalleryTitleText);
$previewCounter.html($lastImgNumber + " из " + $galleryItemsLength);
}
} else {
if ($prevFoto.length) {
$nextFotoSrc = $prevFoto.attr("src");
$foto.removeClass("main");
$prevFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);
} else {
$nextFotoSrc = $lastFoto.attr("src");
$foto.removeClass("main");
$lastFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);
}
}
} else if ($this.hasClass("close")) {
$imgPreview.removeClass("position");
$imgPreview.attr("src", "");
$activeGalleryFoto.removeClass("gallery_active_foto");
$mainProductFoto.attr("src", $activeFotoSrc);
$imgPreviewBlock.hide();
}
}
$foto.on("touchstart, click", changeImg);
$openFotoPreview.on("touchstart, click", openFotoPreview);
$fotoControlButtons.on("touchstart, click", fotoPreviewControl);
});