<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="container" style="font-family: 'Strait', sans-serif;">
<div class="row">
<h2 class="main-list">List items with json</h2>
<div id="example"></div>
</div>
<div class="row">
<a href="https://bootsnipp.com/snippets/ZaAVl" target="_blank" class="btn btn-success">get from github json</a>
</div>
</div>
/* list item Restriction. */
.main-list {
padding-left: .5em;
}
.main-list .media {
/* margin-top: 20px; */
padding-bottom: 1.1em;
border-bottom: 1px solid #3C3C3C;
}
.main-list .media:first-child {
/* border-top: 2px solid blue;*/
padding-top:15px;
}
.main-list .media:last-child {
/*border: none;*/
border-bottom: 1px solid #D6D6D6;
}
.habertext {
border: 1px solid #D9534F;
}
/* list item shortening a long sentence. */
#listitem {
overflow: hidden;
width:100%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.image-container {
width: 150px;
height: 100px;
overflow: hidden; /* Dışarı taşan kısmı gizle */
position: relative;
border-radius: 5px; /* Köşeleri yuvarlatır */
}
.image-container img {
width: 100%; /* Genişliği kapsayacak şekilde ayarla */
height: auto; /* Oranı koru (sıkıştırma yok) */
display: block;
position: relative;
top: 0; /* Gerekirse yukarıdan kırp */
}
$(document).ready(function() {
// json list
var data = {
"example": [{
"haberImgUrl": "https://observation.org/media/photo/46744451.jpg",
"haberTitle": "Colobus",
"haberText": "Colobus is simply dummy text of the printing and typesetting industry.",
"haberUrl": "https://en.wikipedia.org/wiki/Red_colobus"
}, {
"haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17AQbDsnhpPf0nxqd1lKg3xzFP59Ase7JkY1CI2LOSVPiigyeMsPIjGUbD2el3qmnvMSkyvqjzneVtS4bhbukcCKQfs4V8Yliz9H_1dRSk5OHqkT8QkGBYp3C7FRFg7nCT-U3NnZ_syFgHSkcbiBUzbi3j-NY4j0GVhUFdIikWBUuty92QAkoZrc8pV16/s518/eagle.jpg",
"haberTitle": "Bald Eagle",
"haberText" : "Bald Eagle is simply dummy text of the printing and typesetting industry.",
"haberUrl": "https://en.wikipedia.org/wiki/Bald_eagle"
}, {
"haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_TdgzR3iOmGCzVCGCrIFmdxCJlPbikcneeYhQbtuNdZsvOXWPjy6M7WiJXFalTWLzb_HlkVGFKd6d-lRECI5awOekrK5gPCrVE-ZPRXGZ6mF1Pc0DryeajLprb3MLcridAKqfX5kU10nb8NFTyHcnpX5txGLi64KkR3G9LhbW7LWBRJviAzecnln8G1Z/s518/elephant.jpg",
"haberTitle": "African Elephant",
"haberText" : "African Elephant is simply dummy text of the printing and typesetting industry.",
"haberUrl": "https://en.wikipedia.org/wiki/African_elephant"
}, {
"haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwTZ_5LjFqnXDQx2Vy-_WhqThY3JcO3VMvhqpcpYiyLbFDkX6yCpT_9bXcDmIcJ7vAZQ5moGKwswFrxt5JZuibuORhS8b3w1Bdhgg7W4kxIPYvXjM0rcAnhSjjKhsSWhs8NpH5naNZJ0kdMjWCYKziIpdy_VbkaEyPJm-woV-1UQZm65jQha_vHYljO60/s518/ivanovic.jpg",
"haberTitle": "Ana ivanovic",
"haberText" : "Ana ivanovic is simply dummy text of the printing and typesetting industry.",
"haberUrl": "https://en.wikipedia.org/wiki/Ana_Ivanovic"
}, {
"haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s518/lion.jpg",
"haberTitle": "lion",
"haberText" : "Lion is simply dummy text of the printing and typesetting industry.",
"haberUrl": "https://en.wikipedia.org/wiki/Panthera_leo_melanochaita"
}, {
"haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp_5UOnwG08ciFaMVPVebxAEmLQvwwqkHF-Ks7EYqe5yeIfiLM5tjL2by_TPztgRxb_u09PSxUeJfwp2ESTK7h1LeWD9FJt_3_fwKIpZloU341Vjp6FiI49-82eKeizkeGnz4e6B-ZgYnS7SxKXF60nqFeh7o71DNYrVpRXHFM3pfvoknxyn7zgvYRhLC/s518/lizard.jpg",
"haberTitle": "lizard",
"haberText" : "Lizard is simply dummy text of the printing and typesetting industry.",
"haberUrl": "https://en.wikipedia.org/wiki/Lizard"
}, {
"haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcRlWMXJAYstGEw6LQAJ6WdK2xdXs5veW4tLxETzua0tqpxODsqZXExvIXl3gVQMnAb2sVL84_WBM9mGv_u6WYyUtt4B7N82iiy6KceAwel9y4mYxq2Dw9Fi0XnatN16HEPVXOaTPn7Z2ISVQNdFmiaeM3fZNK8QZKXEEn9XOmSCmv1SB3OHDZFTX6vmK/s518/squid.jpg",
"haberTitle": "Squid",
"haberText" : "Squid is simply dummy text of the printing and typesetting industry.",
"haberUrl": "https://en.wikipedia.org/wiki/Squid"
}]
};
// listing
var output = '<ul class="media-list main-list" style="border-top: 2px solid red;" >';
$.each(data.example, function(key, unsur) {
output += "<li class='media'><a class='pull-left' href='" + unsur.haberUrl +"'><div class='image-container'><img class='media-object img-responsive img-rounded' src='"+unsur.haberImgUrl+"''></div></a><div class='media-body'><h4 class='media-heading'>" + unsur.haberTitle + "</h4><p id='listitem' class='by-author'>" + unsur.haberText + "</p><div class='btn-toolbar' style='margin-top:10px;'><a href='"+ unsur.haberUrl + "' class='btn btn-lg btn-danger habertext'>Habere Git <span class='glyphicon glyphicon-chevron-right'></span></a></div></li>"
});
output += "</ul>";
$('#example').append(output);
});
