Лайтбокс или prettyphoto

Question

Я учу себя, как создать сайт галереи для моих работ с использованием CSS, и Dreamweaver в качестве редактора сценариев. Я нашел несколько хороших PDF-файлов, и сайт развивался хорошо, пока я не попытался включить Lightbox или prettyphoto. Мои миниатюры меняются на полноэкранные, но их нет. Существуют ли учебники, показывающие, куда идут файлы и примеры кода?

Answer 1

Оба варианта поставляются с собственной документацией и, как правило, примером загрузки, которую вы можете просмотреть. Если этого нет, изучите источник демонстраций в Интернете, чтобы увидеть, как на CSS ссылаются файлы.

Лайтбокс / Как использовать?

# reference both jQuery and lightbox
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

# reference the stylesheet
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" />

# indicate which links are lightbox links
<a href="bigImage.jpg" class="lightbox">
  <img src="littleImage.jpg" />
</a>

# activate lightbox on lightbox links
$("a.lightbox").lightBox();

Prettyphoto / Как использовать?

# reference both jQuery and prettyphoto
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

# reference the stylesheet
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />

# indicate which links are prettyphoto link
<a href="bigImage.jpg" rel="prettyPhoto">
  <img src="littleImage.jpg" />
</a>

# activate prettyphoto on prettyphoto links
$("a[rel^='prettyPhoto']").prettyPhoto();