Fancybox не получается запустить

@Black_Star · Регистрация: 06.05.2016

Студворк — интернет-сервис помощи студентам

Добрый день уважаемые. Подскажите пожалуйста, где я допускаю ошибку. Не получается стартануть библиотеку

http://codepen.io/anon/pen/qrZwjj

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<section class="box-gallery">
            <h2 class="box-gallery_name">GALLERY</h2>
 
                        <div class="gallery_library clearfix">
                            <div class="wrap_inset_library">
                                <div class="item"><a class="fancyImg" rel="group" href="#">  <img class="library_img" src="http://placehold.it/180x120" alt="img"/></a></div>
                                <p class="libraryItem_taxt">Born Identity: Bringing Burton Hardgoods to Life</p>
 
                            </div>
 
                            <div class="wrap_inset_library">
                                <div class="item"><a class="fancyImg" rel="group" href="#">  <img class="library_img" src="http://placehold.it/180x120" alt="img"/> </a></div>
                                <p class="libraryItem_taxt">Jeremy Jones: On That Street Grind</p>
 
                            </div>
 
                            <div class="wrap_inset_library">
                                <div class="item"><a class="fancyImg" rel="group" href="#">  <img class="library_img" src="http://placehold.it/180x120" alt="img"/> </a></div>
                                <p class="libraryItem_taxt">Burton’s Tokyo Rail Days Recap</p>
 
                            </div>
 
                            <div class="wrap_inset_library">
                                <div class="item"><a class="fancyImg" rel="group" href="#">  <img class="library_img" src="http://placehold.it/180x120" alt="img"/> </a></div>
                                <p class="libraryItem_taxt">Burton’s Tokyo Rail Days Preview</p>
 
                            </div>
 
                            <div class="wrap_inset_library">
                                <div class="item"><a class="fancyImg" rel="group" href="#">  <img class="library_img" src="http://placehold.it/180x120" alt="img"/> </a></div>
                                <p class="libraryItem_taxt">Born Identity: Bringing Burton Hardgoods to Life</p>
 
                            </div>
 
                        </div>
 
        </section>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 .box-gallery{
    position: relative;
 
    width: 100%;
    height: 593px;
    //margin-top: 18%;
    //margin-top: 90px;
 
    margin-top: 2vw;
    //border:$bd;
 
    &_name{
      padding-bottom: 24px;
      font-size: 48px;
      text-align: center;
      text-transform: uppercase;
      color: #000;
      border-bottom: 2px solid #050709;
      font-family: "Raleway",sans-serif;
    }
  }
 
.gallery_library{
  width: 100%;
  min-height: 280px;
  //height: 380px;
 
  border-bottom: 2px solid #050709;
}
 
.wrap_inset_library{
  position: relative;
  float: left;
  margin-left: 28px;
  margin-top: 40px;
  margin-bottom: 8px;
  text-align: left;
  width: 220px;
  &:first-child{
    margin-left: 13%;
  }
 
  &:hover .fancyImg .library_img{
    transform: scale(1.2);
    transition: all 0.5s;
  }
}
 
  .item{
    display: block;
    width: 220px;
    height: 160px;
    cursor: pointer;
 
 
  }
 
  .library_img{
    transform: scale(1);
    transition: all 0.5s;
  }
 
 
.libraryItem_taxt{
 
  font-family: "ProximaNovaSemiBold",sans-serif;
  font-size: 16px;
  text-align: justify;
 
  margin-top: 22px;
  line-height: 30px;
  color: #000;
  height: 90px;
  overflow: hidden;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function() {
   $("a.fancyImg").fancybox({
            "padding" : 20,
            "imageScale" : false,
            "zoomOpacity" : false,
            "zoomSpeedIn" : 1000,
            "zoomSpeedOut" : 1000,
            "zoomSpeedChange" : 1000,
            "frameWidth" : 700,
            "frameHeight" : 600,
            "overlayShow" : true,
            "overlayOpacity" : 0.8,
            "hideOnContentClick" :false,
            "centerOnScroll" : false,
            'speedIn': 600,
            'speedOut': 200
 
        });
});

И пути прописывал, и всё не как (

@Fedor92 · 03.03.2017, 21:39

Black_Star, попробуйте понизить версию jquery... К примеру использовать такую:

HTML5
1
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Плагин сам по себе староват...

@Black_Star · 03.03.2017, 22:00 **[ТС]**

Спасибо, помогло. На версии jQuery 2.4 стартануло.
А можете посоветовать современную альтернативу данной библиотеки?
Вот такие требования.
Небходимо что б по нажатию на маленькую картинку появлялось попап окно по центру экрана, где можно пролистать все оставшиеся картинки из галереи, Да и что б была возможность разблурить фон который под картинкой.

@Fedor92 · 03.03.2017, 22:05

Black_Star, можно посмотреть в сторону lightbox, вроде время от времени обновляются файлы на github...

Новые блоги и статьи Все статьи Все блоги /
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .

@Black_Star 23 / 22 / 17 Регистрация: 06.05.2016 Сообщений: 260
	03.03.2017, 22:00 [ТС]
	Спасибо, помогло. На версии jQuery 2.4 стартануло. А можете посоветовать современную альтернативу данной библиотеки? Вот такие требования. Небходимо что б по нажатию на маленькую картинку появлялось попап окно по центру экрана, где можно пролистать все оставшиеся картинки из галереи, Да и что б была возможность разблурить фон который под картинкой. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	03.03.2017, 22:05
	Black_Star, можно посмотреть в сторону lightbox, вроде время от времени обновляются файлы на github... 1