Помогите установить javascript на сайт

117
13 декабря 2021, 03:30

В разработке сайта, начинающий. Не могу подцепить javascript к шаблону сайта. Выгрузила в Codepen: 

$(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({ 
    	helpers : { 
    		title : { 
    			type : 'over' 
    		} 
    	} 
    }); 
});
/*Body*/ 
.body { 
    margin: 0; 
    font-family: 'Roboto', sans-serif; 
     
    font-size: 14px; 
    line-height: 1.5; 
     
} 
*, *::before, *::after{ 
    box-sizing: border-box; 
} 
.container { 
    max-width: 1280px; 
    margin: 0 auto; 
    width: 100%; 
} 
 
/*Header*/ 
.header { 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1000; 
    padding: 30px 0; 
} 
 
.header_iner { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
     
    border-bottom: 1px solid #0092db; 
     
    padding: 35px 0;   
} 
.header_logo{ 
    float:left; 
    padding-top: 10px; 
} 
.logo_company{ 
    width: 248px; 
} 
 
.nav{ 
    display: flex; 
    flex-flow: row nowrap; 
    font-size: 15px; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding: 40px 30px; 
    left: 100%; 
} 
 
.nav_link{ 
    display: flex; 
    margin-left: 50px; 
    color: #175a88; 
    text-decoration: none; 
    font-family: Roboto;  
    transition: 0.1s linear;      
} 
 
.nav_link:first-child{ 
    margin-left: 0; 
} 
.nav_link:hover{ 
    text-decoration: none; 
    color: #0092db; 
} 
.tel_h{ 
    float: right; 
    font-family: 'Roboto', sans-serif; 
} 
.phone_header{ 
    display: inline-grid; 
} 
.phone { 
    display: flex; 
    font-size: 18px; 
    font-weight: 700; 
    text-transform: uppercase; 
    float: right; 
    letter-spacing: 1px; 
    text-align: right; 
} 
.phone_link{ 
    text-decoration: none; 
    color: #175a88; 
     
    transition: .01s linear; 
    margin-top: 4px; 
    font-size: 14px; 
} 
.phone_link:hover{ 
    color: #0092db; 
    text-decoration: none; 
}  
.img_phone{ 
    width: 20px; 
    height: 20px; 
    margin: 0 6px 6px 0; 
} 
 
.time { 
    font-size: 13px; 
    margin-top: 2px; 
    font-weight: 500; 
    color:#175a88; 
} 
.email { 
    color: #175a88; 
    font-size: 13px; 
    text-transform: uppercase; 
    font-weight: 600; 
    text-decoration: none; 
    margin-top: 3px; 
} 
     
.email:hover{ 
    color: #0092db; 
    text-decoration: none; 
} 
.email_link:hover{ 
    color: #0092db; 
    text-decoration: none;    
} 
.img_email{ 
    width: 25px; 
    height: auto; 
    margin: 5px 15px 0 0; 
} 
.img_time{ 
    width: 21px; 
    height: auto; 
    margin: 0 6px 0 2px;    
} 
     
.txt_help{ 
    font-size: 14px; 
    color: #012350; 
    line-height: 1; 
} 
 
/*KOMPANI*/ 
 
