Я делаю веб-сайт для бизнеса друга, и я новичок в JQuery, сайт работал нормально, у него есть заголовок карусели, два разных слайдера и галерея с изотопным фильтром (галерея портфолио). Я хотел, чтобы пользователь иметь возможность расширять изображения в галерее, поэтому я добавил лайтбокс, но как только я это сделал, мой изотопный фильтр просто перестал работать (хотя вместе со всеми моими гладкими слайдерами слайдер карусели работает нормально)
Я не понимаю, почему это происходит, единственная ошибка, которую он мне дает, - это:
Uncaught TypeError: a.indexOf is not a function at pa.fn.init.pa.fn.load (lightbox-plus-jquery.min.js:24) at functions.js:10
это мой порядок загрузки в теге заголовка:
<script src = "https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!--js scripts load-->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script type = "text/javascript" src = "js/lightbox-plus-jquery.min.js"></script>
<script type = "text/javascript" src = "js/jquery.easing.1.3.js"></script>
<script type = "text/javascript" src = "js/wow.js"></script>
<script type = "text/javascript" src = "js/jquery-scrolltofixed.js"></script>
<script type = "text/javascript" src = "js/jquery.isotope.js"></script>
<script type = "text/javascript" src = "js/classie.js"></script>
<script src = "contactform/contactform.js"></script>
<script type = "text/javascript" src = "js/functions.js"></script>
<script type = "text/javascript" src = "js/carousel.js"></script>Галерея (с изотопным фильтром + зум лайтбокса):
<section class = "main-section paddind" id = "portfolio">
<!--main-section-start-->
<div class = "container">
<h2>Portfolio</h2>
<h6>Fresh portfolio of designs that will keep you wanting more.</h6>
<div class = "portfolioFilter">
<ul class = "Portfolio-nav wow fadeIn delay-02s">
<li><a href = "#" data-filter = "*" class = "current">Todos</a></li>
<li><a href = "#" data-filter = ".gondola">Gôndolas</a></li>
<li><a href = "#" data-filter = ".checkout">Check-outs</a></li>
<li><a href = "#" data-filter = ".aramado">Aramados</a></li>
<li><a href = "#" data-filter = ".pallet">Porta-Pallet</a></li>
</ul>
</div>
</div>
<div class = "portfolioContainer wow fadeInUp delay-04s">
<div class = " Portfolio-box gondola">
<a href = "img/portfolio/big/render1.png" data-lightbox = "mygallery"><img src = "img/portfolio/render1.png" alt = ""></a>
</div>
<div class = " Portfolio-box gondola">
<a href = "img/portfolio/big/render3.png" data-lightbox = "mygallery"><img src = "img/portfolio/render3.png" alt = ""></a>
</div>
<div class = " Portfolio-box pallet">
<a href = "img/portfolio/big/render4.png" data-lightbox = "mygallery"><img src = "img/portfolio/render4.png" alt = ""></a>
</div>
<div class = " Portfolio-box pallet">
<a href = "img/portfolio/big/render5.png" data-lightbox = "mygallery"><img src = "img/portfolio/render5.png" alt = ""></a>
</div>
<div class = " Portfolio-box pallet">
<a href = "img/portfolio/big/render5.png" data-lightbox = "mygallery"><img src = "img/portfolio/render5.png" alt = ""></a>
</div>
<div class = "Portfolio-box gondola">
<a href = "img/portfolio/big/render2.png" data-lightbox = "mygallery"><img src = "img/portfolio/render2.png" alt = ""></a>
</div>
</div>
</section>это мой файл functions.js:
$(document).ready(function(e) {
$('#test').scrollToFixed();
$('.res-nav_click').click(function(){
$('.main-nav').slideToggle();
return false
});
});
$(window).load(function(){
$('.main-nav li a, .servicelink').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 102
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
if ($(window).width() < 768 ) {
$('.main-nav').hide();
}
event.preventDefault();
});
})
$(window).load(function(){
var $container = $('.portfolioContainer'),
$body = $('body'),
colW = 375,
columns = null;
$container.isotope({
// disable window resizing
resizable: true,
masonry: {
columnWidth: colW
}
});
$(window).smartresize(function(){
// check if columns has changed
var currentColumns = Math.floor( ( $body.width() -30 ) / colW );
if ( currentColumns !== columns ) {
// set new column count
columns = currentColumns;
// apply width to container manually, then trigger relayout
$container.width( columns * colW )
.isotope('reLayout');
}
}).smartresize(); // trigger resize to set container width
$('.portfolioFilter a').click(function(){
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
});
return false;
});
});
// slick functions
$(document).on('ready', function () {
$(".regular").slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
dots: false
});
});
$(document).on('ready', function () {
$(".one").slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
dots: true,
prevArrow: false,
nextArrow: false
});
});Я попытался использовать режим jQuery без конфликтов, но это не сработало, просто выдало ту же ошибку.






Это была такая глупая ошибка, я загрузил lightbox-plus-jquery.min.js тогда, когда должен был загрузить скрипт lightbox.min.js, извините, теперь это решено.
lightbox-plus загружает лайтбокс и jquery вместе, он используется, когда на странице еще не добавлен jquery. Поэтому, если jquery уже добавлен на страницу, он будет конфликтовать с файлом lightbox-plus.
Ссылка для справки - https://lokeshdhakar.com/projects/lightbox2/