reddit list mobile

by gravitybox

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div class="container">
    <div id='reddit-content' class="row"></div>
</div>
        <p id='loadmore'>load more</p>

CSS

body {
    background:#ebeff2;
}
.panel {
    font-size: 1.3em;
    font-family:Montserrat;
    color:#777;
    cursor:pointer;
    overflow:hidden;
}
.panel .front p {
    position:relative;
    height:100%;
    z-index:20;
    padding:20px;
}
.imgclipper {
    overflow:hidden;
    float:left;
    width:80px;
    margin-right:15px;
}
.imgclipper img {
    width:80px;
}
.panel .front {
    z-index: 900;
    width: inherit;
    height: inherit;
    text-align: left;
    background-color:#fff;
    border:1px solid #888;
    border-radius:3px;
    overflow:hidden;
}
.panel .back img {
    position:relative;
    width:100%;
}
.panel .back {
    z-index: 800;
    width: inherit;
    height: inherit;
    background-color:#999;
    border:1px solid #777;
    border-radius:3px;
    display:none;
}

JavaScript

var slicea = 1;
var sliceb = 10;
var numcols = 1;
var col = '<div class="col-md-' + 12 / numcols + '">';
var panel = '<div class="click panel">';
var front = '<div class="front"> ';
var back = '<div class="back">';
var close = '</div>';

$(document).ready(function () {                   
 $( "p" ).click(function() {
            slicea += 10;
            sliceb += 10;
     myreddit()
}); 

    $('#reddit-content').on('click', '.click', function () {
        //$('.click').click(function () {    
        //  var temp = $(this).children('.back').attr('class');
        //  alert(temp);
        $(this).children('.back').slideToggle();        
    });  
    
        $('#loadmore').click( function () {
            slidea += 10;
            slideb +=10;
            alert(slidea);
    });  
    
  
    
});

function myreddit(){

$.getJSON(
    "http://www.reddit.com/r/pics.json?jsonp=?",


function foo(data) {
    $.each(
    data.data.children.slice(slicea, sliceb),

    function (i, post) {


        $("#reddit-content").append(col + panel + front + '<div class="imgclipper"><img src="' + post.data.url + '"/></div>' + '<p>' + post.data.title + '</p>' + close + back + '<img src="' + post.data.url + '"/>' + close + close + close);
        // $("#reddit-content").append(back + 'back ' + post.data.title );
        //$("#reddit-content").append(back + '<img src="' + post.data.url +'"/>');
        //$("#reddit-content").append(' < br > ' + post.data.permalink);
        //$("#reddit-content").append(' < br > ' + post.data.ups);
        //$("#reddit-content").append(' < br > ' + post.data.downs);
        //$("#reddit-content").append('</div>');

    })
})
}
/*
    .success(function () {
    alert("second success");
})
    .error(function () {
    alert("error");
})
    .complete(function () {
    alert("complete");
});


*/
myreddit();