灯箱或漂亮的照片

Question

我正在教自己如何使用CSS和Dreamweaver作为脚本编辑器为我的作品建立一个画廊网站。我找到了一些很好的pdf，并且该网站很顺利，直到我尝试合并Lightbox或prettyphoto。我的缩略图变为全屏，但效果不存在。是否有任何教程可以显示哪些文件位于哪里以及代码示例？

Answer 1

这两个选项都附带自己的文档，通常是您可以查看的示例下载。如果不存在，请检查在线演示的来源，以了解如何引用CSS文件。

灯箱/ How to use?

# 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 / How to use?

# 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();