[Jquery] JSON file 읽어서 처리 하는 Javascript

Github.io 페이지에 갤러리 만들기

https://skshpapa80.github.io/photo/?data=1

Photo | 선경선향아빠의 Homepage

위 페이지를 만들 때 JSON 파일에 이미지 정보를 넣고 이미지 정보를 읽어서 위 이미지처럼 뿌리는 javascript입니다. github.io 에 홈페이지를 운영하고 있는데 갤러리를 만들어 보고 싶었습니다. 그런데 일일이 HTML에 입력하는 건 좀 아닌 거 같아서 JSON 을 DB처럼 활용하고 Jquery로 읽어 와서 갤러리처럼 표시하면 될 거 같았습니다.

$(document).ready(function() { 
    $(document).on("click","#open-image",function(e){
        e.preventDefault();
        $(this).ekkoLightbox();
    });
    
    // JSON 파일 읽기
    $.getJSON('photo_' + $.urlParam('data') + '.json', function(data) 
    { 
        var html = []; 
        var chk = 1;
        html.push('<div class="row">');
        $.each(data, function(i, item) 
        { 
            html.push('<div class="col-sm-6 col-md-3">'); 
            html.push('<div class="thumbnail img-responsive">'); 
            html.push('<a href="../assets/images/' + item.imgfilename + '" id="open-image">');
            html.push('<img src="../assets/images/' + item.imgfilename + '" alt="' +item.title + '" class="img-thumbnail">');
            html.push('</a>');
            html.push('<div class="caption">'); 
            html.push('<p>' +item.title + '</p>');
            html.push('</div>'); 
            html.push('</div>'); 
            html.push('</div>'); 
            
            if(chk%4 == 0){
                html.push('</div>'); 
                html.push('<div class="row">'); 
            }
            chk = chk + 1;
        }); 
        
        $('#target').html(html.join(''));
    }); 
});

 

JSON file

github.io 에서 DB를 사용하지 않고 구현하려고 Json 파일을 사용했어요

[
    {
        "title":"2016-03-09 고속버스 터미널에서",
        "imgfilename":"2016-03-09_144153.jpg"
    },
    {
        "title":"2016-02-21 남산한옥마을",
        "imgfilename":"2016-02-21_183947.jpg"
    },
    {
        "title":"2016-01-15 커피머신기",
        "imgfilename":"2016-01-16_130824.jpg"
    },
    {
        "title":"2016-01-12 프로젝트용 공유기",
        "imgfilename":"IMG_20160112_171414.jpg"
    }
]

이미지 표시되는 부분

<div id="target"></div>

 

소스

아래 github 에서 photo 폴더
https://github.com/skshpapa80/skshpapa80.github.io