.kompani{ 
    margin-bottom: 45px; 
} 
.number{ 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: center; 
    font-family: 'Roboto', sans-serif; 
} 
.numbers_tree{ 
    margin-right: 85px; 
} 
.number_kompani { 
    font-size: 60px; 
    color: #12486d; 
    font-weight: bold; 
    line-height: 25px; 
    margin-top: 30px; 
    text-align: left; 
    margin-bottom: -2px; 
} 
.number_img{ 
    width: 26%; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 
.text_kompani{ 
    font-size: 17px; 
    color: #12486d; 
    margin-top: 16px; 
    margin-left: 9px; 
    letter-spacing: 1.5px; 
    text-align: center; 
    line-height: 25px; 
    text-transform: uppercase; 
    font-weight: 600; 
} 
.txt_komp{ 
    margin-top: 18px; 
    display: flex; 
    flex-flow: row nowrap; 
} 
.imaginari{ 
    width: 380px; 
    height: auto; 
    margin-left: 25px; 
} 
.txt_komp_txt{ 
    font-size: 14px; 
    color: #000; 
    line-height: 1.5; 
    width: 50%; 
    border-right: 1px solid; 
    padding-right: 20px; 
    font-family: 'Roboto', sans-serif; 
} 
.txt_komp_text{ 
    font-size: 14px; 
    color: #000; 
    line-height: 1.5; 
    width: 50%; 
    margin-left: -1px; 
    padding-left: 20px; 
    font-family: 'Roboto', sans-serif; 
} 
.certificat{ 
    margin-top: 40px; 
} 
.img_for_certificates{ 
    display: flex; 
    flex-flow: row nowrap; 
} 
.img_certifi{ 
    width: 30%; 
    margin-top: 15%; 
    height: 160px; 
} 
.img_certifi1{ 
    width: 70%; 
    margin-top: 35%; 
    height: 98px; 
} 
 
.img_for_product{ 
    display: flex; 
    flex-flow: row nowrap; 
} 
.img_pro{ 
    width: 100%; 
     
} 
.img_product{ 
    margin-right: 10px; 
    margin-bottom: 40px; 
} 
 
.phone_txt_inner_text{ 
    font-size: 15px; 
    color: #fff; 
    font-weight: normal; 
} 
 
/*footer*/ 
 
.footer{ 
    width: 100%; 
    background: #12486d; 
    padding: 50px 0; 
    position: relative; 
} 
.footer_contact{ 
    display: flex; 
    flex-flow: row nowrap; 
    padding: 0 60px; 
    font-family: 'Roboto', sans-serif; 
} 
.footer_logo{ 
    text-align: left; 
    display: flex; 
    flex-flow: row nowrap; 
} 
.logo_img{ 
    vertical-align: middle; 
    border-style: none; 
    width: 130%; 
    text-align: center; 
    padding-bottom: 60px; 
} 
.phone_icons{ 
    text-align: left; 
    display: flex; 
    width: 22%; 
    padding-left: 40px; 
} 
.phone_txt_inner_text_one{ 
    text-align: right; 
    color: #fff; 
    margin-top: -1px; 
    font-size: 14px; 
    width: 130%; 
} 
.geo{ 
    width: 40px; 
    height: 25px; 
    padding-right: 20px; 
    padding-top: 5px; 
} 
.phone_txt{ 
    font-size: 16px; 
    color: #fff; 
    font-weight: bold; 
} 
.phone_txt_inner_text{ 
    font-size: 15px; 
    color: #fff; 
    font-weight: normal; 
}
<!DOCTYPE html> 
<html xml:lang="ru" lang="ru"> 
<head> 
     
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<meta name="keywords" content="Автоматизация КНС, автоматизация насосных станций"/> 
    <meta name="description" content="Автоматизация КНС и насосных станций ООО ИТЦ УКАВТ"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
	 
<title>Автоматизация КНС и насосных станций ООО "ИТЦ УКАВТ"</title> 
 
    <link rel="icon" href="/images/favicon.png"> 
    <link rel="apple-touch-icon" href="/images/favicon1.png"> 
    <link rel="stylesheet" href=".../docs/fonts/Roboto/Roboto.css" type="text/css"> 
    <link rel="stylesheet" href="assets/css/style.css" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" type="text/css" rel="stylesheet"> 
    <script type="text/javascript" src="/js/script.js"></script> 
     
  </head> 
<body> 
         
<header class="header"> 
<div class="container"> 
    <div class="header_inner"> 
         
        <div class="header_logo"> 
        <a href="https://h2o.ukavt.ru/"><img src="/images/logo.jpg" alt="Логотип УКАВТ" title="Логотип УКАВТ" class="logo_company"></a> 
        </div> <!--/.header_logo--> 
    <div class="tel_h"> 
        <div class="txt_phone"><p class="txt_help">ОТВЕТИМ НА ВСЕ ВОПРОСЫ:</p> 
        </div><!--/.txt_phone--> 
        <div class="phone_header"> 
         <div class="phone"><img src="/images/nav_1.png" class="img_phone"><a href="tel:+73517964277" class="phone_link">+7 (351) 700-75-17</a></div><!--/.phone--> 
         <div class="phone"><img src="/images/nav_2.png" class="img_phone"><a href="mailto:sale@ukavt.ru" class="email">sale@ukavt.ru</a></div><!--/.email--> 
         <div class="phone"><img src="/images/nav_3.png" class="img_phone"><p class="time">ПН-ПТ С 9:00 ДО 17:00</p></div><!--/.email--> 
         </div> 
    </div> <!--/.tel_h--> 
            <nav class="nav"> 
                <a class="nav_link" href="https://h2o.ukavt.ru/about">О компании</a> 
                <a class="nav_link" href="https://h2o.ukavt.ru/avtomatizaciya_kns">Автоматизация КНС</a> 
                <a class="nav_link" href="https://h2o.ukavt.ru/nasosnye_stancii">Насосные станции</a> 
                <a class="nav_link" href="https://h2o.ukavt.ru/contacts">Контакты</a> 
            </nav>  
         
    </div>  <!--/.header_inner-->   
</div><!--/.container--> 
</header> 
 
<div class="container"> 
<div class="company_h1_h1"> 
               <h1>О компании</h1> 
 </div><!--/.company_h1_h1-->  
 <div class="line"> 
  </div><!--/.line--> 
</div> 
 
<div class="kompani"> 
  <div class="container"> 
         
       <div class="komp_inner"> 
            <div class="number"> 
             <div class="numbers_tree"> 
                <img src="/images/number_1.jpg" title="Опыт работы" alt="Опыт работы" class="number_img"> 
                <p class="text_kompani">лет</p> 
            </div> 
            <div class="numbers_tree"> 
                <img src="/images/number_2.jpg" title="Реализованные проекты" alt="Реализованные проекты" class="number_img"> 
                <p class="text_kompani">готовых проектов</p> 
            </div> 
            <div class="numbers_tree"> 
                <img src="/images/number_3.jpg" title="Квалифицированный персонал" alt="Квалифицированный персонал" class="number_img"> 
                <p class="text_kompani">специалистов</p> 
            </div> 
            </div> 
            <div class="txt_komp"> 
<p class="txt_komp_txt">ООО ИТЦ «УКАВТ» - это команда профессионалов, многопрофильный инженерно – технический центр с многолетним опытом работы на рынке автоматизации технологических процессов. За годы деятельности компании удалось успешно реализовать большое количество проектов по комплексной автоматизации и диспетчеризации, а также 
сформировать сильную команду профессионалов, ответственно выполняющих свою работу.</p> 
<p class="txt_komp_text">Специалисты нашей компании разрабатывают комплексные решения с использованием надежного оборудования по отличному соотношению цена/качество, от ведущих фирм-производителей.</p> 
            </div> 
        </div> 
         
  </div>   
</div> 
 
<div class="certificat"> 
<div class="container"> 
<div class="company_h1_h1"> 
               <h1>Дилерские сертификаты</h1> 
 </div><!--/.company_h1_h1-->  
 <div class="line"> 
  </div><!--/.line--> 
<div class="company_h1_h1"> 
<p class="txt">Наша компания активно работает над развитием своей партнерской сети. На сегодняшний день, нашими партнерами в области поставок КИПиА являются такие компании как Овен, General Electric, Bosch Rexroth, BD Sensors и другие. Многолетнее успешное сотрудничество — наилучшая рекомендация для наших будущих Партнеров и Клиентов. Все необходимое оборудование от наших стратегических партнеров, вы сможете приобрести на нашем официальном сайте: 
<div class="button_classa_ab"> 
    <a href="https://shop.ukavt.ru/" class="button_ab">Перейти на сайт</a>    
</div><!--/.button_classa_ab--> 
</div><!--/.company_h1_h1--> 
</div><!--/.container--> 
 
 
 
<div class="certificates"> 
    <div class="container"> 
  
        <div class="img_for_certificates"> 
             
            <div class="dealer_certificate"> 
            <a id="single_1" href="https://picpig.ru/images/2019/12/05/certificate_1.jpg" height="213" title="Сертификат дилера КПСР"> <img width="400" alt="Сертификат дилера КПСР" src="https://picpig.ru/images/2019/12/05/certificate_1.jpg" class="img_certifi" height="270" title="Сертификат дилера КПСР" ИТЦ="null"> </a> 
            </div> 
            <div class="dealer_certificate"> 
            <a id="single_2" href="/images/certificate_1.jpg" height="213" title="Сертификат дилера PIEZUS"> <img width="400" alt="Сертификат дилера PIEZUS" src="/images/certificate_1.jpg" class="img_certifi" height="270" title="Сертификат дилера PIEZUS" ИТЦ="null"> </a> 
            </div> 
            <div class="dealer_certificate"> 
            <a id="single_3" href="/images/certificate_2.jpg" height="213" title="Сертификат дилера Тесей"> <img width="400" alt="Сертификат дилера Тесей" src="/images/certificate_2.jpg" class="img_certifi" height="270" title="Сертификат дилера Тесей" ИТЦ="null"> </a>     
            </div> 
            <div class="dealer_certificate"> 
            <a id="single_4" href="/images/certificate_3.jpg" height="213" title="Сертификат дилера Овен"> <img width="400" alt="Сертификат дилера Овен" src="/images/certificate_3.jpg" class="img_certifi" height="270" title="Сертификат дилера Овен" ИТЦ="null"> </a> 
            </div> 
            <div class="dealer_certificate"> 
            <a id="single_5" href="/images/certificate_4.jpg" height="213" title="Сертификат дилера BD Sensors"> <img width="400" alt="Сертификат дилера BD Sensors" src="/images/certificate_4.jpg" class="img_certifi" height="270" title="Сертификат дилера BD Sensors" ИТЦ="null"> </a> 
             </div> 
            <div class="dealer_certificate"> 
            <a id="single_6" href="/images/certificate_6.jpg" height="213" title="Сертификат дилера GE"> <img width="400" alt="Сертификат дилера GE" src="/images/certificate_6.jpg" class="img_certifi1" height="270" title="Сертификат дилера GE" ИТЦ="null"> </a>     
            </div> 
            <div class="dealer_certificate"> 
            <a id="single_7" href="/images/certificate_7.jpg" height="213" title="Сертификат дилера Прома"> <img width="400" alt="Сертификат дилера Прома" src="/images/certificate_7.jpg" class="img_certifi1" height="270" title="Сертификат дилера Прома" ИТЦ="null"> </a> 
            </div> 
             
        </div><!--/.img_for_certificates--> 
     
    </div><!--/.container--> 
</div><!--/.certificates--> 
</div><!--/.certificat--> 
 
<div class="container"> 
<div class="company_h1_h1"> 
               <h1>Фотографии производства</h1> 
 </div><!--/.company_h1_h1-->  
 <div class="line"> 
  </div><!--/.line--> 
</div> 
 
<div class="production"> 
 <div class="container"> 
      
     <div class="img_for_product"> 
         <div class="img_product"> 
          <img src="https://i.ibb.co/0MyHMJ3/IMG-7404-min.jpg" title="Фото производства ИТЦ УКАВТ" alt="Фото производства ИТЦ УКАВТ" class="img_pro">   
         </div> 
         <div class="img_product"> 
          <img src="https://i.ibb.co/hC0Rb3c/IMG-7408-min.jpg" title="Фото производства ИТЦ УКАВТ" alt="Фото производства ИТЦ УКАВТ" class="img_pro">   
         </div> 
         <div class="img_product"> 
          <img src="https://i.ibb.co/Lg2hWyv/IMG-7402-min.jpg" title="Фото производства ИТЦ УКАВТ" alt="Фото производства ИТЦ УКАВТ" class="img_pro">   
         </div> 
     </div> 
  
 </div> 
</div> 
 
 
 
<footer class="footer"> 
<div class="container"> 
<div class="footer_inner"> 
    <div class="footer_container"> 
    <div class="footer_logo"> 
    <a href="#"><img src="/images/footer_logo.png" alt="Логотип УКАВТ" title="Логотип УКАВТ" class="logo_img"></a> 
        <div class="footer_contact"> 
             
            <div class="phone_icons"> 
                <img src="/images/icons_footer_1.png" alt="geo" title="geo" class="geo">  
                <div class="phone_txt">Адрес 
                <div class="phone_txt_inner"> 
                <p class="phone_txt_inner_text">г. Челябинск, Комсомольский пр. д. 2 офис 603</p> 
            </div><!--/.phone_txt_inner--> 
        </div><!--/.phone_txt--> 
            </div><!--/.phone_icons--> 
              
         
            <div class="phone_icons"> 
        <img src="/images/icons_footer_2.png" alt="e-mail" title="e-mail" class="geo">  
        <div class="phone_txt">E-mail 
            <div class="phone_txt_inner"> 
            <p class="phone_txt_inner_text">sale@ukavt.ru</p> 
            </div><!--/.phone_txt_inner--> 
        </div><!--/.phone_txt--> 
        </div><!--/.phone_icons--> 
             
            <div class="phone_icons"> 
        <img src="/images/icons_footer_3.png" alt="phone" title="phone" class="geo">   
        <div class="phone_txt">Телефон 
            <div class="phone_txt_inner"> 
            <p class="phone_txt_inner_text">+7 (351) 700 75 17</p> 
            </div><!--/.phone_txt_inner--> 
        </div><!--/.phone_txt--> 
        </div><!--/.phone_icons-->   
         
        <div class="phone_icons"> 
            <div class="phone_txt_inner"> 
            <p class="phone_txt_inner_text_one">Все права защищены, ООО "ИТЦ УКАВТ"<br> 
            ИНН/КПП 7448122124/744801001<br> 
            ОГРН № 1097448007216</p> 
            </div><!--/.phone_txt_inner--> 
        </div><!--/.phone_icons-->   
             
       </div><!--/.footer_contact-->         
    </div><!--/.footer_logo--> 
    </div><!--/.footer_container--> 
    </div><!--/.footer_inner--> 
</div><!--/.container--> 
</footer>  
<!-- jQuery --> 
<script 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" 
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
  crossorigin="anonymous"></script> 
 
<!-- Kastomnie Skripti --> 
<script src="/js/script.js"></script> 
        </body> 
</html>

В консоле выдает ошибки: 

Uncaught ReferenceError: $ is not defined
at about:81
Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' with computed SHA-256 integrity 'hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8='. The resource has been blocked.
Uncaught ReferenceError: $ is not defined
at script.js:1

jQuery меняла неоднократно.

Answer 1

Нужно скачать, сохранить вместе с сайтом (внешние ссылки - плохая идея) и подключить JQuery (файл jquery.min.js ) и fancybox

По аналогии как вы делали с <script type="text/javascript" src="/js/script.js"></script> Там же кладёте JQuery и подключаете точно так же.

READ ALSO
Как сделать открытие следующего блока из квадрата, расположенного в первом блоке?
javascript

Как сделать открытие следующего блока из квадрата, расположенного в первом блоке?

Разместил вот здесь всю реализациюВ каком направлении думать, чтобы реализовать раскрытие нового блока как-бы из квадрата, который расположен...

 70
Как выбрать и отредактировать нужные элементы в нескольких &#39;li&#39;?
javascript

Как выбрать и отредактировать нужные элементы в нескольких 'li'?

У меня есть список , в котором будет неизвестное количество 'li'В каждой li будут всегда одинаковые элементы,которые должны редактироваться...

 118
Как сгруппировать элементы массива на javascript
javascript

Как сгруппировать элементы массива на javascript

Всем приветДопустим у нас есть массив элементов со свойствами name и ID

 144
Как сохранить в переменной значение тега input в JavaScript?
javascript

Как сохранить в переменной значение тега input в JavaScript?

Нужно чтобы после того, как пользователь введёт своё имя и нажмёт на Enter , начиналась анимация и вместо имяПользователя было значение переменной...

 222