Хочу подкючить fancybox но на сайте не он не отоброжается . в чем проблема ?
Еще картинки :
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВот пример подключения "рандомных" картинок на вашем сайте. Подключения css и js плагина используйте те, которые я привел в данном примере. Добавлен контейнер documentsGallery с картинками. Думаю, разберетесь. Если будут вопросы. Обращайтесь.
$(document).ready(function(){
$('[data-fancybox="images"]').fancybox({
buttons : [
'zoom',
'fullScreen',
'close'
],
});
});
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: #5e5e5e;
}
*{
box-sizing: border-box;
}
a{
text-decoration: none;
display: inline-block;
}
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
.container {
max-width: 1170px;
margin: 0 auto;
padding: 0 15px;
}
header {
font-family: 'Roboto', sans-serif;
}
.header__top {
background-color: #303030;
}
.header__btn {
float: right;
line-height: 36px;
color: #1b1b1b;
background: #ffcc22;
padding: 5px 20px 4px 50px;
font-size: 16px;
display: block;
position: relative;
}
.header__btn:before {
content: "\f0b1";
font-family: 'icomoon';
position: absolute;
color: #1b1b1b;
left: 22px;
}
.header__contacts:after {
content: "";
clear: both;
display: block;
}
.header__email, .header__phone {
color: #b2b2b2;
font-size: 14px;
letter-spacing: 0.25px;
line-height: 45px;
position: relative;
}
.header__phone {
padding-left: 20px;
padding-right: 30px;
}
.header__phone:before {
content: "\f095";
font-family: 'icomoon';
position: absolute;
color: #ffc222;
left: 0;
}
.header__email {
padding-left: 24px;
}
.header__email:before {
content: "\f003";
font-family: 'icomoon';
position: absolute;
color: #ffc222;
left: 0;
}
.header-content {
padding: 34px 0px 24px;
}
.header__content-inner {
display: flex;
justify-content: space-between;
}
.menu li {
display: inline-block;
}
.menu a {
color: #323232;
font-size: 16px;
line-height: 34px;
border: 1px solid transparent;
padding: 0px 16px;
transition: all 1s;
}
.menu a:hover {
border-color: #ffc222;
}
.menu li + li {
padding-left: 10px;
}
/*Добавлен*/
.documentsGallery {
display: flex;
justify-content: space-between;
width: 100%;
margin: 100px 0 100px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<header class="header">
<div class="header__top">
<div class="container">
<div class="header__contacts">
<a class="header__phone" href="tel:37067648839">+37067648839</a>
<a class="header__email" href="">layoout@gmail.com</a>
<a data-fancybox data-src="#modal" href="javascript:;" class="btn btn-primary" class="header__btn" href="">бесплатная консультация</a>
</div>
</div>
</div>
<div class="header-content">
<div class="container">
<div class="header__content-inner">
<div class="header__logo">
<a href="#">
<img src="LOGOTYPE.png" alt="">
</a>
</div>
<nav class="menu">
<ul>
<li><a href="#">Главная </a></li>
<li><a href="#">О компании</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>
</div>
<div class="documentsGallery">
<a href="https://static.dochkisinochki.ru/upload/img_loader/c0/fb/f5/GL001101203_001.JPG" data-fancybox="images">
<img src="https://static.dochkisinochki.ru/upload/resize_cache/img_loader/7b/40/a6/50_50_1/GL001101203_002.JPG">
</a>
<a href="https://static.dochkisinochki.ru/upload/img_loader/c0/fb/f5/GL001101203_001.JPG" data-fancybox="images">
<img src="https://static.dochkisinochki.ru/upload/resize_cache/img_loader/7b/40/a6/50_50_1/GL001101203_002.JPG">
</a>
<a href="https://static.dochkisinochki.ru/upload/img_loader/c0/fb/f5/GL001101203_001.JPG" data-fancybox="images">
<img src="https://static.dochkisinochki.ru/upload/resize_cache/img_loader/7b/40/a6/50_50_1/GL001101203_002.JPG">
</a>
<a href="https://static.dochkisinochki.ru/upload/img_loader/c0/fb/f5/GL001101203_001.JPG" data-fancybox="images">
<img src="https://static.dochkisinochki.ru/upload/resize_cache/img_loader/7b/40/a6/50_50_1/GL001101203_002.JPG">
</a>
<a href="https://static.dochkisinochki.ru/upload/img_loader/c0/fb/f5/GL001101203_001.JPG" data-fancybox="images">
<img src="https://static.dochkisinochki.ru/upload/resize_cache/img_loader/7b/40/a6/50_50_1/GL001101203_002.JPG">
</a>
</div>
<div style="display: none;" id="modal">
<h2>Hello!</h2>
<p>You are awesome!</p>
</div>