1
이미지가로드되고 크기가 조정되고 숨겨졌지만 문제가 발생하면 컨테이너가 페이드 인됩니다.다른 콜백에서 jQuery 함수를 실행하는 데 문제가 발생했습니다.
내 콘솔에 오류가 표시되지 않습니다 ..하지만 기능은 주석 코드가 완벽하게 작동
을 실행 arn't.
테스트 사이트 :
자바 스크립트 :
/*jQuery(function($) {
$('.z').respond();
});*/
$(document).ready(function() {
//$('#two, #three, #four').hide();
//$('#main').fadeIn('slow');
$('.z').respond(function() {
$('#two, #three, #four').hide();
$('#main').fadeIn('slow');
});
$('.z').click(function() {
var slide = $(this);
slide.fadeOut(600, function() {
slide.next().fadeIn(600);
slide.insertAfter('.z:last');
});
});
});
플러그인 :
(function($){
$.fn.respond = function() {
/* initialize function on window load and resize */
$(document).ready(function() {
dimensions();
});
$(window).load(function() {
dimensions();
});
$(window).resize(function() {
dimensions();
});
/* declare affected elements */
var pic = this
/* set image's height or width depending on the browser window's size */
function dimensions() {
return pic.each(function() {
/* declare variables */
var browserWidth = $(window).width();
var imgRatio = $(this).width()/$(this).height()
var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
var browserRatio = browserWidth/availableHeight
/* image sizing logic */
if (browserRatio >= imgRatio) {
if (browserWidth > 640) {
/* if the browser is landscape and bigger than mobile, set the image's height to fill the available space */
$(this).height(availableHeight).width('auto');
//$('body').css('background', 'blue');
} else {
/* it's mobile */
$(this).width(browserWidth - 40).height('auto');
//$('body').css('background', 'red');
}
} else {
/* if the browser is portrait, set the image's width to fill the page */
$(this).width(browserWidth - 40).height('auto');
//$('body').css('background', 'green');
}
/* horizontally center content */
$(this).css('margin-left', (browserWidth - $(this).width())/2);
});
};
};
})(jQuery);