$(function() {
function resize($image) {
var maxH = 500;
var maxW = 500;
var theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;
if((imgwidth > maxW)||(imgheight > maxH)){
if(imgwidth > imgheight){
var newwidth = maxW;
var ratio = imgwidth / maxW;
var newheight = imgheight / ratio;
theImage.height = newheight;
theImage.width = newwidth;
if(newheight>maxH){
var newnewheight = maxH;
var newratio = newheight/maxH;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
}
else{
var newheight = maxH;
var ratio = imgheight / maxH;
var newwidth = imgwidth / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newwidth>maxW){
var newnewwidth = maxW;
var newratio = newwidth/maxW;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
}
}
$image.css({
"width": theImage.width+"px",
"height": theImage.height+"px",
"margin-top": -(theImage.height / 2) + "px",
"margin-left": -(theImage.width / 2) + "px"
});
}
function rotatePhoto($image) {
var randomDegree = Math.floor((Math.random() * -40) + 20);
$image.css({
"transform": "rotate(" + randomDegree + "deg)"
});
}
// 맨 처음 .box들 위치 잡기
(function() {
var left = 0;
var delay = 1400;
$(".box").each(function(i) {
if (i >= 5)
return;
$(this).addClass("on").animate({
"left": left + "px"
}, delay -= 50);
left += 165;
});
})();
var isAnim = false;
// 오른쪽버튼 클릭 op
$("#right").on("click", function() {
// 작동 방지
if (isAnim)
return;
if ($(".box").last().hasClass("on"))
return;
isAnim = true;
$(".on").first().removeClass("on").animate({
"left": "-=300px",
"opacity": 0
}, 500, function() {
$(this).hide();
$(".on").animate({
"left": "-=165px"
}, 500).promise().done(function() {
$(".on").last().next().show().addClass("on").animate({
"left": "660px",
"opacity": 1
}, 500, function() {
isAnim = false;
});
});
});
});
// cl
// 왼쪽버튼 클릭 op
$("#left").on("click", function() {
// 작동 방지
if (isAnim)
return;
if ($(".box").first().hasClass("on"))
return;
isAnim = true;
$(".on").last().removeClass("on").animate({
"left": "+=300px",
"opacity": 0
}, 500, function() {
$(this).hide();
$(".on").animate({
"left": "+=165px"
}, 500).promise().done(function() {
$(".on").first().prev().show().addClass("on").animate({
"left": "0px",
"opacity": 1
}, 500, function() {
isAnim = false;
});
});
});
});
// cl
$(".box").on("click", function() {
if (isAnim)
return;
isAnim = true;
var $this = $(this);
$this.children(".loading").show();
$this.addClass("loading");
var idx = $(this).index();
console.log("idx: " + idx);
//JSfiddle에 XML 데이터를 넘기기 위한 ajax처리
$.ajax({
type: "POST",
url: "/echo/xml/",
data: {
xml: `<?xml version='1.0' encoding='utf-8'?>
<xml>
<image>
<url>http://placehold.it/501x701</url>
<url>http://placehold.it/301x1501</url>
<url>http://placehold.it/1501x351</url>
</image>
<image>
<url>http://placehold.it/502x702</url>
<url>http://placehold.it/302x1502</url>
<url>http://placehold.it/1502x352</url>
</image>
<image>
<url>http://placehold.it/503x703</url>
<url>http://placehold.it/303x1503</url>
<url>http://placehold.it/1503x353</url>
</image>
<image>
<url>http://placehold.it/504x704</url>
<url>http://placehold.it/304x1504</url>
<url>http://placehold.it/1504x354</url>
</image>
<image>
<url>http://placehold.it/505x705</url>
<url>http://placehold.it/305x1505</url>
<url>http://placehold.it/1505x355</url>
</image>
<image>
<url>http://placehold.it/506x706</url>
<url>http://placehold.it/306x1506</url>
<url>http://placehold.it/1506x356</url>
</image>
<image>
<url>http://placehold.it/507x707</url>
<url>http://placehold.it/307x1507</url>
<url>http://placehold.it/1507x357</url>
</image>
<image>
<url>http://placehold.it/508x708</url>
<url>http://placehold.it/308x1508</url>
<url>http://placehold.it/1508x358</url>
</image>
</xml>`
},
dataType: "xml",
success: function(xml) {
var $xml = $(xml);
var lastIdx = $xml.find("image").eq(idx).children("url").length;
var imgContainer = [];
// 이미지 로드 순서는 일정하지 않으므로, 로드카운터를 만든다.
var loadCount = 0;
$xml.find("image").eq(idx).children("url").each(function(i) {
var delay = 500;
var imgURL = $(this).text();
$("<img/>").on("load", function() {
// 이미지가 하나씩 로드될 때마다 로드 카운터 숫자를 올린다.
loadCount++;
resize($(this));
rotatePhoto($(this));
imgContainer[i] = $(this);
// 이미지 로드 카운터가 총 이미지 갯수와 같아지면 이미지를 append시킨다.
if (loadCount === lastIdx) {
for (var imgIdx = 0; imgIdx < imgContainer.length; imgIdx++)
imgContainer[imgIdx].appendTo("#photo-container");
$("#photo-wrapper").show();
$this.children(".loading").hide();
$this.removeClass("loading");
$("#photo-container").children(":last").addClass("top").css("transform", "rotate(0deg)");
}
}).attr("src", imgURL);
});
},
error: function() {
console.log("FAIL");
},
complete: function() {
//isAnim = false;
}
});
});
// 사진 뒤로 넘기기
$(document).on("click", ".top", function() {
console.log(".top click!");
var maxLeft = 300,
maxTop = 300;
//$(this).removeClass("top");
$(this).siblings().each(function() {
maxLeft = ($(this).width() >= maxLeft) ? $(this).width() : maxLeft;
maxTop = ($(this).height() >= maxTop) ? $(this).height() : maxTop;
});
console.log("maxLeft: " + maxLeft + ", maxTop: " + maxTop);
$(this).siblings(":last").css("transform", "rotate(0deg)");
$(this).removeClass("top").animate({
"top": "-=" + maxTop + "px",
"left": "+=" + maxLeft + "px"
}, 500, function() {
$(this).prependTo($("#photo-container")).animate({
"top": 0,
"left": 0
}, 500, function() {
rotatePhoto($(this));
$(this).siblings(":last").addClass("top");
});
});
});
// 사진창 닫기
$("#close-button").on("click", function() {
$("#photo-wrapper").fadeOut(500, function() {
$("#photo-container").empty();
});
isAnim = false;
});
});
<div id="container">
<div id="box-wrapper">
<div id="left">←</div>
<div id="right">→</div>
<ul id="box-container">
<li class="box" style="left: 2300px">
<div class="loading"></div>
<div class="thumb"></div>
<div class="contents">
<h2 class="title">TITLE1</h2>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="photo" style="display: none;">
<img src="http://placehold.it/500x700"/>
<img src="http://placehold.it/400x200"/>
<img src="http://placehold.it/1200x700"/>
</div>
</li>
<li class="box" style="left: 2300px">
<div class="loading"></div>
<div class="thumb"></div>
<div class="contents">
<h2 class="title">TITLE2</h2>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="photo" style="display: none;">
</div>
</li>
<li class="box" style="left: 2300px">
<div class="loading"></div>
<div class="thumb"></div>
<div class="contents">
<h2 class="title">TITLE3</h2>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="photo" style="display: none;">
</div>
</li>
<li class="box" style="left: 2300px">
<div class="loading"></div>
<div class="thumb"></div>
<div class="contents">
<h2 class="title">TITLE4</h2>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="photo" style="display: none;">
</div>
</li>
<li class="box" style="left: 2300px">
<div class="loading"></div>
<div class="thumb"></div>
<div class="contents">
<h2 class="title">TITLE5</h2>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="photo" style="display: none;">
</div>
</li>
<li class="box" style="left: 2300px; display: none;">
<div class="loading"></div>
<div class="thumb"></div>
<div class="contents">
<h2 class="title">TITLE6</h2>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="photo" style="display: none;">
</div>
</li>
<li class="box" style="left: 2300px; display: none;">
<div class="loading"></div>
<div class="thumb"></div>
<div class="contents">
<h2 class="title">TITLE7</h2>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="photo" style="display: none;">
</div>
</li>
<li class="box" style="left: 2300px; display: none;">
<div class="loading"></div>
<div class="thumb"></div>
<div class="contents">
<h2 class="title">TITLE8</h2>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="photo" style="display: none;">
</div>
</li>
</ul>
</div>
<div id="photo-wrapper" style="display: none;">
<div id="photo-container"></div>
<span id="close-button">X</span>
</div>
</div>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
html {
background-color: #111;
overflow-x: hidden;
}
#box-wrapper {
position: relative;
top: 100px;
width: 820px;
height: 330px;
margin: 0 auto;
}
#left,
#right {
position: absolute;
width: 16px;
height: 16px;
top: 50%;
margin-top: -8px;
color: #fff;
font-size: 7px;
background-color: #000;
text-align: center;
line-height: 16px;
z-index: 11;
cursor: pointer;
}
#left {
left: -20px;
}
#right {
right: -20px;
}
#box-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.box {
position: absolute;
box-sizing: border-box;
width: 160px;
height: 330px;
background-color: #333;
border: 1px solid #444;
text-align: center;
font-size: 0;
cursor: pointer;
z-index: 10;
}
.thumb {
position: relative;
display: inline-block;
margin-top: 10px;
width: 130px;
height: 80px;
background-image: url(http://placehold.it/130x80);
box-shadow: 2px 2px 3px #000;
}
.contents {
position: relative;
display: inline-block;
margin-top: 20px;
width: 130px;
height: 200px;
background: linear-gradient(135deg, #0e0e0e 0%, #3d3d3d 100%);
}
.box:hover,
.box.loading {
background-color: #444;
}
.box:hover .contents,
.box.loading .contents {
background: #000;
}
.box > .loading {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://tympanus.net/Tutorials/PhotoStack/images/loading.gif) no-repeat center center;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
}
.title {
font-size: 20px;
color: #fff;
text-shadow: 1px 1px 3px #000;
padding: 10px;
margin: 0 10px;
border-bottom: 0.8px solid #000;
}
.text {
padding-top: 10px;
margin: 0 10px;
border-top: 0.8px solid #444;
font-size: 10px;
color: #555;
text-align: left;
}
#photo-wrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
font-size: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 100;
}
#photo-container {
position: absolute;
width: 0;
height: 0;
top: 50%;
left: 50%;
}
#photo-container > img {
position: absolute;
border: 7px solid #fff;
cursor: pointer;
}
#close-button {
display: inline-block;
position: fixed;
width: 30px;
height: 30px;
top: 10%;
right: 10%;
line-height: 30px;
background-color: #000;
border: 1px solid #fff;
cursor: pointer;
font-size: 20px;
color: #fff;
}