web-dev-qa-db-ja.com

単一ノードからスライドショーを表示

1つのノードの画像からスライドショーを作成しようとしています。画像は画像フィールドからアップロードされます。それはdrupal 7.です。新しいコンテンツタイプを作成しました。今作成したのは複数のノードからのスライドショー（すべてのノードに1つの画像）です。これは問題なく機能しますが、すべてに新しいノードを追加するには問題が多すぎます単一の画像。

viewsnodes
11
smogg

ビューの画像フィールド設定のMultiple Field Settingsの下に、デフォルトでチェックされている"同じ行にすべての値を表示する"のチェックボックスがあります。このボックスをオフにすると、各画像が新しい行に配置され、必要に応じて機能します。少なくともバージョン2以降、ビューにこの機能があったことは知っていますが、古いバージョンでは少し異なるものと呼ばれる可能性があります。

シンプルなスライドショーの場合は、この方法で行うのが好きです。1つのノード/編集ページですべての画像を再配置できます。ただし、各画像がどこかにリンクしている場合や代替テキストがある場合など、より複雑なスライドショーの場合は、おそらく行ごとに1つのノードを使用することをお勧めします。

10
Chance G

フィールドスライドショー モジュールは、まさに必要なものです。すべての画像はノード内に含まれ（ノード膨張なし）、jqueryサイクル（スライドショーのビューと同じ）を使用して動的なギャラリーとスライドショーを生成します。

7
user842

Galleria モジュールの使用を検討してください。単一のノードを使用し、そこからの画像をスライドショーとして表示します。

2
shonk

最近、シンプルなギャラリーでサイトを構築し、追加のスライドショーモジュールをまったく使用しなくなりました。私が必要としたのは jQuery Cycle と、カスタムテーマに追加された小さなJavaScriptだけでした。このサイトには、「写真」コンテンツタイプと、写真を別のアルバムに割り当てるための「アルバム」ボキャブラリがあります。ビューは、アルバムでフィルタリングされた写真のリストを作成します。私のテーマには、次のようなjsファイルがあります。

(function($){

Drupal.behaviors.myAlbumSlideshow = {
  attach: function(){
    var slideshowContent = $('.view-fotoalbum.view-display-id-page_1>.view-content');

    slideshowContent.before('<div id="slideshow-prev">&lt;</div><div id="slideshow-next">&gt;</div>');

    slideshowContent.cycle({
      fx:       'scrollHorz',
      next:     '#slideshow-next',
      prev:     '#slideshow-prev',
      timeout:  0
    });

    var slideshowHeight = slideshowContent.height() + 'px';
    $('#slideshow-prev, #slideshow-next').css('lineHeight', slideshowHeight);
  }
}

})(jQuery)

CSSを少し加えるだけで完成します。

.view-fotoalbum {
  width: 710px;
  margin-right: 10px;
}

.view-fotoalbum #slideshow-prev {
  color: #808080;
  border-right: 1px solid #808080;
  cursor: pointer;
  float: left;
  line-height: 300px;
  margin-left: -40px;
  text-align: center;
  width: 30px;  
}

.view-fotoalbum #slideshow-next {
  color: #808080;
  border-left: 1px solid #808080;
  cursor: pointer;
  float: right;
  line-height: 300px;
  margin-right: -40px;
  text-align: center;
  width: 30px;
}

PS。私見、画像ごとに単一のノードを持っていることが常に良いとは限りません。このアプローチにより柔軟性が高まる（たとえば、1つの画像を複数のスライドショーに追加する）ことは事実ですが、一部のエンドユーザーにとって、不要な柔軟性は無意味な複雑さです。

2
marcvangend

スライダーで単一ノードの複数の画像を表示するには、 動的表示ブロック モジュールを使用して、構成設定を読み取ります。この場合、スライダーブロックを表示するためのビューを作成するときに、「複数のフィールド設定を表示」で画像を追加する際のチェックボックスをオンにしないでください。すでにオンになっている場合はオフにします。

2
swapnil bijwe

1つの単一ノードで複数のイメージとイメージごとに複数のリンクを作成する良い方法を発見しました。

コンテンツタイプで画像フィールドとリンクフィールドの両方が無制限に設定されていることを確認してください。ビューを作成するときは、「同じ行のすべての値を表示する」がチェックされていないことも確認してください。画像とリンクにデルタフィールドを追加します。グローバルを追加：PHPフィルターおよびフィルターコードを次のように設定：return（！$ row-> delta == $ row-> delta_1）;

それでうまくいくはずです。 PHPをフィルターとして使用するには、Views PHPモジュールをインストールする必要があります。

2
Brandon

Colorbox モジュールをお勧めします

また、次のビデオチュートリアルもご覧ください： Colorbox for Drupal 7、part 1：Installation and image field integration

1
Fuligginoso

Drupalのほぼすべてと同様に、これにはさまざまな解決策がたくさんありますが、まだどこにも出会っていない簡単な解決策を共有したいと思います。

基本的に、私はスライドショーで単一のノードに接続されたさまざまなフィールドの束を表示する方法を探していました。これらのフィールドには、画像フィールドとテキストフィールドの両方が含まれていました。したがって、スライドショーで単一のノードにアタッチされたすべてのフィールドを表示するには、次のようにします。

  1. スライドショーのビューを作成します。 「フォーマットされていないリスト」形式を使用します。
  2. 1つの項目のみを表示するようにビューを設定して、単一のノードのみを処理するようにします（またはコンテキストフィルター：NIDを使用します）。
  3. スライドショーに表示するすべてのフィールドを追加します。 すべてのフィールドを表示から除外します。
  4. カスタムフィールドを追加します（このフィールドが表示されることを確認してくださいafter表示から除外したすべてのフィールド）。ここでは、スライドショーの基本的なマークアップを作成します。使用可能な置換パターンを使用して、liアイテム内の使用可能な各フィールドを次のように設定します：
    
<ul id="slider">
<li>[text_field_1]</li>
<li>[image_field_1]</li>
<li>[text_field_2]</li>
<li>[image_field_2]</li>
</ul>
  5. 次に、お好みのjQueryスライダーを実行できます。 jQuery Cycle Plugin に既にインストールしている場合は、スライダーで簡単に実行できます。プラグインがスライダーのあるページに読み込まれていることを確認し、新しく作成したul：[.____で実行します。]
    
(function ($, Drupal, window, document, undefined) {

    $(document).ready(function() {
        $('#slider').cycle({
        // choose your options
    });
    });

})(jQuery, Drupal, this, this.document);

そして、あなたは行ってもいいはずです。

1
zgreen

単一のノードからスライドショーを作成するために作成されたモジュール https://www.drupal.org/project/field_slideshow があります。

個人的には、これはノードタイプテンプレートの優れた使用法だと思います。そのタイプの各ノードは、そのための残りのフィールドをどこに表示するかなど、高度に制御されたスライドショーとしてフォーマットされます。ノード...

0
Daniel Lefebvre