1

私のサイトでは、各ページの下部に画像のコレクションがあります。このコレクションは、7.5 秒後に別のコレクションにフェードスルーします。

問題は、画像の幅がさまざまである可​​能性があり、各画像の幅に基づいて各コレクションにいくつ入れるかを把握する必要があることです。

私のサイトは合計 960 ピクセルの幅で、各画像には右余白が必要です (たとえば 15 ピクセル)。したがって、7 つの画像のコレクションがある場合 (コレクションの最後の画像に右マージンがないと仮定)、許可されている幅の合計は 870 ピクセルです。

各画像の幅を取得できるので、jQuery で取得してフェードスルーするための ID を持つ独自の div を持つコレクションにそれらをまとめる方法が必要です。

次のコードは、同じ幅の画像に対して機能しています。

JS:

<% @logo_group_size = 7 %>
<script type="text/javascript">
  <% unless (@logos || Logo.order(:position)).empty? %>
    var logo_sets = [<%= (@logos || Logo.order(:position)).in_groups_of(@logo_group_size, false).collect{|x| (@logos || Logo.order(:position)).in_groups_of(@logo_group_size, false).index(x)}.join(', ') %>];
    var logo_sets_max = <%= (@logos || Logo.order(:position)).in_groups_of(@logo_group_size, false).length - 1 %>;
    var logo_set_index = 0;
    function fadeLogoSets() {
      $("#logo_set_" + logo_sets[logo_set_index]).fadeOut();
      if (logo_set_index < logo_sets_max) { logo_set_index += 1; } else { logo_set_index = 0; }
      $("#logo_set_" + logo_sets[logo_set_index]).fadeIn();
      setTimeout("fadeLogoSets()" , 7500);
    }
    $(document).ready(function() {
      setTimeout("fadeLogoSets()", 7500);
    });
  <% end %>
</script>

意見：

<% unless (@logos || Logo.order(:position)).empty? %>
  <% maximum_width = (960 - ((@logo_group_size - 1) * 15)) %>
  <div class="logos">
    <h2>Logos</h2>
    <% (@logos || Logo.order(:position)).in_groups_of(@logo_group_size, false).each_with_index do |logo_set, index| %>
      <% set_width = 0 %>
      <%= content_tag(:div, :id => "logo_set_#{index}", :style => (index.zero? ? "display: block;" : "display: none;")) do %>
        <% logo_set.each_with_index do |logo, index| %>
          <% set_width += MiniMagick::Image.open(("http://#{request.env["HTTP_HOST"]}" + logo.image.home.to_s))["width"].to_i %>
          <% image_options = {} %>
          <% image_options.merge!({:style => "margin-right: 0px;"}) if index == (@logo_group_size - 1) %>
          <% if logo.link.blank? %>
            <%= image_tag(logo.image.home, image_options) %>
          <% else %>
            <%= link_to(image_tag(logo.image.home, image_options), logo.link, {:target => "_blank"}) %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  </div>
<% end %>

この質問がやや主観的であることは理解しています。

4

0 に答える 0