Question

i coded a nice galery, where the clicked pictures are overlayed over the whole webpage.
The Problem is, all the pictures and thumbnails are loaded immidiatly, i want the large pictures only to be loaded, when womebody presses the corresponding thumnail.
I have no ajax experience, though i tried to do something with :remote => true, which didnt work out. Can somebody help?

<% for painting in @gallery.paintings %>
  <div class="painting">
  <%= image_tag painting.image_url(:thumb), :remote => true, :rel => "##{painting.id}" %>

    <div class="overlay" id="<%= painting.id %>" >
      <%= image_tag painting.image_url %>
    </div>
<% end %>

and my javascript coffe-script file

$(document).ready ->
  $("img[rel]").overlay();
  $(".close").click ->
    $("#dim").fadeOut()
    false
  $("div.painting img").click ->
    $("#dim").fadeIn()
    false
  $(".overlay").css "width", $(window).width()
  $("#dim").css "width", $(window).width()

$(window).bind "resize", ->
  $(".overlay").css "width", $(window).width()
  $("#dim").css "width", $(window).width()

EDIT 2012/3/24:

I changed the repo by using:

  gem 'fancybox-rails', :git => 'https://github.com/sverigemeny/fancybox-rails'

Works out of the box and looks awesome.

Answer 1

You don’t need to know ajax to do this because you can just set the source property on an existing image or create an image element. Now if you want to retrieve html or a url or something from your server, then you will need to know ajax. Let us know if that is what you are doing.

http://jsfiddle.net/mrtsherman/nzdpt/1/

<button id="a">Create element</button>
<button id="b">Swap src on img</button>
<img id="c" src="http://placehold.it/150x150/ff0000" />​

//create a new image element and append it to dom
$('#a').click(function() {
    var $img = $('<img />', {
             id: 'foobar ',
             src : 'http://placehold.it/150x150'
    });
    $('body').append($img);
});

//get an existing img element and change its source 
$('#b').click( function() {
    $('#c').prop('src', 'http://placehold.it/100x100');
});
​