在一个页面上编码多个fotoramas (在一个博客文章中)

Question

我试图缩小我的博客文章的规模，将每一张图片列表都转换成一个福托拉马画廊。这对一组图像非常有效，但是一旦我尝试使用多个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“等，但这似乎没有帮助。我还尝试将上面代码中提到的第二个样式表重命名为“样式表-2”，但是当我这样做时，网站会显示一些标题，并且没有两个fotoramas的图片。我迷路了!

我试图应用这段代码的网站可以访问这里，但正如您所看到的，这两个fotoramas都有一个问题。

你们能帮我指出问题吗？预先谢谢你，卡恩韦尔

Answer 1

事实证明，博主并不喜欢在一个页面上多次使用前两部分代码(如"Set“下面显示的这里 )。一旦我发现了这一点，我就开始在每一篇新的博客文章的开头发布这两个部分，但这变得太烦人了。因此，最终我想出了一个更优雅的解决方案:我把罪魁祸首放在博客主题代码本身中。这就是做这个的方法：

• 去仪表盘，
• 点击“主题”(它在其他语言中有不同的名称，但它总是有画辊图标)
• 点击“编辑HTML”
• 将以下文本块直接粘贴到标签下面：

代码：

<!-- 1. Link to jQuery (1.8 or later), -->
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/> <!-- 33 KB -->
<!-- fotorama.css & fotorama.js. -->
   <link href='http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css' rel='stylesheet'/> <!-- 3 KB -->
   <script src='http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js'/> <!-- 16 KB -->

点击页面顶部的“保存主题”，你就可以继续在你的博客文章中使用fotorama代码的最后一部分，你可以随意使用它。享受吧！

Answer 2

你的羊驼运转得很好。我可以看到它在所有的图像组上都能工作。我看到有箭头、大拇指和字幕的图像。

Answer 3

我发现，通过向.fotorama div添加一个惟一的类，可以简单地修复这个问题：

​

div.fotorama {
  margin: 100px 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

<div class="fotorama d-world" data-autoplay="true">
  <img src="https://www.wdwinfo.com/wp-content/uploads/2020/05/MK28.jpg">
  <img src="https://www.wdwinfo.com/wp-content/uploads/2020/05/MK29.jpg">
  <img src="https://i.pinimg.com/736x/6c/df/fc/6cdffcd0d1bcd98120cc1f4c748c2b11.jpg">
</div>

<div class="fotorama universal" data-autoplay="true">
  <img src="https://www.travelingmom.com/wp-content/uploads/2019/04/Universal-Ball-800x450.jpg">
  <img src="https://i0.wp.com/www.disneytouristblog.com/wp-content/uploads/2019/06/volcano-bay-water-park-universal-studios-orlando-florida-865.jpg?fit=800%2C528&ssl=1">
  <img src="https://nomadfacesdotcom.files.wordpress.com/2019/04/universalstudiosorlando.jpg">
</div>

<div class="fotorama knotts" data-autoplay="true">
  <img src="https://www.attractiontickets.com/sites/default/files/styles/photo_carousel_tablet_plus/public/2019-06/knotts_berry_farm16.jpg">
  <img src="https://www.hotelcurrent.com/wp-content/uploads/2019/06/Knotts-Berry-Farm-Chair-Lift-Ride-1038x687.jpg">
  <img src="https://cdn-cloudfront.cfauthx.com/binaries/content/gallery/kb-en-us/ctas/play/knotts-berry-farm/kbf-campsnoopy-lg-ctav2.jpg">
</div>

​

我在2020年8月遇到这个问题，因为我也遇到了同样的问题。然而，唯一的区别是，我所有的代码都是手工编写的。我希望其他人能从中受益，因为这使我整个上午都发疯了。