Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   SOS!!! картинка не правильно отображается (https://javascript.ru/forum/jquery/64451-sos-kartinka-ne-pravilno-otobrazhaetsya.html)

Роман Андреевич 12.08.2016 08:03
SOS!!! картинка не правильно отображается
 
$(function() {

var $windowWidth = $(window).width(),
$windowHeight = $(window).height(),
$imgPreviewBlock = $("section#img_preview").hide(),
$imgPreviewHeader = $imgPreviewBlock.find("h2"),
$imgPreviewBlockFigure = $imgPreviewBlock.find("figure").css("cursor", "default"),
$imgPreview = $("section#img_preview 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);

//функция смены картинки для главной картинки блока с товаром

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 ($imgPreviewWidth > $windowWidth) {

$imgPreview.css({
"width": "100" + "%",
"height": "auto"
});

} else if ($imgPreviewWidth < $windowWidth) {

$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 + "&nbsp;из&nbsp;" + $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 + "&nbsp;из&nbsp;" + $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 + "&nbsp;из&nbsp;" + $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 + "&nbsp;из&nbsp;" + $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 + "&nbsp;из&nbsp;" + $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_fot o");
$mainProductFoto.attr("src", $activeFotoSrc);
$imgPreviewBlock.hide();

}
}

$foto.on("touchstart, click", changeImg);
$openFotoPreview.on("touchstart, click", openFotoPreview);
$fotoControlButtons.on("touchstart, click", fotoPreviewControl);
});

Доброго времени суток, суть вопроса проста, не мгу сделать так, что бы картинка выводилась с нужными css свойствами. Нужно что бы в зависимости от соотношения размеров экрана и картинки, последняя выводилась либо на всю высоту, если ширина картинки меньше ширины экрана, либо на всю ширину.

рони 12.08.2016 08:42
Роман Андреевич,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 12.08.2016 08:46
Роман Андреевич,
если картинка не загружена предварительно то как узнать размеры и почему бы не решить проблему размера на css, без скрипта.

Роман Андреевич 12.08.2016 08:49 
$(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 + "&nbsp;из&nbsp;" + $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 + "&nbsp;из&nbsp;" + $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 + "&nbsp;из&nbsp;" + $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 + "&nbsp;из&nbsp;" + $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 + "&nbsp;из&nbsp;" + $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);
});

