HTML5 + 자바스크립트 이용한 갤러리 정보
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)
0
댓글 2개
소스가 너무 커서
차라리 위의 소스 구한 위치를 링크 거시고 질문 하시는것이 좋을것 같구요
폴더가 많은 상태이시니
ajax 로 서버에서 해당 데이타을 생산하는 코드을 같이 개발하셔야 될것으로 보입니다.