Почему не работает Magnific-Popup?

Question

Snowfall_Zh @Snowfall_Zh

HTML

Почему не работает Magnific-Popup?

В других сайтах что я делал Магнифик прекрасно работал, а тут перестал.
Выдает - Uncaught TypeError: i.find is not a function

Вопрос задан более трёх лет назад
201 просмотр

9 комментариев

Подписаться 1 Простой 9 комментариев

Вадим @MrDecoy Куратор тега HTML

Покажите код подключения библиотек и инициализации магнифик, если делали.

Написано более трёх лет назад

Snowfall_Zh @Snowfall_Zh Автор вопроса

Вадим, ох срань божья, не заметил. Почему то коментарий был скрыт и я не заметил этого, сорри.
А насчет подключения, я подключал только Js файл и jquery. А Magnific подключен через Gulp.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<title>CrossFit</title>
	<link rel="stylesheet" href="css/libs.min.css">
	<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="css/animate.css">
	<script src="js/wow.min.js"></script>
	<script>
		new WOW().init();
	</script>
</head>

<body>




	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="js/libs.min.js"></script>
</body>

</html>

let project_folder = require('path').basename(__dirname);
let source_folder = '#src';

let fs = require('fs');

let path = {
	build: {
		html: project_folder + '/',
		css: project_folder + "/css/",
		js: project_folder + "/js/",
		img: project_folder + "/img/",
		fonts: project_folder + "/fonts/",

	},

	src: {
		html: [source_folder + '/*.html', '!' + source_folder + '/_*.html'],
		css: [source_folder + "/scss/style.scss", 'node_modules/normalize.css/normalize.css', 'node_modules/slick-carousel/slick/slick.css'],
		js: [source_folder + "/js/**/*.js", 'node_modules/slick-carousel/slick/slick.js', 'node_modules/magnific-popup/dist/jquery.magnific-popup.js'],
		img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
		fonts: source_folder + "/fonts/*.ttf",
	},

	watch: {
		html: source_folder + '/**/*.html',
		css: source_folder + "/scss/**/*.scss",
		js: source_folder + "/js/**/*.js",
		img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
	},

	clean: './' + project_folder + '/'
};

