12.08.2016, 08:03
|
Профессор
|
|
Регистрация: 12.08.2016
Сообщений: 299
|
|
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 + " из " + $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_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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Роман Андреевич,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
12.08.2016, 08:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Роман Андреевич,
если картинка не загружена предварительно то как узнать размеры и почему бы не решить проблему размера на css, без скрипта.
|
|
12.08.2016, 08:49
|
Профессор
|
|
Регистрация: 12.08.2016
Сообщений: 299
|
|
$(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);
});
|
|
12.08.2016, 08:52
|
Профессор
|
|
Регистрация: 12.08.2016
Сообщений: 299
|
|
<!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
|
Профессор
|
|
Регистрация: 12.08.2016
Сообщений: 299
|
|
* {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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Роман Андреевич,
строка 1 сформировали html но картинки ещё не подгрузили все.
строка 3 теги картинок есть а содержимого ещё нет.
попробуйте запустить ваш скрипт после загрузки картинок
замените
$(function() {
на
$(window).on('load',function() {
|
|
12.08.2016, 08:56
|
Профессор
|
|
Регистрация: 12.08.2016
Сообщений: 299
|
|
В том то и суть. Идея проста. Плагин обрабатывает все картинки на сайте, Они могут быть картиинки для товара (section#1), случайные картинки и галерея.
Экраны по сути то же разные. И нужно что бы картинка подстраивалась под каждый экран. Либо по высоте (100%) либо по ширине. Я пытаюсь сравнить ширину картинки и экрана, если ширина картинки больше экрана то ровнять по высоте если нет, то по ширине
|
|
12.08.2016, 09:08
|
Профессор
|
|
Регистрация: 12.08.2016
Сообщений: 299
|
|
section#img_preview это пустой блок, который открывается при нажатии на картинку. Типа просмотр. В него вставляются данные при определенных условиях. Все работает, но вот сформировать размер картинки не получается. Поэтому и прошу помощи у знатоков
|
|
|
|