как загружать картинки только при нажатии а не до - PullRequest
Новая
       39

как загружать картинки только при нажатии а не до

1 голос
/ 26 февраля 2012

я кодировал хорошую галерею, где кликаемые картинки накладываются на всю веб-страницу.Проблема в том, что все картинки и миниатюры загружаются безотлагательно, я хочу, чтобы большие картинки загружались только тогда, когда womebody нажимает на соответствующую кнопку.У меня нет опыта работы с ajax, хотя я пытался что-то сделать с: remote => true, что не сработало.Может ли кто-нибудь помочь? 

<% 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-файл coffe-script 

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

Работает из коробки и выглядит потрясающе.

1 Ответ

2 голосов
/ 26 февраля 2012

Вам не нужно знать ajax, чтобы сделать это, потому что вы можете просто установить свойство source для существующего изображения или создать элемент изображения. Теперь, если вы хотите получить 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');
});
​
...