Плагин jQuery PhotoPile не работает, но так просто, что-то я не так делаю?

Плагин, который я пытаюсь сделать: http://photopile-js.com/ вы можете видеть, что он буквально имеет как.... 3 строки инструкций, которые я вставил ниже. но почему-то вместо кучи фотографий, я получаю вывод в файл изображения. Другими словами, похоже, что CSS работает, но JS никогда не вызываетсяИсправления, которые я пробовал, но это не сработало: - Вместо того, чтобы использовать предлагаемые ссылки на пользовательский интерфейс jQuery и jQuery с photopile-js.com, я перешел на jQuery и попытался использовать последние исходные URL-адреса (это код, который НЕ комментируется Закомментированный код является исходными URL-адресами, рекомендованными для photopile-JS) - я попытался добавить скрипт на страницу, чтобы при загрузке окна вызывалась функция, и я получил функцию из файла photopile.js - я пытался потребовать photopile.js до application.js в javascript include tag файла макета приложения

Код инструкции к фотопайлу

<body>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<script src="YOUR/PATH/TO/photopile.js"></script>
</body>

<div class="photopile-wrapper">
  <ul class="photopile">
   <li>
     <a href="PATH/TO/YOUR/FULLSIZE/IMAGE">
     <img src="PATH/TO/YOUR/THUMBNAIL/IMAGE" alt="Image description" ... />
     </a>
   </li>
   <!-- Add as many list items as you require for your gallery :) -->
  </ul>
</div>

Посмотреть код:

<div class="photopile-wrapper">
  <ul class="photopile">
    <li><%= link_to "#{image_tag('Photo A.png')}".html_safe, "javascript:;" %></li>
    <li><%= link_to "#{image_tag('Photo B.png')}".html_safe, "javascript:;" %></li>
    <li><%= link_to "#{image_tag('Photo C.png')}".html_safe, "javascript:;" %></li>
    <li><%= link_to "#{image_tag('Photo E.jpg')}".html_safe, "javascript:;" %></li>
    <!-- Add as many list items as you require for your gallery :) -->
  </ul>
</div>
<%= javascript_include_tag "photopile", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js", "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" %>
<%= stylesheet_link_tag "photopile" %>

<script> <!-- I added this, didn't work -->
window.onload = function init() {
};
</script> 

3 ответа

Решение

Я не могу объяснить, почему это так... но я много пробовал, и это имело значение:

Вместо использования javascript_include_tag для файлов JQuery, я буквально должен был использовать script src, И это буквально сделало это.

Похоже, у вас есть все фотографии в одном теге

  • . Я не использовал библиотеку, но они должны быть в отдельных тегах списка?

    Что-то вроде этого?

    <li>
          <%= link_to "#{image_tag('Photo A.png')}".html_safe, "javascript:;" %>
    </li>
    <li>
          <%= link_to "#{image_tag('Photo B.png')}".html_safe, "javascript:;" %>
    </li>
    
  • Где вы загружаете свой Javascript?

    Попробуйте выполнить загрузку после разметки, связанной с вашей фотолабораторией, или, как минимум, загрузите photopile.js после.

    Другие вопросы по тегам