0
나는 이것을 잠시 풀려고 노력했다. 잠시 후에 프로젝트를 발표하고 그 위에 필터링/탐색 기능을 추가했다. 나는 모든 것이 선택 될 때 ul을 순환 할 수 있지만 탐색하는 필터를 선택하는 순간 나는 얽히게됩니다. 어떤 도움을 크게 아래 평가 JQuery와 코드와 페이지가보이는 요소 만 이동
//FILTERING
$('.portfolio-filter li a').click(function(){
var ourFilter = $(this).attr('class');
if($(this).hasClass('active')) {
return false;
} else {
$('.portfolio-filter li a').removeClass('active');
$(this).addClass('active');
}
if(ourFilter == 'all') {
$('#portfolio-container .row.collection').children('div.item').show();
} else {
$('#portfolio-container .row.collection').children('div:not(.' + ourFilter + ')').hide();
$('#portfolio-container .row.collection').children('div.' + ourFilter).show();
}
return false;
});
//GALLERY
$('ul.project, ul.project.active').click(function(e){
e.preventDefault();
if($('ul.project').hasClass('active')) {
} else {
$(this).addClass('active');
}
var projecttitle = $('ul.project.active').attr('projecttitle');
var projectdescription = $('ul.project.active').attr('projectdescription');
var prevProject = $('ul.project.active').closest('div.four.columns').prev(':visible').find('ul.project');
var nextProject = $('ul.project.active').closest('div.four.columns').next(':visible').find('ul.project');
var overlay =
'<div id="overlay" onclick="">' +
'<div class="row">' +
'<div class="seven columns">' +
'<div class="modal animated bounceInUp loader">' +
'<div class="project-content" style="opacity: 0"></div>' +
'</div>' +
'</div>'
'</div>' +
'</div>';
var modal =
'<div class="close" onclick="">▼ TAP TO CLOSE ▼</div>' +
'<div class="project-navigation">' +
'<div class="prev-project" onclick="">◄</div>' +
'<div class="next-project" onclick="">►</div>' +
'<div class="current-project">' +
'<h3>' + projecttitle + '</h3>' +
'<p>' + projectdescription + '</p>' +
'</div>' +
'</div>';
if ($('#overlay').length > 0){
$('.project-content').fadeTo(0,0, function(){
$('.modal').addClass('loader');
$('.project-content').html('');
$('.project-content').append(modal);
if($(prevProject).length == 0){
$('.prev-project').addClass('disabled');
} else {
$('.prev-project').removeClass('disabled');
};
if($(nextProject).length == 0){
$('.next-project').addClass('disabled');
} else {
$('.next-project').removeClass('disabled');
};
$('.active').find('.lightbox').each(function(){
var $href = $(this).attr('href');
$('.project-content').append(
'<img src="' + $href + '">'
);
});
var imgs = $('.project-content > img').not(function(){
return this.complete;
})
var count = imgs.length;
if (count){
imgs.load(function(){
count--;
if(!count){
$('.modal').removeClass('loader');
$('.project-content').fadeTo(0,1);
}
});
} else {
$('.modal').removeClass('loader');
$('.project-content').fadeTo(0,1);
};
});
} else {
$('body').append(overlay);
$('body').addClass('modal-open');
$('.project-content').append(modal);
if($(prevProject).length == 0){
$('.prev-project').addClass('disabled');
} else {
$('.prev-project').removeClass('disabled');
};
if($(nextProject).length == 0){
$('.next-project').addClass('disabled');
} else {
$('.next-project').removeClass('disabled');
};
$('.active').find('.lightbox').each(function(){
var $href = $(this).attr('href');
var screenheader = $(this).attr('screen');
$('.project-content').append(
'<img src="' + $href + '">'
);
});
var imgs = $('.project-content > img').not(function(){
return this.complete;
})
var count = imgs.length;
if (count){
imgs.load(function(){
count--;
if(!count){
$('.modal').removeClass('loader');
$('.project-content').fadeTo(0,1);
}
});
} else {
$('.modal').removeClass('loader');
$('.project-content').fadeTo(0,1);
};
}
});
$(function(){
$('.prev-project').live('click', function(e){
e.stopPropagation();
var prevProject = $('ul.project.active').closest('div.four.columns').prev(':visible').find('ul.project');
if($(prevProject).length > 0){
$('ul.project.active').removeClass('active');
$(prevProject).addClass('active');
$('ul.project.active').click();
};
});
$('.next-project').live('click',function(e){
e.stopPropagation();
var nextProject = $('ul.project.active').closest('div.four.columns').next(':visible').find('ul.project');
if($(nextProject).length > 0){
$('ul.project.active').removeClass('active');
$(nextProject).addClass('active');
$('ul.project.active').click();
};
});
$('#overlay, .close').live('click', function(e){
e.stopPropagation();
$('.modal').addClass('bounceOutDown');
$('body').removeClass('modal-open');
$('.project').removeClass('active');
$('#overlay').delay(500).fadeOut(0, function(){
$(this).remove();
})
});
});
//KEYSTROKES
$(document).keydown(function(e){
if (e.keyCode == 27) {
if($('#overlay').length > 0){
$('.modal').addClass('bounceOutDown');
$('body').removeClass('modal-open');
$('.project').removeClass('active');
$('#overlay').delay(500).fadeOut(0, function(){
$(this).remove();
})
}
}
if (e.keyCode == 37) { // PREV
$('.prev-project').click();
}
if (e.keyCode == 39) { // NEXT
$('.next-project').click();
}
});
'live'는 더 이상 사용되지 않으며 jquery의 최신 버전에서 제거되었습니다. 대신에 on을 사용하십시오 – karthikr
그 코드 예제를 아래로 분석해야합니다. – j08691