Primefaces Galleriaページローディングで表示する画像を設定する

Question

私はx個の画像を持つgalleriaオブジェクトを持っており、ページに行くたびに最初の画像が表示されます。 しかし、メソッドの戻り値に応じて2番目の画像を表示したいと思います。

私は、表示されるイメージの値がdisplay：list-itemであり、他のすべてにdisplay：noneがあることを知っていますが、プログラムで設定する方法はわかりません。

どんなアイデアもあります。あなたはこれらのアプローチのいずれかによってこれを達成することができます

Answer 1

は、ニーズに応じて異なります。

最初のアプローチ：

このような例のためのページが読み込まれた後に手動選択、：

XHTML

<p:galleria widgetVar="galleriaWV"> 
    ... 
</p:galleria> 

JS

<script> 
//<![CDATA[ 
    function changeActiveIndex(widgetVar, index, reposition) { 
     if (widgetVar && index) { 
      widgetVar.select(index, reposition); 
     } 
    } 

    $(document).ready(function() { 
     setTimeout(function() { 
      changeActiveIndex(PF('galleriaWV'), 2, false); 
     }, 500); 
    }); 
//]]> 
</script> 

このアプローチは、次のような結果になります： は、第三の画像（bat3.jpg、インデックス= 2）を選択し、ユーザーが最初の選択数ミリ秒後に、その後0 activeIndex by default（bat1.jpgを）見ていることがわかりますその結果、setTimeoutの呼び出しがあるため、docuemnt.readyの呼び出しの理由は、undefinedオブジェクトのようなエラーが発生しないように、setTimout can be inaccurateが呼び出される前にwidgetVarが初期化されていることを確認することです。

第二のアプローチ：このアプローチは、それが一度だけ呼ばれていますので、初期化時に、_render機能をパッチサルになり

が、これはイメージが何を瞬時に選択されていないことを確認します第1のアプローチの反対に遅れる。

<script> 
//<![CDATA[ 
    function changeActiveIndex(index) { 
     var oldRender = PrimeFaces.widget.Galleria.prototype._render; 

     PrimeFaces.widget.Galleria.prototype._render = function() { 
      this.cfg.activeIndex = index; 
      oldRender.apply(this, []); 
     } 
    } 

    changeActiveIndex(2);// to get the active image from bean, replace 2 with #{beanName.intIndexOfActiveImage} for example 
//]]> 
</script> 

ここで注意することは、このアプローチでは、あなたが同じ最終ページに定義された2つのガレリアを持っている場合、それらはすべて同じアクティブなインデックスで終わる例えば、そのページに含まれるすべてのガレリア・コンポーネントを変更していますそのような場合は、widgetVarの名前が等しいかどうかを確認し、それに応じて実行することができます。

私は、UXの観点から見ると、より自然なように、2番目のアプローチを採用します。