javascript - 在一页上编码多个 fotoramas(在一篇博文中)

Question

我试图通过将每个图像列表变成一个 fotorama 画廊来缩小我的博客文章的大小。这对一组图像非常有效，但是当我尝试使用多个 fotorama 时，该网站拒绝显示这些图像。我假设我应该更改编码中的某些内容，但我不知道应该是什么。

这是我为第一个 fotorama 编写的代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link  href="https://dl.dropboxusercontent.com/u/48508051/fotorama-4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="https://dl.dropboxusercontent.com/u/48508051/fotorama-4.6.4/fotorama.js"></script> <!-- 16 KB -->

<div class="fotorama" data-allowfullscreen="true">
  <img src="http://2.bp.blogspot.com/-2xcYw8-_lE4/U_2ziDiEp7I/AAAAAAAAdqE/F-Khq_Ce1J0/s1600/20140716_195924.jpg" data-caption="de lobby van ons stulpje voor vannacht">
  <img src="http://4.bp.blogspot.com/-IF3mf9xLIHs/U-SnLmsKPBI/AAAAAAAAchQ/NisuNpBJI0A/s1600/IMG_20140716_220524.jpg" data-caption="Canal Grande">
  <img src="http://1.bp.blogspot.com/-ZvtMZcgvhfw/U-SnLtnVHGI/AAAAAAAAchQ/azDit8HYh5M/s1600/PANO_20140716_221625.jpg" data-caption="The Mirage. In de palmbomen zaten verborgen speakers te krekelen dat het een lieve lust was">
</div>

第二张图片的代码非常相似:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link  href="https://dl.dropboxusercontent.com/u/48508051/fotorama-4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="https://dl.dropboxusercontent.com/u/48508051/fotorama-4.6.4/fotorama.js"></script> <!-- 16 KB -->

<div class="fotorama" data-allowfullscreen="true">
  <img src="http://1.bp.blogspot.com/-7RII2ZKOQNk/U-Sc-HYAq2I/AAAAAAAAcdo/qZDGh9R2Ado/s1600/_MG_6371_stitch-bewerkt-bewerkt.jpg" data-caption="Rimview Trail">
  <img src="http://4.bp.blogspot.com/-MqgPBT17_AU/U-SdE3lXdAI/AAAAAAAAcNo/iNNyNUoZqWs/s1600/_MG_6384.jpg" data-caption="vasthoudend boompje!">
  <img src="http://1.bp.blogspot.com/-t4WV4Mgayuk/U-SdR8gjaxI/AAAAAAAAcOI/GBcsiEh0a9c/s1600/_MG_6415.jpg" data-caption="hoodoos">
  <img src="http://2.bp.blogspot.com/-iuTX0hOIINk/U-SdWS5TbNI/AAAAAAAAcOY/qk5h-AHxEmw/s1600/_MG_6423.jpg" data-caption="Wat een kleurenpracht hier!">
  <img src="http://3.bp.blogspot.com/-ttx8-c_KQ2w/U-Sdd8ASQaI/AAAAAAAAcO4/K5-TTNNY5sY/s1600/_MG_6433.jpg" data-caption="Wie veel verbeelding heeft, ziet in deze rots Queen Victoria (ik niet, misschien omdat ik het brave mens nooit heb gekend)">
  <img src="http://4.bp.blogspot.com/-inhXqeMp9Q0/U-SdkQvv5YI/AAAAAAAAceA/ENcvmKa_0Z0/s1600/_MG_6461_stitch-bewerkt.jpg" data-caption="Soms is Cathy een beetje destructief">
  <img src="http://3.bp.blogspot.com/-hhnCTXIqlZc/U-SdmG0WQNI/AAAAAAAAcPY/UgVxPM_usvQ/s1600/_MG_6473-bewerkt.jpg" data-caption="Een nauwe kloof in...">
  <img src="http://2.bp.blogspot.com/-rAHzzTw8Ov8/U-SdpevRSRI/AAAAAAAAch8/A228Z9ul30E/s1600/_MG_6497_stitch.jpg" data-caption="... en zigzaggend naar boven">
</div>

我已经尝试制作 CSS 和 JS 文件的副本并将它们重命名为“fotorama-2”等，但这似乎没有帮助。我还尝试将上面代码中提到的第二个样式表重命名为“stylesheet-2”，但是当我这样做时，网站显示了一些标题，并且两个 fotoramas 都没有图像。我迷路了!

可以访问我尝试应用此代码的网站here ，但正如您将看到的，两个照片都有问题。

大家能帮我指出问题吗？提前致谢，凯恩维尔

Answer 1

您的 fotorama 工作正常。我可以看到它适用于所有图像组。我看到带有箭头、拇指和标题的图像。