Кодирование нескольких фоторам на одной странице (в одном посте блога)

Я пытаюсь уменьшить размер своих сообщений в блоге, превращая каждый список изображений в галерею фоторам. Это отлично работает для одной группы изображений, но как только я пытаюсь использовать более одной фоторамы, веб-сайт отказывается показывать изображения. Я предполагаю, что мне нужно что-то изменить в кодировке, но я понятия не имею, что это должно быть.

Это код, который я написал для первой фоторамы:

<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», но когда я это делаю, на веб-сайте отображаются некоторые подписи и нет изображений для обеих фоторам. Я потерялся!

Веб-сайт, на котором я пытаюсь применить этот код, доступен по адресу здесь, но, как вы увидите, есть проблема с обеими фоторамами.

Можете ли вы помочь мне указать на проблему? Заранее спасибо, Кенвир

Caenwyr 27.08.2015 источник

Ответы (3)

arrow_upward
0
arrow_downward

Ваша фоторама работает нормально. Я вижу, что он работает со всеми группами изображений. Я вижу изображения со стрелками, большими пальцами и подписями.

Sylvio Ruiz Neto 11.09.2015

comment

да, оказалось, мне пришлось удалить некоторые строки здесь и там. Метод проб и ошибок сделал свое дело для меня! - Caenwyr; 06.10.2015

comment

хорошо, похоже, я должен немного уточнить это: полное описание выглядит так: - Caenwyr; 31.10.2018

arrow_upward
0
arrow_downward

Оказывается, Blogger действительно не любит первые два раздела кода (как показано здесь в разделе "Настройка"). для многократного использования на одной странице. Как только я обнаружил это, я начал публиковать эти 2 раздела в начале каждого нового сообщения в блоге, но это стало слишком раздражать. Поэтому в конце концов я придумал гораздо более элегантное решение: я поместил виновников в сам код темы 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 в любом из ваших сообщений в блоге, и вы можете использовать его так часто, как захотите. Наслаждаться!

Caenwyr 31.10.2018

arrow_upward
0
arrow_downward

Я обнаружил, что это было просто исправлено добавлением уникального класса в div .fotorama:

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 года, потому что у меня была точно такая же проблема. Однако единственная разница в том, что весь мой код написан от руки. Я надеюсь, что кто-то еще может извлечь из этого пользу, потому что это сводило меня с ума все утро.

DondeEstaMiCulo 14.08.2020

Кодирование нескольких фоторам на одной странице (в одном посте блога)

Ответы (3)

Вопросы по теме