javascriptjquerycssfotorama

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

I'm trying to diminish the size of my blog posts by turning every list of images into a fotorama gallery. This works perfectly for one group of images, but as soon as I try to use more than one fotorama, the website refuses to show the images. I assume I should change something in the coding, but I have no idea whatsoever what that should be.

This is the code I wrote for the first 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>

The code for the second fotorama is very similar:

<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>

I've tried making copies of the CSS and JS files and renaming them "fotorama-2" etc, but that didn't seem to help. I've also tried to rename the second stylesheet mentioned in the above code to "stylesheet-2", but when I do that, the website shows some of the captions, and no images for both fotoramas. I'm lost!

The website where I'm trying to apply this code can be accessed here, but as you'll see there's a problem with both fotoramas.

Can you guys help me point out the problem? Thanks in advance, Caenwyr

Solution

  • Turns out Blogger really doesn't like for the first two sections of code (as showcased here under "Set up") to be used multiple times on one page. Once I had discovered that, I started posting those 2 sections at the beginning of each new blog post, but that became just too annoying. So eventually I came up with a far more elegant solution: I put the culprits in the Blogger theme code itself. This is the way to do it:

    Code:

    <!-- 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 -->

    hit "Save Theme" at the top of the page Then you can go ahead and use just the last section of the fotorama code in any of your blog posts, and you can use it as often as you like. Enjoy!