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

 

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

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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(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(''));
    }); 
});
cs

JSON file

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[
    {
        "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"
    }
]
cs
이미지 표시되는 부분

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

소스

아래 github 에서 photo 폴더

댓글

댓글 쓰기

이 블로그의 인기 게시물

2025년 7월 다이어리

이미지
인형뽑기 요즘 인형 뽑기에 취미가 생겨서 돌아다니다가 너무 더울 때에는 시원한 인형 뽑기 방에 들어가서 한두 개씩 뽑아가지고 온다. 뽑기 방 마다 에어컨 시설이 잘되어 있더라.  대형 미피, 대파인형 뽑았을때 집사람이랑 아이들이 좋아하면  그건 즐거운 일이다! 그래서 인형뽑기를 잘하고 싶어 졌다.  7월 25일 민생 소비 쿠폰 신청 4인 가족인데 집사람은 따로 신청이 되어 내 거에 아이들 거까지 45만 원을 받고 집사람은 15만 원을 받았다. 신청은 주로 사용하는 하나카드에 신청하였고 내 하나카드는 집사람이 들고 다닌다.
자세한 내용 보기

1. 대학교 축제 전시 프로젝트

시작 제가 예전에(1999년도) 대학교 다니면서 동아리 활동을 하였습니다. 나름 전산 동아리라고 매년 학교 축제 때 주점도 하지만 강의실을 한 곳 빌려서 자작 프로그램을 전시합니다. 그때 전시할 프로그램 만드는 활동을 PG라고 합니다. 팀을 만들어서 한 달 동안 합숙하면서 프로그램을 만드는 건데 좋은 추억이 될 거 같아서? 저도 PG에 참여하게 되었습니다. 그때만 해도 프로그래밍을 처음 배울 때라서 실력도 없고 프로그램을 어떻게 만들어야 할지 몰랐는데 PG를 한다고 주제도 정하고 언어도 정하고 친구 집 지하에 숙소까지 구했는데! 합숙을 하다 보니 프로그램 진도는 안 나가고 숙소에 모여서 놀기나 하고 학교 수업이랑 리포트 등등 여러 가지 이유로 한 달이라는 시간이 금방 지나갔습니다. 결국 주제로 정한 프로그램은 완성하지 못하였습니다. 프로젝트 실패 아마 한 달이라는 짧은 기간에 프로그래밍 경험이 없는 아이들을 모아놓고 프로젝트를 한다는 게 쉬운 일이 아니지요!! 처음부터 계획을 잘 세웠어야 하는데 처음 접하는 언어(Visual Basic)를 공부하면서 프로젝트를 진행하는 게 쉽지 않았네요. 그때 저희 팀의 주제는 전자앨범이었습니다. 사진을 입력하고 사진에 얼굴을 선택해서 선택한 얼굴에 정보를 입력하는 프로그램이었습니다. 언어는 Visual Basic 5.0 이였고(1999년도라) 팀원 중 한 명이 고등학교 때 프로그래밍 경험이 있었습니다. (그 팀원만 믿었었죠) 아마 그때는 그 팀원을 믿고 PG를 진행한 것이 결국 문제였습니다. 저는 학교 도서관에서 Visual Basic 책을 빌려와서 이것저것 따라 해보면서 Visual Basic을 익히고 있었습니다. 책을 따라 하면서 간단한 동영상 재생기를 만들게 되었는데 축제 발표일까지 계획된 프로그램은 완성하지 못하였고 그나마 동작하는 프로그램이 제가 만든 것뿐이라 재가 만들 걸 제출하기로 했지요. 코딩 작업을 한 시간보다 논 시간이 더 많았으니 당연한 결과지요 결과물 PlayerGX (지금은 좀 촌스러운 ...
자세한 내용 보기