<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tobiasdev/pen/mOyeZO?depth=everything&order=popularity&page=24&q=list&show_forks=false" />
<style class="cp-pen-styles">/* Global */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background: #FFCC80;
color: #444444;
}
/* Cards */
.posts-box {
max-width: 1024px;
margin: 0 auto;
padding: 40px 10px;
text-align: center;
list-style: none;
}
.posts-box li {
display: inline-block;
width: 320px;
max-width: 100%;
padding: 10px;
vertical-align: top;
}
.card {
text-align: left;
border-radius: 2px;
background: #FFFFFF;
box-shadow:
0 2px 4px rgba(0,0,0,0.10),
0 1px 2px rgba(0,0,0,0.22);
}
.card img {
display: block;
width: 100%;
}
.card div {
padding: 16px 20px;
border-bottom: 1px solid #EEEEEE;
}
.card div h3 {
margin: 8px 0;
font-size: .9em;
}
.card div p {
margin: 8px 0;
font-size: .9em;
}
.button {
color: #FFC107;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
}
.button:hover {
opacity: .7;
}
/* Page */
.modal,
.modal-box {
z-index: 900;
}
.modal-sandbox {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
}
.modal {
display: none;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #FFB74D;
overflow: auto;
}
.modal-box {
position: relative;
width: 80%;
max-width: 920px;
margin: 100px auto;
background: #FFFFFF;
animation-name: modalbox;
animation-duration: .3s;
animation-timing-function: ease-out;
}
.modal-header img {
width: 100%;
}
.modal-body {
padding: 60px 8%;
}
.modal-body h2 {
margin-bottom: 30px;
letter-spacing: .06em;
}
.modal-body p {
font-size: .9em;
line-height: 1.5em;
}
@-webkit-keyframes modalbox {
0% {
top: -250px;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
@keyframes modalbox {
0% {
top: -250px;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
button {
min-width: 120px;
top: 50%;
left: 50%;
padding: 16px 32px;
margin: 24px 8px 0 0;
background: transparent;
text-decoration: none;
border: 1px solid #FFC107;
outline: none;
color: #FFC107;
cursor: pointer;
}
.disabled {
opacity: .4;
cursor: auto;
}
@media (max-width: 620px) {
button {
width: 100%;
min-width: auto;
}
}
</style></head><body>
<body>
<!-- Thumbs -->
<ul class="posts-box">
<!-- JSON Here! -->
</ul>
<!-- Modal -->
<div class="modal" id="modal-name">
<div class="modal-sandbox"></div>
<div class="modal-box">
<div class="modal-header">
<img src="" class="inner-img" alt="">
</div>
<div class="modal-body">
<h2 class="inner-title"></h2>
<div class="inner-text"></div>
<button class="prev-post">Previous</button>
<button class="next-post">Next</button>
<button class="close-post">Close</button>
</div>
</div>
</div>
</body>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script >/*
===============================================================
Hi! Welcome to my little playground!
My name is Tobias Bogliolo. 'Open source' by default and always 'responsive',
I'm a publicist, visual designer and frontend developer based in Barcelona.
Here you will find some of my personal experiments. Sometimes usefull,
sometimes simply for fun. You are free to use them for whatever you want
but I would appreciate an attribution from my work. I hope you enjoy it.
===============================================================
*/
/*
=====================
=====================
JSON list
=====================
=====================
*/
var post=[
{
postTitle: "Lorem ipsum dolor",
postAbstract: "Voluptates sit ducimus velit soluta ed doloribus iste commodi deserunt aut unde, numquam illo, unde.",
postContent: "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, molestiae placeat, inventore eligendi qui deserunt asperiores error laboriosam libero blanditiis dignissimos eius molestias cumque necessitatibus est. <b>Quae velit ad cupiditate necessitatibus</b>, facere eum earum ut odio nostrum labore a explicabo quasi voluptates, consequatur obcaecati quos, quis fugiat veniam ea ipsam consequuntur illo!</p><p>Aperiam fugit nulla, praesentium doloremque harum laborum ipsam officia minima. Alias saepe cumque mollitia soluta totam facere, iusto ab officiis cum itaque! Sit sint earum sequi quae mollitia quibusdam adipisci facere explicabo libero nihil! Velit aliquam asperiores possimus eligendi dolore reprehenderit similique suscipit.</p>",
postThumb: "http://tobiasbogliolo.com/assets/imgs/cases/thumb-quinon.jpg",
postImg: "http://tobiasbogliolo.com/assets/imgs/cases/case-quinon5.jpg",
postLink: "article-link1"
},
{
postTitle: "Sit amet consectetur",
postAbstract: "Ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptatum, aliquam quaerat!",
postContent: "<p>Porro, perferendis fugit nulla, praesentium doloremque harum laborum ipsam possimus. In, est optio fugiat itaque inventore suscipit voluptatem quam sit <b>voluptatibus nesciunt</b> quo, cum eius. Dolorem, animi, voluptas?</p><p>Necessitatibus esse tempore iure quasi molestias assumenda vitae, maxime corrupti aut blanditiis, odit facere ad tempora fugiat suscipit nulla consequatur, soluta. Dignissimos cupiditate assumenda voluptatum!</p>",
postThumb: "http://tobiasbogliolo.com/assets/imgs/cases/thumb-inaem.jpg",
postImg: "http://tobiasbogliolo.com/assets/imgs/cases/case-inaem2.jpg",
postLink: "article-link1"
},
{
postTitle: "Adipisicing elit beatae",
postAbstract: "Lorem ipsum dolor sit amet, odit nulla consectetur adipisicing elit. Fugit vero accusamus commodi ex?",
postContent: "<p>Repudiandae voluptatem autem ab maiores <b>quaerat dicta illum</b> deleniti alias iure esse ex temporibus asperiores assumenda beatae veniam sit, eligendi magni quas quod, qui expedita similique error nulla debitis. Debitis <b>nemo ipsam rem dignissimos</b>, dicta repellat nulla nesciunt! Recusandae dicta numquam repellat tempore in cum, expedita. Quidem veniam, eos harum cumque aspernatur labore est enim voluptatibus numquam at ea vel provident facere doloremque. Natus, officiis eos!</p>",
postThumb: "http://tobiasbogliolo.com/assets/imgs/cases/thumb-shigeru.jpg",
postImg: "http://tobiasbogliolo.com/assets/imgs/cases/case-shigeru4.jpg",
postLink: "article-link1"
},
{
postTitle: "Quidem neque commodi",
postAbstract: "Aliquid sapiente harum maiores alias optio, ea vero perferendis impedit architecto culpa libero corporis.",
postContent: "<p>Dolorum eos dignissimos eveniet deserunt veritatis possimus magnam enim, eaque non, architecto voluptates consequuntur nulla, modi nobis sunt perferendis voluptatibus accusantium voluptatem! Delectus iure architecto rem, ex quas necessitatibus illum autem obcaecati sapiente ea inventore quisquam debitis quae numquam. Iusto mollitia suscipit iste quae tempore ipsam facere <b>quia nobis et omnis accusantium quo</b>, quod tenetur, aperiam, rem quos quas eveniet exercitationem. Rem, hic optio. Harum quis porro optio facilis totam velit quibusdam corrupti saepe similique sed aut doloribus temporibus ipsum modi rerum, ab impedit.</p>",
postThumb: "http://tobiasbogliolo.com/assets/imgs/cases/thumb-karuna.jpg",
postImg: "http://tobiasbogliolo.com/assets/imgs/cases/case-karuna2.jpg",
postLink: "article-link1"
},
{
postTitle: "Explicabo obcaecati",
postAbstract: "Iste explicabo, architecto maiores nisi eaque doloribus aspernatur esse tera corporis iure itaque animi?",
postContent: "<p>Voluptatem, similique. Sed doloribus quaerat ratione deleniti esse odit doloremque incidunt, aut, recusandae? Ipsam ipsum voluptas tenetur aut atque tempora ducimus, dolores qui, <b>maiores voluptatibus veniam</b>, quos inventore esse illum adipisci. Error quo officia, distinctio voluptates, possimus voluptatem dignissimos magni dolor, nobis expedita doloribus consequuntur beatae natus iusto ipsum culpa. Delectus pariatur, officia voluptatem, dolore enim cum temporibus deserunt reiciendis at quam labore aperiam, adipisci nesciunt.</p><p>Laborum placeat <b>adipisci ex porro</b>, labore impedit sed nulla perferendis architecto quis vitae laudantium animi, dolorum repudiandae incidunt eaque! Possimus corporis voluptatum aut velit similique facilis fugit quis eaque, fugiat inventore beatae minus nemo soluta quia earum, atque accusamus!</p>",
postThumb: "http://tobiasbogliolo.com/assets/imgs/cases/thumb-vinallonga.jpg",
postImg: "http://tobiasbogliolo.com/assets/imgs/cases/case-vinallonga1.jpg",
postLink: "article-link1"
},
{
postTitle: "Ullam provident",
postAbstract: "Lorem ipsum dolor sit amet eveniet, consectetur adipisicing elit. Numquam repudiandae nam dolore.",
postContent: "<p>Possimus ipsam, aliquid voluptate ab quaerat mollitia deleniti recusandae, voluptas quisquam consequatur porro nesciunt sed commodi reprehenderit, amet earum sapiente sunt, temporibus aut <b>consectetur eligendi</b> laudantium. Cum, eius! Optio tempora unde, non quasi fugit, eos corporis iusto dolores, quam suscipit ipsum cum nesciunt incidunt atque in recusandae amet totam ea fuga! Aliquid similique exercitationem accusamus, et vitae molestiae voluptatum quo earum doloribus <b>nisi hic nesciunt</b>, blanditiis dignissimos. Quia veniam neque facere nesciunt quibusdam distinctio architecto perferendis veritatis? Laboriosam architecto culpa hic aspernatur ratione possimus nostrum mollitia, soluta aliquid reiciendis doloribus.</p>",
postThumb: "http://tobiasbogliolo.com/assets/imgs/cases/thumb-urban.jpg",
postImg: "http://tobiasbogliolo.com/assets/imgs/cases/case-urban4.jpg",
postLink: "article-link1"
}
];
/*
=====================
=====================
Thumbs
=====================
=====================
*/
//Loop length:
var postLength = post.length;
//Empty container:
$(".posts-box").empty();
//Loop:
for (i=0; i<postLength; i++) {if (window.CP.shouldStopExecution(1)){break;}
//Create thumb structure:
var listItem =
'<li>'+
'<div class="card">'+
'<a class="button" href="'+post[i].postLink+'" data-obj="'+i+'">'+
'<img src="'+post[i].postThumb+'" alt="">'+
'</a>'+
'<div>'+
'<h3>'+post[i].postTitle+'</h3>'+
'<p>'+post[i].postAbstract+'</p>'+
'</div>'+
'<div>'+
'<a class="button" href="'+post[i].postLink+'" data-obj="'+i+'">Explore</a>'+
'</div>'+
'</div>'+
'</li>';
//Append thumb:
$(".posts-box").append(listItem);
}
window.CP.exitedLoop(1);
;
/*
=====================
=====================
Inner post
=====================
=====================
*/
var thisElement = 0;
function innerContent(content){
$(".inner-img").attr("src",post[content].postImg);
$(".inner-title").html(post[content].postTitle);
$(".inner-text").html(post[content].postContent);
};
//Open post:
$(".button").click(function(e){
e.preventDefault();
thisElement = $(this).attr("data-obj");
innerContent(thisElement);
$(".modal").css({"display":"block"});
dissBtn();
});
//Close post:
$(".close-post, .modal-sandbox").click(function(){
$(".modal").css({"display":"none"});
});
//Next post:
$(".next-post").click(function(e){
e.preventDefault();
if (thisElement<postLength-1) {
thisElement = parseInt(thisElement) + 1;
innerContent(thisElement);
dissBtn();
};
});
//Prev post:
$(".prev-post").click(function(e){
e.preventDefault();
if (thisElement>0) {
thisElement = parseInt(thisElement) - 1;
innerContent(thisElement);
dissBtn();
};
});
//Button disable:
function dissBtn(){
$(".prev-post, .next-post").removeClass("disabled");
if (thisElement<=0){
$(".prev-post").addClass("disabled");
}
else if (thisElement>=postLength-1){
$(".next-post").addClass("disabled");
};
};
//# sourceURL=pen.js
</script>
</body></html>
