CODEWITHSUNDEEP
jquerycssruby-on-railsmagnific-popup
xps15z
xps15z

Reputation: 1829

Adding light box to images

I have no experience with CSS and JQuery. Therefore I am lost with implementing Magnific Popup with my app. I am using the https://github.com/joshuajansen/magnific-popup-rails. The code I insert in the view is showing on the page itself. I followed what's on the github and then added code to the view.

<h1><%= @user.username %></h1>

<div class="parent-container">

$(document).ready(function() {
  $('.parent-container').magnificPopup({
    delegate: 'a',
    type: 'image'
  });   
});

<% @user.photos.each do |photo| %>
    <%= link_to image_tag(photo.image_url(:thumb)), photo.image_url%>

</div>
<% end %>

Upvotes: 1

Views: 190

Answers (2)

kddeisz
kddeisz

Reputation: 5182

Josh Mein's answer is correct, but to stay true to w3c standards and have the javascript in the head, you might also consider:

<% content_for :head do %>
  <script type='text/javsacript'>
    $(document).ready(function() {
      $('.parent-container').magnificPopup({
        delegate: 'a',
        type: 'image'
      });   
    });
  </script>
<% end %>

... and then in your layout make sure you have <%= yield :head %> in the head section

Upvotes: 1

Josh Mein
Josh Mein

Reputation: 28635

My knowledge of ruby on rails is rather limited, but I am pretty sure you need to include your javascript in a script tag like so:

<script type="text/javascript">
    $(document).ready(function() {
        $('.parent-container').magnificPopup({
            delegate: 'a',
            type: 'image'
        });   
    });
</script>

<div class="parent-container">
    <% @user.photos.each do |photo| %>
        <%= link_to image_tag(photo.image_url(:thumb)), photo.image_url%>
</div>

Upvotes: 2

Related Questions