Форум

Otvertka12335 · #1 (**permalink**) 04.01.2018, 16:05

У меня есть картинки и скрипт для их увелечения. Он работает, НО. Если нажать на картинку внизу страницы, она увеличится вверху, что не есть удобным, как это изменить?

javascript:

$(document).ready(function() { // Ждём загрузки страницы
	
				$(".image").click(function(){	// Событие клика на маленькое изображение
					var img = $(this);	// Получаем изображение, на которое кликнули
					var src = img.attr('src'); // Достаем из этого изображения путь до картинки
					$("body").append("<div class='popup'>"+ //Добавляем в тело документа разметку всплывающего окна
									 "<div class='popup_bg'></div>"+ // Блок, который будет служить фоном затемненным
									 "<img src='"+src+"' class='popup_img' />"+ // Само увеличенное фото
									 "</div>"); 
					$(".popup").fadeIn(800); // Медленно выводим изображение
					$(".popup_bg").click(function(){	// Событие клика на затемненный фон	   
						$(".popup").fadeOut(800);	// Медленно убираем всплывающее окно
						setTimeout(function() {	// Выставляем таймер
						  $(".popup").remove(); // Удаляем разметку всплывающего окна
						}, 800);
					});
				});
				
			});

CSS:

body {
	margin:0;
}

.image {
	margin:30px; 
	float:left;
	cursor:pointer;
	max-height:100px;
}

.popup {
	position: absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	display:none;
	text-align:center;
}

.popup_bg {
	background:rgba(0,0,0,0.4);
	position:absolute;
	z-index:1;
	height:100%;
	width:100%;
}


.popup_img {
	position: relative;
	margin:0 auto;
	z-index:2;
	text-align: center;
	max-height:94%;
	max-width:94%;
	margin:10% 0% 0% 0%;
}

рони · #2 (**permalink**) 04.01.2018, 18:59

Otvertka12335,
вариант ... картинка в центре окна по клику на preview ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
* {
    box-sizing: border-box;
}

.fixed-overlay {
    position: fixed;
    overflow: auto;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 90%;
    transform: scale(0);
    transition: 1.2s ;


}
.fixed-overlay.open{

  transform: scale(1);
  transition-duration: .8s;
  transition-timing-function:cubic-bezier(.18,1.59,.78,1.6);
  animation: bc 1.2s ease-in-out forwards .8s;
}

.image {
  margin:30px;
  float:left;
  cursor:pointer;
  max-height:100px;
}

p{
  height: 2000px;
}

@keyframes bc{
  100%{
    background-color: rgba(0, 0, 0, .8)
  }

}
@-webkit-keyframes bc{
  100%{
    background-color: rgba(0, 0, 0, .8)
  }

}
</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  var a = $(".fixed-overlay");
  $(".image").on("click", function(e) {
    var o = e.clientX + "px "+e.clientY + "px";
    a.css({"background-image":"url(" + this.src + ")", "transform-origin" : o}).addClass("open");
  });
  a.on("click", function(b) {
    a.removeClass("open");
  });
});
  </script>
</head>

<body>
<img src="http://superwall.us/wallpaper/y5e6_yt_iuyy_yut_abstract_fantasy-SKOI.jpg" alt="" class="image">
<img src="http://mtdata.ru/u18/photoD2A8/20290971193-0/original.jpeg" alt="" class="image">
<img src="https://img3.goodfon.ru/original/1920x1408/b/61/art-devushka-vzglyad-zrachok.jpg" alt="" class="image">
<p></p>
<img src="http://www.снежинки-добавил-dmytrij82-www.setwalls.ru/pic/201304/2560x1440/setwalls.ru-24633.jpg" alt="" class="image">
<img src="https://grandgames.net/puzzle/source/devushka_i_drakoni.jpg" alt="" class="image">
<img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-281479.jpg" alt="" class="image">
<div class="fixed-overlay"></div>
</body>
</html>

Otvertka12335 · #3 (**permalink**) 05.01.2018, 11:34

Сообщение от рони

вариант ... картинка в центре окна по клику на preview ...

Спасибо. Все работает. ~~НО есть проблемка, фото после закрытия сохраняються внизу страницы~~ Прошу прощения, это мой старый скрип вызывал конфликт

рони · #4 (**permalink**) 05.01.2018, 19:03

