изображение / фото галерея (вид сетки) с рельсами? - PullRequest
Новая
       14

изображение / фото галерея (вид сетки) с рельсами?

3 голосов
/ 23 января 2011

Я хотел бы создать фотогалерею с видом сетки (стиль facebook), и я хотел бы знать, можно ли это сделать только с помощью рельсов или мне следует использовать jquery для этого.

Яиспользуя скрепку, и я застреваю, пытаясь отобразить картинки в виде сетки.

Я был бы очень рад, если у кого-то есть ссылка на учебник или отправная точка для этого.(У меня уже есть мой индексный вид, показывающий все фотографии)

index.html.erb 

<% title "All Photos" %>

<table>
  <% for photo in @photos %>
    <tr>
    <td><%= link_to image_tag(photo.image.url), photo %></td>
      <td><%= link_to photo.name, photo %></td>
    </tr>
  <% end %>
</table>

Спасибо!

Ответы [ 2 ]

5 голосов
/ 23 января 2011

Это не зависит от Rails, поскольку то, с чем вы имеете дело, зависит только от вашей разметки HTML.

Таблица, вероятно, является неправильным решением этой проблемы - по крайней мере, так, как вымы выложили это.Строки таблицы (<tr>) не могут отображаться рядом друг с другом в виде столбцов.Распространенным решением здесь является использование плавающих div для отображения вашего контента в любом количестве столбцов, которые вы хотите.Следующий код такой же, как и выше, за исключением использования divs: 

<div id="gallery">
  <% for photo in @photos %>
    <div class="photo">
      <%= link_to image_tag(photo.image.url), photo %>
      <%= link_to photo.name, photo %>
    </div>
  <% end %>
</div>

Затем, используя только CSS, вы можете расположить ваши изображения в виде сетки.Вот пример: http://www.alistapart.com/articles/practicalcss/

Оттуда вы можете усовершенствовать базовую реализацию с помощью JQuery или еще одного CSS по вкусу.

0 голосов
/ 12 октября 2011

Вот как я это сделал ...

Я использую Paperclip, чтобы определить размер миниатюры изображения, в данном случае крошечный размер - 128x128, вместе с отличным постом из CSSBakery.У меня также есть изображения для ссылки на оригинальное изображение.

http://www.cssbakery.com/2010/07/image-grid-using-css-floats_6950.html https://github.com/thoughtbot/paperclip

На мой взгляд: 

<div id="gallery">
  <ul id="grid">
    <% @images.each do |image| %>
     <li><%= link_to image_tag(image.photo.url(:tiny)), image %></li>
    <% end %>
  </ul>
</div>

ImCSS-файл моего приложения / assets / stylesheets (см. статью www.cssbakery.com в сетке css) 

/* ------------------------------------------
      Grid
--------------------------------------------- */

ul#grid {
  padding: 0;
  list-style: none;
  margin: 20px auto 0;
  width: 700px;  
  }

#grid li {
  float: left;
  padding: 0;
  margin: 0 5px 10px 5px;
  } 

#grid li a {
  display: block;
  }

#grid li img {
  background-color: #64666a;
  padding: 7px; margin: 0;
  border: 1px dotted #58595b;
  width: 128px;
  height: 128px;
  }

#grid li a:hover img {
opacity:0.3; filter:alpha(opacity=30);
  }

.grid_display {
  padding: 20px;
  margin-left: auto; margin-right: auto;  margin-top:50px; margin-bottom:0;
  /*background-color: #ffd7ce;*/
  width: 513px; 

  /*these two properties will be inherited by .grid_display h2 and .grid_display p */
  font-family: 'GraublauWeb', arial, serif; 
  text-align: center;
  }  

div.grid_display h2 {
  padding: 0; margin: 0;
  clear: both;
  font-size: 35px;
  font-weight: normal;
  color: #58595b;
  background: none;
  font-family: 'GraublauWeb', arial, serif;  

  /* reset for cascade effects that are trickling down from other h2's */
  text-transform: none;
  letter-spacing: normal;
  }

.grid_display p {
  margin:0; padding: 0;
  font-size: 15px;
  color: #58595b;
  }
...