Как грамотно залить javascript файл, чтобы он работал?

Question

[Marizza40]

Добрый день! помогите пожалуйста новичку. С горем пополам сделала модальное окно на javascript. Вставила в один сайт, работает хорошо. Сейчас создаю сайт полностью с 0, разбираюсь как всё подключить. Не работает код js, хотя вставила перед закрывающим head код:

<script type="text/javascript" src="/js/script.js"></script>

Путь писала по разному, не помогает. JavaScript от модального окна вставила в файл script.js.

К картинкам id прописала, но тщетно.

Подскажите пожалуйста в чем проблема?

Вставлю код от модального окна:

$(document).ready(function() { 
$("#single_1").fancybox({ helpers: { title : {type : 'float'}}});
$("#single_2").fancybox({openEffect	: 'elastic', closeEffect	: 'elastic', helpers : {title : {type : 'inside'}}});
$("#single_3").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_4").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_5").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_6").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_7").fancybox({helpers : {title : {type : 'over'}}});});

Comments

[WapSter]

на java.

javascript != java вообще, это названия немного похожи.

перед закрывающим head код

вставляй перед </body> и будет тебе счастье.

[Eugene Chefranov]

а jquery подключен?

[Marizza40]

WapSter, Спасибо, учту!

[Marizza40]

Eugene Chefranov, потому что только начала изучать javascript и немного писать на нем. jquery для меня пока темный лес.

[Marizza40]

WapSter, Вставила и ничего не работает, к сожалению

[WapSter]

Marizza40, а jquery подключен?

[Marizza40]

WapSter, нет, я думала его нет смысла подключать, если я им не пользуюсь

[Пашенька]

Marizza40, вы не пользуетесь, а ваш плагин пользуется. Об этом говорит знак доллара.

[Marizza40]

like-a-boss, Хорошо, спасибо огромное!

[Marizza40]

Sniggering Ewigkeit, подключила, перед закрывающим body вставила

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/custom.js"></script>

в файл custom.js вставила

$(document).ready(function() { 
$("#single_1").fancybox({ helpers: { title : {type : 'float'}}});
$("#single_2").fancybox({openEffect	: 'elastic', closeEffect	: 'elastic', helpers : {title : {type : 'inside'}}});
$("#single_3").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_4").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_5").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_6").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_7").fancybox({helpers : {title : {type : 'over'}}});});

и ничего не срабатывает, к сожалению.

[Marizza40]

Sniggering Ewigkeit,
Uncaught ReferenceError: $ is not defined
at about:108
+
Mixed Content: The page at 'https://h2o.ukavt.ru/about' was loaded over HTTPS, but requested an insecure script 'ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery....'. This request has been blocked; the content must be served over HTTPS.
+
script.js:1 Uncaught ReferenceError: $ is not defined
at script.js:1

[Marizza40]

Sniggering Ewigkeit, спасибо, попробую!

Answer 1

[Hlib]

Вставьте код в конец блока body.
В head он прогрузится быстрее чем сам body, соответственно в body ничего не будет, когда js начнет исполнять свой код
p.s. Java это не JavaScript

Comments

[Marizza40]

Вставила и ничего не работает, к сожалению

[Hlib]

Marizza40, прочитал комменты, вы пишите не на чистом JS, а на JQuery, если хотите чтобы код заработал, подключите его, либо замените все $ на document.querySelector

[Marizza40]

Hlib, Подключила перед закрывающем тегом body скрипты:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Kastomnie Skripti -->
<script src="/js/script.js"></script>

в сам script.js вставила

$(document).ready(function() { 
$("#single_1").fancybox({ helpers: { title : {type : 'float'}}});
$("#single_2").fancybox({openEffect	: 'elastic', closeEffect	: 'elastic', helpers : {title : {type : 'inside'}}});
$("#single_3").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_4").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_5").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_6").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_7").fancybox({helpers : {title : {type : 'over'}}});});

и не срабатывает

[Hlib]

Нажмите на ctrl+shift+i, и скажите что написано в консоле, что за ошибка

[Marizza40]

about:108 Uncaught ReferenceError: $ is not defined
at about:108
+
@ about:108
about:1 Mixed Content: The page at 'https://h2o.ukavt.ru/about' was loaded over HTTPS, but requested an insecure script 'ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery....'. This request has been blocked; the content must be served over HTTPS.
+
script.js:1 Uncaught ReferenceError: $ is not defined
at script.js:1

[Hlib]

Все понятно, попробуйте вместо вашей ссылки вставить вот так

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

[Hlib]

Marizza40, Ваш браузер не пропускает ссылку http, потому что это больше не безопасно, cdn jQuery через https должен пройти

[Marizza40]

Hlib, выдало ошибку:
"Uncaught TypeError: $(...).fancybox is not a function
at HTMLDocument. (script.js:2)
at e (jquery-3.4.1.min.js:2)
at t (jquery-3.4.1.min.js:2)"

[Hlib]

Что-то с jquery src="https://code.jquery.com/jquery-2.2.4.min.js""> лучше так

[Marizza40]

те же ошибки:
Uncaught ReferenceError: $ is not defined
at about:108
+
about:1 Failed to find a valid digest in the 'integrity' attribute for resource 'https://code.jquery.com/jquery-2.2.4.min.js' with computed SHA-256 integrity 'BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44='. The resource has been blocked.
+
script.js:1 Uncaught ReferenceError: $ is not defined
at script.js:1

Answer 2

[Владимир]

Вы фансибокс используете?
fancyapps.com/fancybox/3
Там на первой странице инструкиця по быстрому старту, если другой плагин, уверен, там тоже инструкция есть

Comments

[Marizza40]

Спасибо за ответ!
Подключила перед закрывающем тегом body скрипты:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Kastomnie Skripti -->
<script src="/js/script.js"></script>

в сам script.js вставила

$(document).ready(function() { 
$("#single_1").fancybox({ helpers: { title : {type : 'float'}}});
$("#single_2").fancybox({openEffect	: 'elastic', closeEffect	: 'elastic', helpers : {title : {type : 'inside'}}});
$("#single_3").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_4").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_5").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_6").fancybox({openEffect : 'none', closeEffect	: 'none', helpers : {title : {type : 'outside'}}});
$("#single_7").fancybox({helpers : {title : {type : 'over'}}});});

и не срабатывает

[Владимир]

Сделайте пример в песочнице
https://jsfiddle.net/