如何加載圖片只有點擊，而不是之前

Question

我編碼了一個很好的圖片，點擊圖片覆蓋整個網頁。 問題是，所有的圖片和縮略圖都是不經意地加載的，我希望只有當女性身體按下相應的thumnail時才能加載大圖片。 我沒有Ajax的經驗，雖然我試圖做一些事情：遠程=>真，沒有工作。有人可以幫忙嗎？

<% 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 %> 

和我的javascript咖啡腳本文件

$(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() 

編輯2012年3月24日：

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

作品出來的：

我通過改變回購盒子，看起來很棒。

Answer 1

您不需要知道ajax就可以這樣做，因爲您只需在現有圖像上設置源屬性或創建圖像元素即可。現在，如果你想從你的服務器檢索html或url或其他東西，那麼你需要知道ajax。讓我們知道，如果這是你在做什麼。

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'); 
}); 
​