Увелечение картинки по клику [Архив форума]

Просмотр полной версии : Увелечение картинки по клику

Otvertka12335

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%;
}

рони

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

05.01.2018, 11:34

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

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

рони

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>