Роман Андреевич 12.08.2016 08:52 
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>Foto preview v_2</title>
	<link rel="stylesheet" href="style/style.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
	<section id="img_preview">
		<h2></h2>
		<figure>
			<img src="" alt="" class="iprev">
			<figcaption>
				<span></span>
				<svg class="button close" viewBox="0 0 500 500">
					<polygon points="350,160.1 339.9,150 250,239.9 160.1,150 150,160.1 239.9,250 150,339.9 160.1,350 250,260.1 339.9,350 350,339.9 
							260.1,250 "/>
				</svg>
				<svg class="button left arrows" viewBox="0 0 500 500">
					<polygon points="295.1,350 304.9,340.3 214.6,250 304.9,159.7 295.1,150 195.1,250 "/>
				</svg>
				<svg class="button right arrows" viewBox="0 0 500 500">
					<polygon points="204.9,150 195.1,159.7 285.4,250 195.1,340.3 204.9,350 304.9,250 "/>
				</svg>
				<p></p>
			</figcaption>
		</figure>				
	</section>
	<section id="product_foto">
		<h2>трусы HUSTLER drop invisible</h2>
		<figure class="main_product_foto foto_block">
			<img src="" alt="">
			<figcaption>
				<svg viewBox="0 0 500 500" class="zoom">
					<g>
						<circle fill="none" stroke="#ffffff" stroke-width="20" stroke-miterlimit="20" cx="221.2" cy="221.1" r="71.1"/>
						<line fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-miterlimit="20" x1="273.4" y1="273.6" x2="349.8" y2="350"/>
					</g>
				</svg>
			</figcaption>
		</figure>
		<ul id="foto_list">
			<li>
				<img src="gallery/1.jpg" alt="" class="main">
			</li>
			<li>
				<img src="gallery/2.jpg" alt="">
			</li>
			<li>
				<img src="gallery/3.jpg" alt="">
			</li>
			<li>
				<img src="gallery/4.jpg" alt="">
			</li>
		</ul>
	</section>
	<section id="paragraph">
		<h2>Какой то контент</h2>
		<figure class="foto_block">
			<img src="gallery/80.jpg" alt="">
			<figcaption>
				<svg viewBox="0 0 500 500" class="zoom">
					<g>
						<circle fill="none" stroke="#ffffff" stroke-width="20" stroke-miterlimit="20" cx="221.2" cy="221.1" r="71.1"/>
						<line fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-miterlimit="20" x1="273.4" y1="273.6" x2="349.8" y2="350"/>
					</g>
				</svg>
			</figcaption>
		</figure>

		<figure class="foto_block">
			<img src="gallery/50.jpg" alt="">
			<figcaption>
				<svg viewBox="0 0 500 500" class="zoom">
					<g>
						<circle fill="none" stroke="#ffffff" stroke-width="20" stroke-miterlimit="20" cx="221.2" cy="221.1" r="71.1"/>
						<line fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-miterlimit="20" x1="273.4" y1="273.6" x2="349.8" y2="350"/>
					</g>
				</svg>
			</figcaption>
		</figure>

		<figure class="foto_block">
			<img src="gallery/60.jpg" alt="">
			<figcaption>
				<svg viewBox="0 0 500 500" class="zoom">
					<g>
						<circle fill="none" stroke="#ffffff" stroke-width="20" stroke-miterlimit="20" cx="221.2" cy="221.1" r="71.1"/>
						<line fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-miterlimit="20" x1="273.4" y1="273.6" x2="349.8" y2="350"/>
					</g>
				</svg>
			</figcaption>
		</figure>

		<figure class="foto_block">
			<img src="gallery/70.jpg" alt="">
			<figcaption>
				<svg viewBox="0 0 500 500" class="zoom">
					<g>
						<circle fill="none" stroke="#ffffff" stroke-width="20" stroke-miterlimit="20" cx="221.2" cy="221.1" r="71.1"/>
						<line fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-miterlimit="20" x1="273.4" y1="273.6" x2="349.8" y2="350"/>
					</g>
				</svg>
			</figcaption>
		</figure>

	</section>
	<section id="foto_gallery">
		<h2>Фото галерея</h2>
		<ul>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-7.jpg" alt="">
					<figcaption>
						<p>
							А потом один из них опять заезжает на весы
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-8.jpg" alt="">
					<figcaption>
						<p>
							И снова Рома лазит под весами и что там отпиливает
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-9.jpg" alt="">
					<figcaption>
						<p>
							А парни в это время опять загнали погрузчик на весы и дрочат его по полной программе						
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-10.jpg" alt="">
					<figcaption>
						<p>
							Мы готовы к укладке асфальта на любом участке
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-11.jpg" alt="">
					<figcaption>
						<p>
							Пидоры идут
						</p>
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-12.jpg" alt="">
					<figcaption>
						<p>
							Рома забил и ушел куда то
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-1.jpg" alt="">
					<figcaption>
						<p>
							Два погрузчика						
						</p>
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-2.jpg" alt="">
					<figcaption>
						<p>
							Погрузчик на весах					
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-3.jpg" alt="">
					<figcaption>
						<p>
							Рома под весами				
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-4.jpg" alt="">
					<figcaption>
						<p>
							Перцы смотрят на погрузчик на весах
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-5.jpg" alt="">
					<figcaption>
						<p>
							Мини асфальтоукладчик на минипогрузчике					
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-6.jpg" alt="">
					<figcaption>
						<p>
							Опять эти два погрузчика долбятся
						</p>
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-7.jpg" alt="">
					<figcaption>
						<p>
							А потом один из них опять заезжает на весы
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-8.jpg" alt="">
					<figcaption>
						<p>
							И снова Рома лазит под весами и что там отпиливает
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-9.jpg" alt="">
					<figcaption>
						<p>
							А парни в это время опять загнали погрузчик на весы и дрочат его по полной программе						
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-10.jpg" alt="">
					<figcaption>
						<p>
							Мы готовы к укладке асфальта на любом участке
						</p>						
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-11.jpg" alt="">
					<figcaption>
						<p>
							Пидоры идут
						</p>
					</figcaption>
				</figure>
			</li>
			<li>
				<figure class="foto_block gallery">
					<img src="gallery/1-12.jpg" alt="">
					<figcaption>
						<p>
							Рома забил и ушел куда то
						</p>						
					</figcaption>
				</figure>
			</li>
		</ul>
	</section>
