web-dev-qa-db-ja.com

ビューで、指定された数のアイテムごとにdivをラップする方法

私はD7、Views 3を使用しており、jQuery Cycleを使用して遊んでいます。私がしたいのは、ビューの出力を修正して、jQuery Cycle Webサイトの次の例のようにすることです。

    <div style="margin:auto;text-align:center"><div id="nav"></div></div>
<div class="slideshow">
    <div class="slide">
        <img src="http://jquery.malsup.com/cycle/images/beach1.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach2.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach3.jpg" width="200" height="200" />
    </div>
    <div class="slide">
        <img src="http://jquery.malsup.com/cycle/images/beach4.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach5.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach6.jpg" width="200" height="200" />
    </div>
    <div class="slide">
        <img src="http://jquery.malsup.com/cycle/images/beach7.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach8.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach9.jpg" width="200" height="200" />
    </div>
</div>

私はこれにセマンティックビューを使用することを望んでいましたが、3つのアイテムごとにdivクラス「slide」をラップする方法にこだわっています。これは可能ですか？すべてのアイテムにdivを適用してから、3番目のアイテムごとにクラスを適用することができるようです。ヘルプ/ガイダンス/ヒントは大歓迎です。

viewsblocksjavascript
6
Mark G

ビューでは、テーマ：情報詳細タブの下にリンクがあります。そこで、好みの方法でテンプレートファイルを使用してビューのテーマを設定できます。

4
whitefleaCH

HTMLリストテンプレートを取得し、views-view-list.tpl.phpを変更します。テーマ情報を確認して、指定できる名前を確認してください。

<?php
/**
 * @file views-view-list.tpl.php
 * Default simple view template to display a list of rows.
 *
 * - $title : The title of this group of rows.  May be empty.
 * - $options['type'] will either be ul or ol.
 * @ingroup views_templates
 */
?>
<?php print $wrapper_prefix; ?>
  <?php if (!empty($title)) : ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <?php print $list_type_prefix; ?>
    <?php foreach ($rows as $id => $row): ?>
      <?php if($id % 3 == 0){ print '<div class="row">'; } ?>
      <li class="<?php print $classes_array[$id]; ?>"><?php print $row; ?></li>
      <?php if($id % 3 == 2){ print '</div>'; } ?>
    <?php endforeach; ?>
  <?php print $list_type_suffix; ?>
<?php print $wrapper_suffix; ?>
2
gagarine

これを行う最も簡単な方法は、3つの画像のみを許可する画像フィールドを持つノードを用意することです。

ビューでは、そのフィールドを追加して「すべての値を同じ行に表示する」を指定すると、各ノードがそのすべての画像を1行に表示します。これにより、各行に「slide」クラスを追加し、ビューを囲むdivに「slideshow」を追加できます。

enter image description here

画像ごとに1つのノードでこれを行う場合は、そのテンプレート用に独自の行テンプレートと独自の前処理関数を作成する必要があります。前処理関数では、フィールド（行ごとに1つのイメージを含む）をループして、キーごとに3つの値を含む多次元配列を作成できます。テンプレートでは、これらの値をループして、各「スライド」div内に3つの画像を追加できます。

1
acouch

Views Column Class モジュールを必ず確認してください。

0
jay-ess