CODEWITHSUNDEEP
jqueryruby-on-railsruby-on-rails-3.1image-gallery
noob
noob

Reputation: 1807

Jquery for picture gallery

I have a few pictures for a product and I want the user to be able to click the thumbnail and then display the large picture. I used the simple JQuery tutorial http://papermashup.com/simple-jquery-gallery/ , but for some reason, when I click on the thumbnails, only the large picture of the thumbnail I clicked on is display. The other thumbnails disappeared so I can't click back to it.

I am using Carrierwave, rails 3.2 and the jquery that comes with rails 3.2

$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});


<div id ="image" >
 <%= image_tag(@product.prod_images.first.image_url(:large_pic)) %>
 <% @prod_images.each do |image| %>          
 <ul class="thumbs">
  <li>
   <a href="#" rel="<%= image.image_url(:large_pic) %>" class="image">
     <%= image_tag(image.image_url(:thumb_pic)) if image.image? %>
   </a>
  </li>
 </ul>
 <% end %>
</div>

Please help!

Upvotes: 1

Views: 2418

Answers (4)

J.S
J.S

Reputation: 41

The solution ended up being this:

$('#thumb_holder li a').click (function(){
        mainImg = $(this).attr('rel');
        if(mainImg != current){
            $('.current').fadeOut('slow');
            $('#'+mainImg).fadeIn('slow', function(){
                $(this).addClass('current');
                current = mainImg;
            });
            $('#thumb_holder li').find('img').css('display','block');
        }
        $(this).children("img").toggle();
    });

Upvotes: 0

MiKaL
MiKaL

Reputation: 58

When you set the HTML of #image, you replace all the code inside . that why your thumbnail tags disappeared .

You should try this instead :

 <div id ="image" >
     <%= image_tag(@product.prod_images.first.image_url(:large_pic)) %>
 </div>
<% @prod_images.each do |image| %>          
 <ul class="thumbs">
      <li>
       <a href="#" rel="<%= image.image_url(:large_pic) %>" class="image">
         <%= image_tag(image.image_url(:thumb_pic)) if image.image? %>
       </a>
      </li>
 </ul>
<% end %>

Upvotes: 2

Trent
Trent

Reputation: 1381

You're div tag with the id of "image" contains your li. In your script, you are replacing the HTML of that div with the image tag. You should move your li out of the "image" div and into a separate div.

Upvotes: 0

danwellman
danwellman

Reputation: 9273

Use a lightbox gallery plugin, like colorbox

Upvotes: 0

Related Questions