let { src, dest } = require('gulp'),
	gulp = require('gulp'),
	browsersync = require('browser-sync').create(),
	fileinclude = require('gulp-file-include'),
	del = require('del'),
	scss = require('gulp-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	group_media = require('gulp-group-css-media-queries'),
	clean_css = require('gulp-clean-css'),
	uglify = require('gulp-uglify-es').default,
	imagemin = require('gulp-imagemin'),
	webp = require('gulp-webp'),
	webphtml = require('gulp-webp-html'),
	webpcss = require('gulp-webp-css'),
	ttf2woff = require('gulp-ttf2woff'),
	ttf2woff2 = require('gulp-ttf2woff2'),
	svgSprite = require('gulp-svg-sprite'),
	fonter = require('gulp-fonter'),
	concat = require('gulp-concat'),
	rename = require('gulp-rename');




// ------------------------browserSync--------------------
function browserSync(params) {
	browsersync.init({
		server: {
			baseDir: "./" + project_folder + '/'
		},
		port: 3000
	})
}



// ----------------------------------HTML--------------------
function html() {
	return src(path.src.html)
		.pipe(fileinclude())
		.pipe(webphtml())
		.pipe(dest(path.build.html))
		.pipe(browsersync.stream())
}





// ---------------------------------IMG-------------------
function images() {
	return src(path.src.img)
		.pipe(
			webp({
				quality: 70
			})
		)
		.pipe(dest(path.build.img))
		.pipe(src(path.src.img))
		.pipe(
			imagemin({
				progressive: true,
				svgPlugins: [{ removeViewbox: false }],
				interlaced: true,
				optimizationLevel: 3// 0 to 7
			})
		)
		.pipe(dest(path.build.img))
		.pipe(browsersync.stream())
}




// ----------------------------JS------------------------------
function js() {
	return src(path.src.js)
		.pipe(fileinclude())
		.pipe(concat("libs.js"))
		.pipe(uglify())
		.pipe(
			rename({
				extname: ".min.js"
			})
		)
		.pipe(dest(path.build.js))
		.pipe(browsersync.stream())
}


// -----------------------------CSS----------------------------
function css() {
	return src(path.src.css)
		.pipe(
			scss({
				outputStyle: 'expanded'
			})
		)
		.pipe(
			group_media()
		)

		.pipe(
			autoprefixer({
				overrideBrowserslist: ['last 5 versions'],
				cascade: true
			})
		)
		.pipe(concat("libs.css"))
		// .pipe(webpcss())
		.pipe(dest(path.build.css))
		.pipe(clean_css())
		.pipe(
			rename({
				extname: ".min.css"
			})
		)
		.pipe(dest(path.build.css))
		.pipe(browsersync.stream())
}




// --------------------------svgSprite-------------------------------
gulp.task('svgSprite', function () {
	return gulp.src([source_folder + '/iconsprite/*.svg'])
		.pipe(svgSprite({
			mode: {
				stack: {
					sprite: "../icons/icons.svg", //srite file name
					// example:true
				}
			},
		}))
		.pipe(dest(path.build.img))
})


// ---------------------------Fonter--------------------
gulp.task('otf2ttf', function () {
	return gulp.src([source_folder + '/fonts/*.otf'])
		.pipe(fonter({
			formats: ['ttf']
		}))
		.pipe(dest(source_folder + '/fonts/'))
})



// ----------------------------------Fonts---------------------------
function fonts(params) {
	src(path.src.fonts)
		.pipe(ttf2woff())
		.pipe(dest(path.build.fonts))

	return src(path.src.fonts)
		.pipe(ttf2woff2())
		.pipe(dest(path.build.fonts))
}



function fontsStyle(params) {

	let file_content = fs.readFileSync(source_folder + '/scss/fonts.scss');
	if (file_content == '') {
		fs.writeFile(source_folder + '/scss/fonts.scss', '', cb);
		return fs.readdir(path.build.fonts, function (err, items) {
			if (items) {
				let c_fontname;
				for (var i = 0; i < items.length; i++) {
					let fontname = items[i].split('.');
					fontname = fontname[0];
					if (c_fontname != fontname) {
						fs.appendFile(source_folder + '/scss/fonts.scss', '@include font("' + fontname + '", "' + fontname + '", "400", "normal");\r\n', cb);
					}
					c_fontname = fontname;
				}
			}
		})
	}
}

function cb() {

}



// -------------------------------watchFiles-------------------------
function watchFiles(params) {
	gulp.watch([path.watch.html], html);
	gulp.watch([path.watch.css], css);
	gulp.watch([path.watch.js], js);
	gulp.watch([path.watch.img], images);
}

function clean(params) {
	return del(path.clean);
}

let build = gulp.series(clean, gulp.parallel(js, css, html, images, fonts), fontsStyle);
let watch = gulp.parallel(build, watchFiles, browserSync);

exports.js = js;
exports.fontsStyle = fontsStyle;
exports.images = images;
exports.fonts = fonts;
exports.css = css;
exports.html = html;
exports.build = build;
exports.watch = watch;
exports.default = watch;

Написано более трёх лет назад

Вадим @MrDecoy Куратор тега HTML
Snowfall_Zh, А инициализация?
Что-то вроде такого:

$(document).ready(function() { $('.image-link').magnificPopup({type:'image'}); });
Написано более трёх лет назад
Snowfall_Zh @Snowfall_Zh Автор вопроса
Вадим,

$(function () { $('.popup').magnificPopup(); }
Написано более трёх лет назад
Вадим @MrDecoy Куратор тега HTML

Snowfall_Zh, Проверьте что вот тут $('.popup') не пусто. Что такие элементы точно находятся.

Написано более трёх лет назад
Snowfall_Zh @Snowfall_Zh Автор вопроса
Вадим, если это важно на Iframe и image работает. А вот Inline нет.

<button class="header__btn popup" href="#">Sign us</button>
Написано более трёх лет назад
Вадим @MrDecoy Куратор тега HTML
Snowfall_Zh, а src Вы указываете для inline?

В случае разметки:
data-mfp-src="#test-popup"
или в соответствующем свойстве, в случае JS

$('button').magnificPopup({ items: { src: '#popup', type: 'inline' } });
Написано более трёх лет назад
Snowfall_Zh @Snowfall_Zh Автор вопроса

Вадим, Ой я дуралей. Я там Id не прописал. Сидел 2 дня мозги парил. Извини что время твое забрал по пусту.

Написано более трёх лет назад
Вадим @MrDecoy Куратор тега HTML

Snowfall_Zh, бывает ;-)

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию

6 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Как свг заменить на фон?
- 1 подписчик
- 08 мая
- 231 просмотр
1

ответ
HTML

+1 ещё

Простой
Чем препроцессить в HTML сокращения?
- 2 подписчика
- 04 мая
- 308 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 342 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 738 просмотров
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 696 просмотров
4

ответа
HTML

+1 ещё

Простой
Беда с input. Как избавиться от выделения заполненного поля?
- 2 подписчика
- 31 мар.
- 355 просмотров
1

ответ
HTML

Простой
Как сделать так, чтобы в браузерах код html не показывался в квадратиках?
- 4 подписчика
- 26 мар.
- 685 просмотров
3

ответа
HTML

Простой
Как сделать деплой проекта, статического сайта сделанного на чистом html у которого нет баз данных?
- 1 подписчик
- 26 мар.
- 262 просмотра
3

ответа
HTML

+1 ещё

Простой
Как менять тему письма при рассылке на почту в зависимости от темы устройства?
- 2 подписчика
- 25 мар.
- 265 просмотров
1

ответ
HTML

+1 ещё

Простой
Шрифт подключен, браузер определяет шрифт правильно, но отображение отличается довольно сильно. Что делать?
- 3 подписчика
- 18 мар.
- 325 просмотров
2

ответа
Показать ещё Загружается…

Покажите код подключения библиотек и инициализации магнифик, если делали.
Snowfall_Zh, А инициализация?
Что-то вроде такого:

$(document).ready(function() { $('.image-link').magnificPopup({type:'image'}); });
Вадим,

$(function () { $('.popup').magnificPopup(); }
Snowfall_Zh, Проверьте что вот тут $('.popup') не пусто. Что такие элементы точно находятся.
Вадим, если это важно на Iframe и image работает. А вот Inline нет.

<button class="header__btn popup" href="#">Sign us</button>
Snowfall_Zh, а src Вы указываете для inline?

В случае разметки:
data-mfp-src="#test-popup"
или в соответствующем свойстве, в случае JS

$('button').magnificPopup({ items: { src: '#popup', type: 'inline' } });
Вадим, Ой я дуралей. Я там Id не прописал. Сидел 2 дня мозги парил. Извини что время твое забрал по пусту.

Answer 1 · 2021-01-18 17:12:20

tmsh1337 @tmsh1337

Скопируй его код из тех проектов где ты использовал его, возможно ошибка в коде

Ответ написан более трёх лет назад

Комментировать

Почему не работает Magnific-Popup?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт