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

Coding multiple fotoramas on one page (in one blog post)

本文关键字：文章 fotorama 编码 一个 一篇      更新时间：2023-09-26

我试图通过将每个图像列表转换为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>

第二个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://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的图像。我迷路了!

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

你们能帮我指出这个问题吗?提前感谢，Caenwyr

您的fotorama工作正常。我可以看到它对所有图像组都有效。我看到带有箭头、拇指和说明文字的图片

原来Blogger真的不喜欢在一个页面上多次使用前两段代码(如这里"设置"下所示)。一旦我发现了这一点，我就开始在每篇新博客的开头发布这两个部分，但这变得太烦人了。所以最终我想出了一个更优雅的解决方案:我把罪魁祸首放在Blogger主题代码本身中。方法如下:

  • 转到仪表盘，
  • 点击"主题"(在其他语言中它的名称不同，但它总是有油漆滚轮图标)
    • 点击"编辑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代码的最后一部分，并且您可以随时使用它。享受吧!

我发现只要在.fotoramadiv:

中添加一个惟一的类就可以解决这个问题。

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月遇到了这个问题，因为我有同样的问题。然而，唯一的区别是我所有的代码都是手写的。我希望其他人能从中受益，因为这让我整个早上都很生气。

相关文章：