Показать оригинальное фото по клику Rails

0

Привет, я просматриваю загруженные фотографии и показываю миниатюры. Я пытаюсь показать исходную фотографию, когда кто-то нажимает на миниатюру. Проблема в том, что он работает только с первой миниатюрой в цикле. Нужно ли показывать каждому эскизу индивидуальный идентификатор или как я могу заставить его работать над каждым миниатюром? Какие-нибудь советы? :)

Мое шоу:

    <% @project.assets.each do |asset| %>
      <% if asset.photo.file? %>
        <li class="thumbnail col-md-2">
           <a id="thumb" href="#">
             <%= image_tag asset.photo.url(:thumb)  %>
           </a>
        </li>
      <% end %>
        <div id="popup">
          <%= image_tag asset.photo.url(:original) %>
        </div>
    <% end %>

Мой javascript:

<script type="text/javascript">
$(document).ready(
    function() {
        $("#thumb").click(function() {
            $("#popup").toggle();
        });
    });
</script>

Благодаря :)

Теги:
loops
ruby-on-rails-4

2 ответа

2
Лучший ответ

Попробуй это:

<% @project.assets.each do |asset| %>
  <% if asset.photo.file? %>
    <li class="thumbnail col-md-2">
       <%= link_to asset.photo.url(:original), class: :popup_link, target: :_blank do %>
         <%= image_tag asset.photo.url(:thumb)  %>
       <% end %>
    </li>
  <% end %>
<% end %>

<div id="popup"></div>

<script type="text/javascript">
  $(document).ready(function() {
     $(".popup_link").click(function(e) {
        e.preventDefault();
        $("#popup").html( $('<img>').attr('src', this.href) );
     });
  });
</script>

то, что мы делаем здесь, это то, что при щелчке мы заполняем popup div тегом изображения, атрибут src которого является значением атрибута ссылки href ссылки.

Хорошая вещь об этом подходе заключается в том, что он деградирует изящно, когда javascript деактивирован (нажатие на ссылку откроет полное изображение на новой вкладке). Поскольку вы не загружаете все полные изображения (просто чтобы скрыть их), ваше время загрузки страницы также будет уменьшаться.

  • 0
    Это было именно то, что я искал! Спасибо! :)
  • 0
    Попытка дать всплывающему окну div максимальную ширину и высоту и z-индекс: 1; но фотография, кажется, игнорирует это. Есть идеи почему?
Показать ещё 3 комментария
1

вы должны использовать класс "большой палец", кроме id. потому что id - uniq, поэтому только первая работа.

то же самое с идентификатором "popup", потому что всегда будет отображаться первое изображение. поэтому вы можете сделать так:

<% @project.assets.each do |asset| %>
  <% if asset.photo.file? %>
    <li class="thumbnail col-md-2">
       <a id="asset-#{asset.id}" class="thumb" href="#">
         <%= image_tag asset.photo.url(:thumb)  %>
       </a>
    </li>
  <% end %>
    <div id="popup-asset-#{asset.id}">
      <%= image_tag asset.photo.url(:original) %>
    </div>
<% end %>

<script type="text/javascript">
$(document).ready(
    function() {
        $(".thumb").click(function() {
            $("#popup-" + this.attr("id")).toggle();
        });
    });
</script>
  • 0
    Это не работает, потому что я использую вложенные атрибуты. Так что мои активы на самом деле не имеют идентификатора. Это даст каждой фотографии идентификатор = "popup-asset - # {asset.id}: /

Ещё вопросы

Сообщество Overcoder
Наверх
Меню