신과함께 뷰어

by Reiot

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css">
<h1 class="ui-widget-header">Naver Comic Viewer</h1>
    <div class="ui-widget-content">
    <label for="titleID">Title ID</label>
    <select id="titleID"><option value="119877">신과함께</option>
    </select>
    <label for="no">Page</label>
    <input type="text" id="no" value="1"/>
    <div class="buttonset" style="float: right; font-size: 12px;">
        <button class="prev">Prev</button>
        <button class="load">Load</button>
        <button class="next">Next</button>        
    </div>        
    <div id="pages"></div>
</div>

JavaScript

$('.buttonset').buttonset();
$('button.prev').button().click(function(){
    var no = parseInt($('#no').val());
    if(no>1) {
        $('#no').val(no-1);
        loadImage();
    }
});
$('button.next').button().click(function(){
    var no = parseInt($('#no').val());
    $('#no').val(no+1);
    loadImage();
});
$('button.load').button().click(function(){
    loadImage();
});
function loadImage(){
    $.getJSON('http://reiot.appspot.com?callback=?',{
        titleid: $('#titleID').val(),
        no: $('#no').val()
    }, function(data){
        console.log(data);
        $('<img>').attr('src',data.image).appendTo('#pages');
        if( $('#pages img').length>3){
            $('#pages img:first').remove();
        }

    });                                
}
loadImage();

$(window).scroll(function(){  
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){  
           $('button.next').click();
        }  
});