вариант на основе 1 сообщения в теме ... кнопку закрыть смотреть на последнем фото ... строки 65 и 181 для проверки

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">body{
    margin:0;
  }

  .image{
    margin:30px;
    float:left;
    cursor:pointer;
    max-height:100px;
  }

  .popup{
    position:absolute;
    height:auto;
    width:100%;
    top:0;
    left:0;
    display:none;
    text-align:center;
    min-height:100%;
  }

  .popup_bg{
    background:rgba(0,0,0,0.4);
    position:absolute;
    z-index:1;
    height:100%;
    width:100%;
  }

  .popup_bg:after{
    content:"X";
    color:#FFF;
    font-size:24px;
    position:fixed;
    right:-55px;
    top:40px;
    z-index:100;
  }

  .popup_img{
    position:relative;
    margin:3% auto;
    z-index:2;
    text-align:center;
    max-height:94%;
    max-width:94%;
    border:solid rgba(255,255,255,1) .5em;
  }

  body.hide *{
    display:none;
  }

  body.hide .popup *{
    display:block;
  }

  p{
    height:2000px;
  }

  .open-close-button{
    margin-top:3%;
    top:1%;
    z-index:100;
    left:93%;
    display:inline-block;
    width:.5em;
    height:.5em;
    font-size:3em;
    border-radius:50%;
    position:absolute;
    transition:top 1.2s ease-in-out;
  }

  .open-close-button:before,.open-close-button:after{
    transform:rotate(135deg);
    content:"";
    display:block;
    position:absolute;
    background:#FFF;
    width:80%;
    height:12%;
    left:12%;
    top:44%;
  }

  .open-close-button:after{
    transform:rotate(45deg);
  }

  .open-close-button.shadow{
    animation:bc 1.2s ease-in-out forwards;
  }

  .open-close-button:hover{
    cursor:pointer;
    animation:bc 1.2s ease-in-out infinite;
  }

  @keyframes bc{
    0%{
      background-color:rgba(224,255,255,.3);
      box-shadow:0px 0px 58px 0px rgba(224,255,255,1);
      transform:scale(1.2);
    }

    25%{
      transform:scale(1);
      box-shadow:0px 0px 0px 0px rgba(224,255,255,1);
    }

    50%{
      box-shadow:0px 0px 58px 0px rgba(224,255,255,1);
      transform:scale(1.2);
    }

    75%{
      transform:scale(1);
      box-shadow:0px 0px 0px 0px rgba(224,255,255,1);
    }

    100%{
      background-color:transparent;
      box-shadow:none;
    }
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  var d, a = $(window), e = $("body"), f;
  $(".image").click(function() {
    function b() {
      window.clearTimeout(f);
      f = window.setTimeout(function() {
        var b = g.getBoundingClientRect();
      c.style.top = b.top < 0 ? a.scrollTop()+"px" : "";
      c.style.marginTop = b.top < 0 ? '5px' : '3%';
        c.style.left = b.right - 37 + "px";
        c.classList.add("shadow");
      }, 80);
    }
    d = a.scrollTop();
    var h = this.src;
    e.addClass("hide").append("<div class='popup'><div class='open-close-button'></div><div class='popup_bg'></div><img src='" + h + "' class='popup_img' /></div>");
    a.scrollTop(0);
    var g = document.querySelector(".popup_img"), c = document.querySelector(".open-close-button");
    a.resize(b).trigger("resize");
    $(".open-close-button").on("transitionend", function(a) {
      $(this).removeClass("shadow");
    });
    $(".popup").fadeIn(800);
    $(document).on("scroll", b);
    $(".popup_bg, .open-close-button").click(function() {
      $(".popup").fadeOut(800, function() {
        e.removeClass("hide");
        a.scrollTop(d);
        $(document).off("scroll", b);
        a.off("resize", b);
        $(".popup").remove();
      });
    });
  });
});
  </script>
</head>

<body>
<img src="https://img.fonwall.ru/o/0x/devushka-i-drakon-fantastika-art.jpg" alt="" class="image">
<img src="http://mtdata.ru/u18/photoD2A8/20290971193-0/original.jpeg" alt="" class="image">
<img src="https://img3.goodfon.ru/original/1920x1408/b/61/art-devushka-vzglyad-zrachok.jpg" alt="" class="image">
<p></p>
<img src="http://www.снежинки-добавил-dmytrij82-www.setwalls.ru/pic/201304/2560x1440/setwalls.ru-24633.jpg" alt="" class="image">
<img src="https://grandgames.net/puzzle/source/devushka_i_drakoni.jpg" alt="" class="image">
<img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-281479.jpg" alt="" class="image">

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript