Путать с JavaScript / HTML shadowbox для фотографий - PullRequest
Новая
       41

Путать с JavaScript / HTML shadowbox для фотографий

0 голосов
/ 05 ноября 2018

Я новичок в веб-дизайне / кодировании и работаю над персональным сайтом. Я пытаюсь создать shadowbox в JavaScript ... Я скопировал код с shadowbox-js.com, но выкидываю ошибку в строке 8 в Dreamweaver. Кроме того, я не знаю, как кодировать фотографии в HTML-файле. У меня есть уменьшенное изображение, которое я бы хотел, чтобы на нем можно было кликать, чтобы вы могли увеличить его во всплывающем окне. Я создал увеличенную версию фотографии (названной по-другому, чем миниатюра, исправлю это позже), но не понимаю, как их кодировать в HTML-файл. Любая помощь с благодарностью!

Вот кодекс файлов:

https://codepen.io/AJ2021/pen/pQzmOR#=

Строка 100 CSS находится в новом файле с именем shadowbox.css.

Строка в HTML, с которой я запутался, это: 

<section> 
    <font face="Lucida Bright">
    <center><h1 id="pagename">Gallery</h1></center>


    <div id="gallery">
    <!-- Here are the gallery thumbnails -->
    <a href="_images/php_family_marina.png"
    rel="shadowbox[picture]" title="My family at Sunbury Marina"
    <img src="tmb_Lawton_Family.png">

    </div>

</section>

1 Ответ

0 голосов
/ 06 ноября 2018

вы пропустили > и </a> для тега <a> и назовите его с shadowbox(), а не Shadowbox.init()

shadowbox();
#gallery img {padding: 10px; margin: 5px;background: green}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shadowbox-js@3.0.3/source/shadowbox.css">
<script src="https://cdn.jsdelivr.net/npm/shadowbox-js@3.0.3/source/shadowbox.min.js"></script>

<div id="gallery">

  <a href="https://i.postimg.cc/Kjn5GpVF/full-a.jpg" rel="shadowbox[picture]" title="a">
    <img src="https://i.postimg.cc/mZMjyhrq/thumb-a.jpg">
  </a>

  <a href="https://i.postimg.cc/PrQM0cYQ/full-b.jpg" rel="shadowbox[picture]" title="b">
    <img src="https://i.postimg.cc/4Ng5LZ73/thumb-b.jpg">
  </a>
  
</div>
...