Привет, я просматриваю загруженные фотографии и показываю миниатюры. Я пытаюсь показать исходную фотографию, когда кто-то нажимает на миниатюру. Проблема в том, что он работает только с первой миниатюрой в цикле. Нужно ли показывать каждому эскизу индивидуальный идентификатор или как я могу заставить его работать над каждым миниатюром? Какие-нибудь советы? :)
Мое шоу:
<% @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>
Благодаря :)
Попробуй это:
<% @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 деактивирован (нажатие на ссылку откроет полное изображение на новой вкладке). Поскольку вы не загружаете все полные изображения (просто чтобы скрыть их), ваше время загрузки страницы также будет уменьшаться.
вы должны использовать класс "большой палец", кроме 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>