</body>
</html>

Роман Андреевич 12.08.2016 08:53 
* {padding: 0;margin: 0;list-style-type: none;text-decoration: none;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}
img,svg {display: block;margin: 0 auto;}

section {text-align: center;}
section#product_foto {width: 30%;margin: 0 auto;}

section#paragraph {width: 50%;margin: 0 auto;margin-bottom: 10%;}
section#paragraph figure {width: 40%;margin: 2%;}
section#paragraph p {text-align: justify;}
section#paragraph figure:nth-of-type(1) {float: left;}
section#paragraph figure:nth-of-type(2) {width: 100%;}
section#paragraph figure:nth-of-type(3) {float: right;}
section#paragraph figure:nth-of-type(4) {float: left;}

section#product_foto {margin-bottom: 10%;}

section#opana {padding: 10%;}
section#opana button {padding: 2% 10%;}


img, figure, .button {cursor: pointer;}
figure {position: relative;overflow: hidden;}
.position {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}


section#img_preview {position: fixed;background-color: rgba(0,0,0,0.9);z-index: 1100000;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;display: none;}
section#img_preview figure {width: 100%;height: 100%;}
section#img_preview h2 {position: absolute;top: 0;left: 0;color: #414141;width: 80%;z-index: 1000000;text-align: left;font-size: 120%;padding: 1%;}
section#img_preview figure figcaption .button {position: absolute;fill:#ffffff;width: 50px;}
section#img_preview figure figcaption .button:hover {background-color: rgba(2,158,206,1);}
section#img_preview figure figcaption .button.close {position: absolute;top: 0;right: 0;}
section#img_preview figure figcaption .button.arrows {top: 50%;transform: translateY(-50%;);}
section#img_preview figure figcaption .button.left {left:0;}
section#img_preview figure figcaption .button.right {right:0;}
section#img_preview figure figcaption p {color: #ffffff;position: absolute;left:0;bottom:0;padding: 1%;}
section#img_preview figure figcaption span {position: absolute;top:0;left:0;padding: 1%;color: #888888;}

figure.foto_block figcaption {position: absolute;bottom: 0;right: 0;color: #e43c1e;}
figure.foto_block figcaption .zoom {width: 30px;}


section#foto_gallery ul li {display: inline-block;width: 24.5%;}
section#foto_gallery ul li figure figcaption {background-color: rgba(0,0,0,0.7);color:#ffffff;padding: 2%;width: 100%;transform: translateY(100%);}
section#foto_gallery ul li figure:hover figcaption {transform: translateY(0);}

ul#foto_list:after {content: "";display: block;clear: both;width: 0;height: 0;}
ul#foto_list li {float: left;width:25%;}

рони 12.08.2016 08:56
Роман Андреевич,
строка 1 сформировали html но картинки ещё не подгрузили все.
строка 3 теги картинок есть а содержимого ещё нет.
попробуйте запустить ваш скрипт после загрузки картинок
замените
$(function() {

на
$(window).on('load',function() {

Роман Андреевич 12.08.2016 08:56
В том то и суть. Идея проста. Плагин обрабатывает все картинки на сайте, Они могут быть картиинки для товара (section#1), случайные картинки и галерея.

Экраны по сути то же разные. И нужно что бы картинка подстраивалась под каждый экран. Либо по высоте (100%) либо по ширине. Я пытаюсь сравнить ширину картинки и экрана, если ширина картинки больше экрана то ровнять по высоте если нет, то по ширине

Роман Андреевич 12.08.2016 09:08
section#img_preview это пустой блок, который открывается при нажатии на картинку. Типа просмотр. В него вставляются данные при определенных условиях. Все работает, но вот сформировать размер картинки не получается. Поэтому и прошу помощи у знатоков


Часовой пояс GMT +3, время: 06:05.