어둡거나 밝은 경우 헤더에 클래스를 추가하면 이미지의 색상을 확인하는 기능이 있습니다.
myCaruosel Bootstrap 내에서 실행하고 싶습니다 .getImageBrightness각 이미지에 대한 해고해야한다.캐 러셀 기능 내에서 작동하지 않습니다.
많은 도움을 주셔서 감사합니다.
this.src를 사용하는 대신 find 이벤트를 사용하여 활성 이미지 src를 가져옵니다.
$(document).ready(function() {
var imgs = document.body.getElementsByTagName('img');
///Load getImageBrightness function
$("img").on("load", function() {
getImageBrightness(this.src, function(brightness) {
if (brightness < 256 / 2) {
$('header').addClass('dark');
} else {
$('header').addClass('light');
}
});
}).each(function() {
if (this.complete) $(this).load();
});
var img_src = $('#MyCarousel').find('.carousel-item.active img').attr('src');
getImageBrightness(img_src, function(brightness) {
console.log(brightness);
if (brightness < parseInt(256 / 2)) {
$('header').toggleClass('dark');
} else {
$('header').toggleClass('light');
}
});
///Load carousel and trigger the getImageBrightness Function here
$('#MyCarousel').on('slide.bs.carousel', function () {
var img_src = $('#MyCarousel').find('.carousel-item.active img').attr('src');
getImageBrightness(img_src, function(brightness) {
console.log(brightness);
if (brightness < parseInt(256 / 2)) {
$('header').removeClass('light');
$('header').addClass('dark');
} else {
$('header').removeClass('dark');
$('header').addClass('light');
}
});
}).each(function() {
if (this.complete) $(this).load();
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다