Primefaces Galleria設置圖像以在頁面上顯示

Question

我有一個帶有x圖像的環球免稅店對象，每次進入頁面時，都會顯示第一個圖像。 但我想顯示第二張圖片，具體取決於方法的返回值。

我知道顯示的圖像的值爲display：list-item，其他所有顯示都是：none，但我不知道如何以編程方式設置它。

任何想法apprechiated，拉爾夫！

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中呼叫背後的原因是爲了確保widgetVar在撥打電話之前被初始化，從而防止出現像undefined這樣的對象的錯誤，但是由於setTimout can be inaccurate的原因，要減少它是很困難的。

第二種方法：

這種做法是猴子修補_render功能，因爲它被稱爲只有一次，在初始化，這將確保圖像沒有立即選擇延遲與第一種方法相反。

<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> 

這裏要注意，在這種方法中，您將更改包含在頁面中的所有廣場的組件，例如，如果你有兩個廣場在同一個最後一頁定義，他們都結了相同的活性指數，如果您有這種情況，您可以檢查widgetVar名稱是否相等，然後執行相應的操作。

我會用第二種方法，因爲從用戶體驗的角度來看它似乎更自然。