Locked lesson.
About this lesson
Using JQuery Masonry animations on our Pins.
Exercise files
Download this lesson’s related exercise files.
Installing Masonry Part 2.docx59.4 KB Installing Masonry Part 2 - Solution.docx
60.1 KB
Quick reference
Installing Masonry Part 2
In this video we'll continue installing Masonry.
When to use
We need to add some CSS to our app to handle the transitions.
Instructions
First: Add this CSS code to your app/assets/stylesheets/pins.scss file:
#pins {
margin: 0 auto;
}
.box {
margin: 5px;
width: 214px;
}
.box img {
width: 100%;
}
Next: Add this bit of coffeescript code to your app/assets/javascripts/pins.coffee file (tab spacing counts):
$ ->
$('#pins').imagesLoaded ->
$('#pins').masonry
itemSelector: '.box'
isFitWidth: true
Next: Restart your Rails Server
Next: In your app/views/pins/index.html.erb file, enable transitions in your pins div ID:
<div id="pins" class="transitions-enabled">
Next: Add Bootstrap Panels to your app/views/pins/index.html.erb file
<div id="pins" class="transitions-enabled">
<% @pins.each do |pin| %>
<div class="box">
<div class="panel panel-default">
<%= link_to (image_tag pin.image.url(:medium)), pin %>
<div class="panel-body">
<%= pin.description %><br/>
<%= pin.user.name %><br/>
</div>
<% if pin.user == current_user %>
<div class="panel-footer">
<%= link_to 'Edit', edit_pin_path(pin) %>
<%= link_to 'Destroy', pin, method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
Hints & tips
- After you add a pin ID and box Class to your index.html.erb file, you need to define those things with CSS
- We'll use a little coffeescript to let masonry know which ID and Class to latch onto in our index.html.erb file
- Use Bootstrap Panels to make our pins look a little nicer
Lesson notes are only available for subscribers.