Blog

zfzf

How to Create an Image Slider Using Foundation Orbit and Reveal Modal

Are you having trouble finding an image slider for your images? Why not try making one for yourself quickly using Foundation Orbit and Reveal Modal. The process is straight forward and quite simple. Although, there are many ways to do this, but here’s the one that I’ve used:

As my project was based on Ruby on Rails, here’s how my models were related:

User ← Album ← Photo

Album model holds all your albums, while Photo model holds all your images. You may wanna save different versions of your image, as I’ve saved ‘profile, medium and giant’ version of my images.

Before we get started, I will assume, you are familiar and have configured Foundation in your Rails app. If not, go through the following links:

Configuring foundation in rails: https://github.com/zurb/foundation-rails

Foundation Reveal Modal http://foundation.zurb.com/docs/components/reveal.html

Foundation Orbit http://foundation.zurb.com/docs/components/orbit.html

Ok, now lets get started!
Step 1: First of all, list all of your images in your view:

#/albums/show.html.erb
@photos.each do |photo|
# display a thumbnail version of your image here
=image_tag photo.photo.profile
 end
#/albums_controller.erb
def show
@album = current_user.profile.albums.find(params[:id])
@photos = @album.photos
end

Step 2: You may want to associate link_to with your images, So upon clicking, you could show up your images in a Reveal Modal. Also remember to define your Modal:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#/albums/show.html.erb
 @photos.each do |photo|
 =link_to user_album_photo_path(current_user, @album, photo), remote: true do
<div class="thumbnail">
= image_tag photo.photo.profile
<div class="caption">
<h3 class="title text-center">=truncate(photo.title, length: 50) </h3>
</div>
<div class="thumbnail-filler"></div>
</div>
 end
 end
<div id="photo_modal" class="reveal-modal small" data-reveal="">
</div>

Set remote: true, so we could make ajax call to the server
Step 3: In the corresponding controller, define your action as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#PhotosController
def show
@user = current_user
@album = @user.albums.find(params[:album_id])
<a name="__DdeLink__0_1861686962" id="__DdeLink__0_1861686962"></a> @photo = @album.photos.find(params[:id])
respond_to do |format|
format.html
format.js
end
end

And define the corresponding js and html file as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a name="__DdeLink__2_1861686962" id="__DdeLink__2_1861686962"></a> #/photos/show.js
$('#photo_modal').html('=j render 'photos/orbit_photos', album: @album, photos: @album.photos')
$('#photo_modal').foundation('reveal','open');
#/photos/show.html.erb
<div id="photos">
= image_tag @photo.photo.giant
</div>

Step 4: Define your partial file ‘orbit_photos’, which contains code for Foundation Orbit for your images:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#/photos/_orbit_photos.html.erb
<div id="photo_container">
<ul class="orbit-photos" data-orbit="" data-options="pause_on_hover: false; timer_speed: 4000; animation_speed:1500; slide_number: false; next_on_click: true;">
 photos.each do |photo|
<li>
<div class="text-center">
<h2 class="page-header">= link_to(photo.title, user_album_photo_path(current_user, album, photo)) </h2>
= link_to(image_tag(photo.photo.medium), user_album_photo_path(current_user, album, photo))
</div>
</li>
 end
</ul></div>

You can customize your orbit differently, by passing different attributes in data-options, you should reference Foundation Orbit documentation for more details.

Step 5: Now, you are almost done, but you may get different issues with your slider, now lets deal with them. Your images could be of different sizes, so, set options variable height equal to true for Orbit:

1
2
3
4
5
6
7
#/photos/show.js
$(".orbit-photos").foundation(orbit: {
variable_height: true,
});

Also, as images are dynamically loaded to Reveal modal, you may want to adjust its size, after orbit-photos have been loaded into it:

1
2
3
4
5
$("#photo_modal").on "opened", ->
$(window).trigger "resize"
return

 

That’s all folks, the image slider is all set!