Adding swipejs library

How about creating a slideshow in the home page? For slideshow, we will use the SwipeJS library.


Let’s find it at:

Then put the swipe.js in the vendor/assets/javascripts/ folder.

And we need to include it in the application.js file.

  //= require jquery
  //= require jquery_ujs
  //= require swipe
  //= require_tree .

From the SwipeJS doc, we copy and paste the styling to app/assets/stylesheets/pages.css.scss file.

 1.swipe {
 2  overflow: hidden;
 3  visibility: hidden;
 4  position: relative;
 6.swipe-wrap {
 7  overflow: hidden;
 8  position: relative;
10.swipe-wrap > div {
11  float:left;
12  width:100%;
13  position: relative;

And then the logic to get it started. file:

1$ ->
2  window.mySwipe = Swipe(document.getElementById('slider'), {
3    auto: 3000
4  })

It would be best to create a dedicate cropping ratio for our slideshow, so we will add it to our paperclip-based model — photo.rb file.

  has_attached_file :file, styles: {
    cover: "1000x600#",
    medium: "300x300>",
    thumb: "100x100>" },
    default_url: "/images/:style/missing.png"

Then we would refresh the cropping thumbnail generation with the paperclip command.

1$ rake paperclip:refresh CLASS=Photo

Now we need some photos for the home page. In the pages controller:

1class PagesController < ApplicationController
2  def index
3    @slide_photos = Photo.limit(5)
4    @photos = Photo.limit(10)
5  end

And we can use the following code in view pages/indeb.html.erb for the related @slide_photos collection.

1<div id='slider' class='swipe'>
2  <div class='swipe-wrap'>
3    <%- @slide_photos.each do |p| %>
4      <div><%= image_tag p.file.url(:cover) %></div>
5    <%- end %>
6  </div>

Until now, we got a slideshow in the home page.

Swipejs in index

It is not looking good. What we want is a full layout. In the next session, we will build the entire layout for the gallery.

What’s next? We’re going to take a look at “Building gallery website layout”.

overlaied image when clicked on thumbnail

Makzan | Ruby on rails 101 | Table of Content