Attractive and beautiful article cards in dynamic JSON request data. Developed using JavaScript, jQuery, CSS, HTML. Demo and Download the zip (*.zip).
This tutorial covers awesome article navigations with previous, next and close button options.
Dynamic JSON Articles Card List using JavaScript
HTML Snippet
<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>CSS Snippet
.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;
}
}jQuery Snippet
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 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 mollitia soluta totam facere, iusto ab officiis 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, 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, expedita. Quidem veniam, eos harum 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 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. eius! Optio tempora unde, non quasi fugit, eos corporis iusto dolores, quam suscipit ipsum 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"
}
];
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");
};
};
Find the demo below
See the Pen JSON | Articles Cards (Dynamic List) by Tobias Bogliolo (@tobiasdev) on CodePen.
Leave a Reply