Search code examples
javascriptjqueryruby-on-rails-4jquery-pluginsphoto-gallery

jQuery plugin photopile not working, but so simple, anything I might be doing wrong?

Plugin I'm trying to do: http://photopile-js.com/ you can see it literally has like.... 3 lines of instructions that I've pasted below. but somehow instead of a pile of photos, I get the output attached in the image file. In other words, it looks like the CSS is working, but the JS is never called enter image description here Fixes I tried but that didn't work: - Instead of using the suggested jQuery and jQuery UI links from photopile-js.com, I went to jQuery and tried to use the latest source URLs (this is the code that is NOT commented out. The code that IS commented out is the source URLs recommended on photopile-JS) - I tried to add a script to the page so that on window load the function is called, and I got the function from the photopile.js file - I tried to require photopile.js before application.js in the javascript include tag of the application layout file

Photopile instructions code

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

View code:

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

  • I can't explain why this is the case... but I tried it a lot and it made the difference:

    Instead of using a javascript_include_tag for the jquery files, I literally had to use the script src. And that literally did it.