CODEWITHSUNDEEP
ruby-on-rails-3orbit
dngoo
dngoo

Reputation: 499

Rails array of images -- create links that will display the next/prev images

I'm still a Rails beginner, and still have a lot to learn.

Currently, I can display all the images at once, no problem:

<!-- For the Thumbnail strip -->
<% @examples.each do |e| %>
    <ul class="example-grid"><%= e.description %></ul>
    <% if e.image.url != "/images/original/missing.png"  %>
        <p><%= image_tag e.image.url, size: "200x200" %></p>
    <% end %>
<% end %>

But I want to first show the image of @examples[0] and from there, have two link_to or button_to paths to show @example[current + 1]. Something like that.

How does this work?

Upvotes: 0

Views: 678

Answers (2)

ovatsug25
ovatsug25

Reputation: 8616

try bootstrap carousel and genertate the html like you are doing now:

http://getbootstrap.com/javascript/#carousel

<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <% @examples.each_with_index do |e, index| %>
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="<%= index %>" class="<%= if e.primary ? "active" : "" %>></li>
  </ol>
  <% end %>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
  <% @examples.each do |e| %>
    <div class="item active">
<% if e.image.url != "/images/original/missing.png"  %>
    <p><%= image_tag e.image.url, size: "200x200" %></p>
<% end %>
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>

Upvotes: 0

Raj Adroit
Raj Adroit

Reputation: 3888

You can use Jquery Sliders, image slide show plugins Image Slide show demo link

Upvotes: 0

Related Questions