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


11

1つのノードの画像からスライドショーを作成しようとしています。画像は画像フィールドからアップロードされます。それはdrupal 7です。私は新しいコンテンツタイプを作成し、今作成したのは複数のノードからのスライドショーだけです(すべてのノードに1つの画像があります)。これは問題なく機能しますが、問題が多すぎて、すべてのイメージに新しいノードを追加できません。


イメージごとにノードを持つことは、IMOがより柔軟であるため、それを行うための推奨される方法です。ノードの公開/非公開、スライドショーで使用できるノードへのタイトル/説明テキスト/リンクの追加、ノードキューを使用した並べ替えの配置などができます。単一ノードで実際に直面している問題を追加する必要があります。スライドショーのアプローチ、何を試しましたか、何が起こったのか、何が壊れているのかなどです。また、このDrupal 6または7ですか?どのスライドショーモジュールを使用していますか?
googletorp

@googletorp Drupal 7で「スライドショーの表示」モジュールを使用します。これは単純なスライドショー/イントロページで、タイトル、説明、ナビゲーションボタンなどのない単純な画像スライドショー以外は必要ありません。次のようにビューを構成しました:形式:スライドショー、表示:フィールド、コンテンツ:イントロ(このノードのコンテンツタイプ)。これで、画像が1行に1つずつ表示されます。
smogg 2011年

回答:


10

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

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


7

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


2

最近、シンプルなギャラリーでサイトを構築し、追加のスライドショーモジュールをまったく使用しなくなりました。必要なのは、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

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


ええ、私はこのモジュールを知っており、ギャラリーと同じサイトで使用しています。しかし、ナビゲーションボタンなどを使用せずに単純なスライドショーを実現するのは困難です。しかし、問題はありません。ノードシステムごとに画像を使用しています。また、ガレリアモジュールdoesntの仕事私はjsファイルをオンにした構成で圧縮>>パフォーマンス; /
smogg

2

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

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

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


2

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



1

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

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

  1. スライドショーのビューを作成します。「フォーマットされていないリスト」形式を使用します。
  2. 1つの項目のみを表示するようにビューを設定して、単一のノードのみを処理するようにします(またはコンテキストフィルター:NIDを使用します)。
  3. スライドショーに表示するすべてのフィールドを追加します。すべてのフィールドを表示から除外します。
  4. カスタムフィールドを追加します(このフィールドは、表示から除外しすべてのフィールドの後に表示されることを確認してください)。ここでは、スライドショーの基本的なマークアップを作成します。使用可能な置換パターンを使用して、使用可能な各フィールドを次の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);
    
    

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


0

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

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.