HTML5 + 자바스크립트 이용한 갤러리

안녕하세요! 

궁금한게 있어서 개발자분들게 조언 구합니다.

클릭시 폴더에 있는 이미지를 불러 오고 싶습니다.

1. 홍길동 2.김민철 3.김하나

1번 홍길동 클릭시

홍길동의 사진 3장 출력되고 닫히게 하고 싶습니다.

예)

/photo/1/1_1.jpg

/photo/1/1_2.jpg

/photo/1/1_3.jpg

폴더가 많고 개별 컨텐츠가 많아서 고민중입니다.

어떤 방법이 좋을까요?

좋은 설계 조언 부탁드립니다.  

비슷한 제이쿼리 나 스크립트 URL도 괜찮습니다.

혹시 도와주실분 있으시면 마음을 담아~ ^^ 작지만 사례 하겠습니다.

--------------- 참고용 소스 입니다. ------------

(function($){
})(jQuery)
  sectionStart:function() {
   var _this = $(this),
    controlParent = _this.find('.section-contents'),
    controlParent2 = _this.find('.section-img'),
    controlChild = controlParent.find('p'),
    controlChild2 = controlParent2.find('img');
   $.each(controlChild,function() {
    if (!$(this).is('.section-number')) {
     $(this).find('.cut >img').stop().animate({marginTop:-23},{duration:500})
     $(this).find('.cut02 >img').stop().animate({marginTop:-46},{duration:500})
    } else {
     $(this).find('.num >img').stop().animate({marginTop:-98},{duration:500})
     $(this).find('.num-icon >img').stop().animate({marginTop:-6},{duration:500})
    }
   })
   $.each(controlChild2,function() {
    if ($(this).parent().is('.section-icon')) {
     $(this).css({marginTop:-33})
     $(this).parent().stop().animate({left:102},500)
    }
    if ($(this).parent().is('.category-img')) {$(this).stop().animate({marginTop:0},500)}
   })
  },
  sectionReset:function() {
   var _this = $(this);
    controlParent = _this.find('.section-contents'),
    controlParent2 = _this.find('.section-img'),
    controlChild = controlParent.find('p'),
    controlChild2 = controlParent2.find('img');
   $.each(controlChild,function() {
    if (!$(this).is('.section-number')) {
     $(this).find('.cut >img').stop().animate({marginTop:0},{duration:500})
     $(this).find('.cut02 >img').stop().animate({marginTop:0},{duration:500})
    } else {
     $(this).find('.num >img').stop().animate({marginTop:0},{duration:400})
     $(this).find('.num-icon >img').stop().animate({marginTop:0},{duration:400})
    }
   })
   $.each(controlChild2,function() {
    if ($(this).parent().is('.section-icon')) {
     $(this).css({marginTop:0})
     $(this).parent().stop().animate({left:16},500)
    }
    if ($(this).parent().is('.category-img')) {$(this).stop().animate({marginTop:-25},500)}
   })
  },
  sectionControl:function() {
   var _this = $(this),
    section = _this.find('>#section-container >section'),
    sectionBg = _this.find('.section-bg'),
    init;
   _this.css({height:$(window).height()})
   section.css({height:$(window).height()})
   sectionBg.css({opacity:0,height:$(window).height()})
   $.each(section,function(index) {
    $(this).css({background:'#e8e8e8'})
    $(this).animate({left:247*index},{duration:500,easing:'easeInQuint',complete:function() {$(this).css({background:'transparent'})}})
    $(this).mouseenter(function() {
     var $this = $(this),
      cValue = $this.attr('sectioncolor');
     $this.sectionStart();
     $this.addClass('section-over');
     sectionBg.stop().animate({opacity:1,backgroundColor:cValue,left:parseInt($this.css('left'))},{duration:500,easing:'easeInSine'})
    }).mouseleave(function() {
     var $this = $(this);
     $this.removeClass('section-over');
     $this.sectionReset();
     sectionBg.stop().animate({opacity:0},100)
    })
   })
   if ($(window).width() < 1483) {
    clearLeft = function() {
     clearTimeout(init);
     init = setTimeout(function() {
      _this.find('>#section-container').stop().animate({marginLeft:0},2000)
     },50)
    }
    minusLeft = function() {
     clearTimeout(init);
     init = setTimeout(function() {
      _this.find('>#section-container').stop().animate({marginLeft:-(1483-$(window).width())},2000)
     },50)
    }
    _this.find('>#section-container').mousemove(function(event) {
     if ($(window).width() < 1483) {
      if (event.pageX < $(window).width()/2) {
       clearLeft();
      } else {
       minusLeft();
      }
     }
    }).mouseleave(function() {
     clearTimeout(init)
    })
   }
   $(window).resize(function() {
    _this.css({height:$(window).height()})
    section.css({height:$(window).height()})
    sectionBg.css({opacity:0,height:$(window).height()})
    if ($(window).width() > 1483) {
     clearTimeout(init)
     _this.find('>#section-container').stop().animate({marginLeft:($(window).width()-1483)/2},10)
    } else {
     _this.find('>#section-container').stop().animate({marginLeft:0},10)
    }
   })
   //alert($(window).width())
  },
  Navifollow:function() {
   var _this = $(this);
   var ScrollLi = [];
   var ScrollAA;
   var ScrollPoint;
   var runpoint;
   if ($('#follow-nav').is(':visible')) {
    $(window).load(function() {
     ScrollAA = _this.offset().top;
     //ScrollPoint = _this.find('#contents-follow-wraper').height()-1;
     $('#follow-nav li a').click(function() {
      var ScrollCu = $($(this).attr('href')).offset().top;
      $('html, body').animate({scrollTop:ScrollCu+1}, 400)
      return false;
     });
     
     
     $('.article-section').each(function(index) {
      ScrollLi[index] = parseInt($(this).offset().top,10);
     });
     $(window).scroll(function() {
      $('#follow-nav li a').parent().removeClass('on');
      if ( $(window).scrollTop() > ScrollAA ) {
       if (!runpoint) {
        _this.addClass('sticky');
        runpoint = 1;
       }
       if (!$('#follow-nav li a').is('.link')) {
        for ( var i=0; i<ScrollLi.length; i++ ) {
         if ( i == ScrollLi.length-1 ) {
          if ( ScrollLi[i] < $(window).scrollTop() ) {
           $('#follow-nav li a').eq(i).parent().addClass('on');
           break;
          }
         } else {
          if ( ( ScrollLi[i] < $(window).scrollTop() ) && ( ScrollLi[i+1] > $(window).scrollTop() ) ) {
           $('#follow-nav li a').eq(i).parent().addClass('on');
           break;
          }
         }
        } 
       }
      } else {
       if (runpoint) {
        _this.removeClass('sticky');
        runpoint = 0;
       }
      }
     });

    })
   }
  },
  Navifollow2:function() {
   var _this = $(this);
   var ScrollLi = [];
   var ScrollAA;
   var ScrollPoint;
   var runpoint;
   if ($('#follow-nav2').is(':visible')) {
    $('#follow-nav2 >ul').mouseenter(function() {
     $(this).parent().addClass('wrap-over');
    }).mouseleave(function() {
     $(this).parent().removeClass('wrap-over');
    })
    $(window).load(function() {
     ScrollAA = _this.offset().top;
     //ScrollPoint = _this.find('#contents-follow-wraper').height()-1;
     $('#follow-nav2 li a').click(function() {
      var ScrollCu = $($(this).attr('href')).offset().top;
      $('html, body').animate({scrollTop:ScrollCu+1}, 400)
      return false;
     });
     
     
     $('.article-section').each(function(index) {
      ScrollLi[index] = parseInt($(this).offset().top,10);
     });
     $(window).scroll(function() {
      $('#follow-nav2 li a').parent().removeClass('on');
      if ( $(window).scrollTop() > ScrollAA ) {
       if (!runpoint) {
        _this.addClass('sticky');
        runpoint = 1;
       }
       if (!$('#follow-nav2 li a').is('.link')) {
        for ( var i=0; i<ScrollLi.length; i++ ) {
         if ( i == ScrollLi.length-1 ) {
          if ( ScrollLi[i] < $(window).scrollTop() ) {
           $('#follow-nav2 li a').eq(i).parent().addClass('on');
           break;
          }
         } else {
          if ( ( ScrollLi[i] < $(window).scrollTop() ) && ( ScrollLi[i+1] > $(window).scrollTop() ) ) {
           $('#follow-nav2 li a').eq(i).parent().addClass('on');
           break;
          }
         }
        } 
       }
      } else {
       if (runpoint) {
        _this.removeClass('sticky');
        runpoint = 0;
       }
      }
     });

    })
   }
  },
  Navifollow3:function() {
   var _this = $(this);
   _this.find('#follow-nav2 >ul').mouseenter(function() {
    $(this).parent().addClass('wrap-over');
   }).mouseleave(function() {
    $(this).parent().removeClass('wrap-over');
   })
  },
  photoControl:function() {
   var _this = $(this),
    circle = _this.find('.circle'),
    cLength = circle.length,
    item = _this.find('.cell'),
    itemMovie = _this.find('.movie-view')
   item.css({opacity:0})
   _this.attr('num',0)
   item.eq(0).addClass('on-cell').css({opacity:1});
   $.each(circle,function(index) {
    $(this).attr('num',index);
    $(this).click(function() {
     var removeOn = _this.find('.on-circle');
      removeOn2 = _this.find('.on-cell');
     removeOn.removeClass('on-circle');
     removeOn2.removeClass('on-cell').stop().animate({opacity:0},{duration:1000,complete:function() {$(this).find('>a').hide();}});
     _this.attr('num',$(this).attr('num'));
     $(this).addClass('on-circle');
     $(this).next().addClass('on-cell').stop().animate({opacity:1},{duration:1000,complete:function() {$(this).find('>a').show();}});
    })
    $(this).focusin(function() {
     var removeOn = _this.find('.on-circle');
      removeOn2 = _this.find('.on-cell');
     removeOn.removeClass('on-circle');
     removeOn2.removeClass('on-cell').stop().animate({opacity:0},{duration:1000,complete:function() {$(this).find('>a').hide();}});
     _this.attr('num',$(this).attr('num'));
     $(this).addClass('on-circle');
     $(this).next().addClass('on-cell').stop().animate({opacity:1},{duration:1000,complete:function() {$(this).find('>a').show();}});
    })
   })
  },
  photoList:function() {
   var _this = $(this),
    item = _this.find('>ul >li'),
    control = _this.find('.photo-control');
   $.each(item,function() {
    $(this).mouseenter(function() {
     var zoom = $('<span class="zoom"></span>');
     zoom.appendTo($(this));
     $(this).find('>.photo-control >img').css({opacity:0.7})
    }).mouseleave(function() {
     $(this).find('>.photo-control >img').css({opacity:1})
     $('.zoom').remove();
    })
   })
   $.each(control,function() {
    $(this).click(function() {
     var dimmed = $('<div id="dimmed"></div>');
     dimmed.css({opacity:0.6})
     dimmed.appendTo($(this).parent())
     $(this).next().fadeIn();
     _this.css({zIndex:3})
     $(this).next().find('.close').click(function() {
      $('#dimmed').remove();
      $(this).parent().parent().hide();
      _this.css({zIndex:1})
      return false;
     })
     return false;
    })
   })
  },
  galleryList:function() {
   var _this = $(this),
    item = _this.find('>ul >li'),
    control = _this.find('.gallery-control');
    controlImg  = control.find('>img');
   controlImg.css({opacity:0.3})
   $.each(item,function() {
    $(this).mouseenter(function() {
     var zoom = $('<span class="zoom"></span>');
     $(this).find('>.gallery-control >img').css({opacity:1})
     zoom.appendTo($(this));
    }).mouseleave(function() {
     $('.zoom').remove();
     $(this).find('>.gallery-control >img').css({opacity:0.3})
    })
   })
   $.each(control,function() {
    $(this).click(function() {
     var dimmed = $('<div id="dimmed"></div>');
     dimmed.css({opacity:0.6})
     dimmed.appendTo($(this).parent())
     $(this).next().fadeIn();
     //_this.css({zIndex:3})
     $(this).next().find('.close').click(function() {
      $('#dimmed').remove();
      $(this).parent().parent().hide();
      _this.css({zIndex:1})
      return false;
     })
     return false;
    })
   })
  },
  tabControl:function() {
   var _this = $(this);
   if (!_this.get(0)){return false};
   var anc = _this.find('a');
   $.each(anc,function() {
    $(this).mouseenter(function() {
     $(this).parent().addClass('over');
    }).mouseleave(function() {
     $(this).parent().removeClass('over');
    })
   })
  },
  returnButton:function() {
   var _this = $(this);
   if (!_this.get(0)){return false};   
   _this.mouseenter(function () {
    _this.stop().animate({right:15},{duration:500,easing:'easeOutQuint'})
   }).mouseleave(function() {
    _this.stop().animate({right:0},{duration:500,easing:'easeOutQuint'})
   })
  },
  leftNavControl:function() {
   var _this = $(this);
   if (!_this.get(0)){return false};
   _this.css({opacity:0})
   _this.stop().delay(100).animate({left:32,opacity:1},{duration:700,easing:'easeOutQuint'})
  },
  popupControl:function() {
   var _this = $(this);
   if (!_this.get(0)){return false};
   $.each(_this,function() {
    var _this = $(this);
    _this.click(function() {
     var dimmed = $('<div id="dimmed"></div>');
     dimmed.css({opacity:0.6})
     $($(this).attr('href')).show();
     dimmed.appendTo($(this).attr('href'))
     soundOff();
     $(($(this).attr('href'))).find('.close').click(function() {
      $($(this).attr('href')).hide();
      $($(this).attr('href')).find('>.clone').clone().appendTo($(this).attr('href'));
      $($(this).attr('href')).find('>.clone:eq(0)').remove();
      soundOn();
      return false;
     })
    })
   })
  },
  closeOver:function() {
   var _this = $(this);
   if (!_this.get(0)){return false};
   _this.mouseenter(function() {
    var imgSrc = $(this).attr('src');
    var replaceimgSrc = imgSrc.replace('.gif','_over.gif');
    $(this).attr('src',replaceimgSrc);
   }).mouseleave(function() {
    var imgSrc = $(this).attr('src');
    var replaceimgSrc = imgSrc.replace('_over.gif','.gif');
    $(this).attr('src',replaceimgSrc); 
   })
  }
 })
 $(document).ready(function() {
  $('.tab').tabControl();
  $('.return-submain').returnButton();
  $('#left-nav').leftNavControl();
  $('.layerpop-control').popupControl();
  $('a.close >img').closeOver();
 })
})(jQuery)​