0

Хочу использовать на своем сайте данный код с code pen:

<style >
  .hidden {
  overflow: hidden;
  display: none;
  visibility: hidden;
}
.btn-gallery img {
  max-width: 300px;
  height: auto;
}
</style>
<script src="js/gallery.js"></script>  
<a href="#gallery-1" class="btn-gallery">
      <img src="https://images.unsplash.com/photo-1462774603919-1d8087e62cad?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=0ebd884b4d6ac379f42146a2b26fbf2e" alt="" />
    </a>
 <div id="gallery-1" class="hidden">
  <a href="https://images.unsplash.com/photo-1462774603919-1d8087e62cad?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=0ebd884b4d6ac379f42146a2b26fbf2e">Image 1</a>
  <a href="https://images.unsplash.com/photo-1460499593944-39e14f96a8c6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=d8bc3d45d5eeaaf4f576665707f4fddb">Image 2</a>
  <a href="https://images.unsplash.com/photo-1434434319959-1f886517e1fe?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=218dfdd2c0735dbd6ca0f718064a748b">Image 3</a>
  <a href="https://images.unsplash.com/photo-1431576901776-e539bd916ba2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=a0941b28175909ca62f096eb533b0c97">Image 4</a>
</div>

https://codepen.io/ksp9241/pen/OGadRE Но я не могу правильно подключить js скрипт. Подключала его сверху, снизу не получается в чем моя ошибка?

1
  • 2
    Вы подключили библиотеку Magnific Popup? https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js и https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js 3 мая 2019 в 15:10

1 ответ 1

1

В тэге head подключите jQuery, Ваш JavaScript и файлы Magnific Popup. Убедитесь, что jQuery подключен до Вашего JavaScript файла (как в коде ниже).

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.