// Images from http://megatruh.deviantart.com/
$(document).ready(function() {
var photos = [{
image: "http://pre04.deviantart.net/ef3d/th/pre/f/2014/046/3/e/quiet_calamity_by_megatruh-d76k76f.jpg",
caption: "Image one caption"
},
{
image: "http://pre07.deviantart.net/6c73/th/pre/f/2014/119/7/7/island___by_megatruh-d7ginlh.jpg",
caption: "Image two caption"
},
{
image: "http://pre05.deviantart.net/dce1/th/pre/f/2013/361/7/d/somnium_by_megatruh-d6zloar.jpg",
caption: "Image three caption"
},
{
image: "http://pre03.deviantart.net/7139/th/pre/f/2013/067/d/8/the_world_is_ahead___by_megatruh-d5xchxw.jpg",
caption: "Image four caption"
},
{
image: "http://pre02.deviantart.net/265c/th/pre/f/2012/326/4/0/a_worthy_brother___by_megatruh-d5luhah.jpg",
caption: "Image five caption"
},
{
image: "http://pre12.deviantart.net/d18b/th/pre/f/2012/272/d/e/in_asgard___by_megatruh-d5g8nah.jpg",
caption: "Image six caption"
}
];
var direction = 1,
animation = false,
nbPhotos = photos.length,
gallery = $("#gallery");
function init() {
for (var i = nbPhotos - 1; i >= 0; i--) {
var color = 255 - i * 10,
bgColor = "rgba(" + color + ", " + color + ", " + color + ", 1)",
card = $("<div>");
card
.addClass("photo")
.css({
top: i * -6 + "px",
left: i * 4.5 + "px",
width: 100 - i * 5 + "%",
background: bgColor
})
.appendTo(gallery);
//Append caption container to the card
///////////////////////////////////////
var captionContainer = $("<div>")
.addClass("captionContainer")
.html(photos[i].caption)
.appendTo(card);
//////////////////////////////////////
var imgContainer = $("<div>")
.addClass("imgContainer")
.appendTo(card);
var img = $("<img>")
.attr("src", photos[i].image)
.appendTo(imgContainer);
}
$(".photo").on("click", function() {
if ($(this).index() == $(".photo").length - 1 && animation == false)
swipePhoto(this);
});
}
function swipePhoto(elem) {
animation = true;
var photo = $(elem);
var animationsDone = 0;
function animationDone() {
animationsDone++;
if (animationsDone >= nbPhotos) {
$(".photo").attr("animating", false);
animation = false;
}
}
// Animation: photo swipe
photo.attr("animating", true);
photo.animate({
top: "+=" + 30,
left: direction + "=" + 250
},
500,
"easeInQuart",
function() {
// Photo goes behind all photos (DOM)
photo.detach();
photo.prependTo(gallery);
var color = 255 - 4 * 10;
var bgColor = "rgba(" + color + "," + color + "," + color + ", 1)";
// Animation of the photo going behind
photo
.animate({
top: (nbPhotos - 1) * -6 + "px",
left: (nbPhotos - 1) * 4.5 + "px",
width: 100 - (nbPhotos - 1) * 5 + "%"
},
900,
"easeOutQuart",
animationDone
)
.css("background", bgColor);
}
);
// Update animation direction
if (direction == "+") direction = "-";
else direction = "+";
// Animation : each photo move to his correct position
var j = 0;
for (var i = nbPhotos - 1; i >= 0; i--) {
var color = 225 + i * 12;
var bgColor = "rgba(" + color + "," + color + "," + color + ", 1)";
if ($(".photo:eq(" + i + ")").attr("animating") !== "true") {
$(".photo:eq(" + i + ")")
.delay((nbPhotos - i + 1) * 150)
.animate({
top: j * -6 + "px",
left: j * 4.5 + "px",
width: 100 - j * 5 + "%"
},
500,
"easeOutBack",
animationDone
)
.css("background", bgColor);
j++;
}
}
}
init();
});
@import url("https://fonts.googleapis.com/css?family=Karla");
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
color: #F0E5ED;
font-family: 'Karla', sans-serif;
text-shadow: 0 3px 30px rgba(0, 0, 0, 0.2);
text-align: center;
background: #9cafbc;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.heading,
#gallery {
justify-content: center;
align-content: center;
width: 200px;
}
.heading {
margin-bottom: 30px;
}
.heading h1 {
margin: 0 auto 5px;
letter-spacing: -2px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.heading span {
font-size: .65em;
font-weight: 900;
letter-spacing: .1rem;
text-transform: uppercase;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
#gallery {
position: relative;
display: inline-block;
margin: 30px 20px 0 0;
height: 200px;
}
#gallery .photo {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
padding: 10px;
background: linear-gradient(to bottom, #FFFFFF, #CFCFCF, #FFFFFF);
border-radius: 2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
#gallery .photo:last-child {
cursor: pointer;
}
#gallery .photo .captionContainer {
position: absolute;
margin: 0 auto;
padding: 4px;
bottom: 9px;
text-align: center;
background: black;
opacity: 0.5;
display: block;
}
#gallery .photo .imgContainer {
height: 200px;
border: 1px solid rgba(0, 0, 0, 0.3);
overflow: hidden;
}
#gallery .photo .imgContainer img {
max-width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
<div class="container">
<div class="heading">
<h1>Gallery concept</h1>
<span>Click on the first image</span>
</div>
<div id="gallery"></div>
</div>
あなたを助けるために喜んで。あなたの問題を解決するのに役立つなら、それを正解とマークすることができます。 – Thusitha
ありがとうございました.. 実際には、タイトル（キャプション）を独立したものにしたいと思いました。 イメージタグから独立したdivになるように..（その下に） –