在MODx Revolution中使用1臺圖像電視上傳多個圖像

Question

我想列出資源頁面上的圖像並以縮略圖顯示。現在我知道有一臺電視上傳一張圖片，其中有「Image TV」，您可以上傳圖片並在資源模板上調用電視名稱。但是我想要在單個資源上顯示多個圖像，並且這可能是動態的，就像將要顯示4個或更多圖像一樣。使用單一圖像電視上傳多張圖像有沒有辦法讓MODx革命？我發現了關於MIGX，但它不會允許上傳只是輸入圖像的URL。

非常感謝！

Answer 1

您可以在您的電視中使用額外的圖庫，指向想要顯示的一組圖像的圖庫ID，然後使用前端的圖庫片段[將電視值傳遞給模板]進行顯示。

Answer 2

或者您可以創建電視並設置爲RichText，輸出字符串。

接下來，您將圖片上傳爲列表元素，並在CSS中您需要爲此列表添加樣式，並使用uniq id在div中顯示電視內容。

例如我有圖像的動態數滑動，在我的jQuery添加白框，陰影等

這裏是jQuery代碼：

<script> 
$(document).ready(function() { 
     /* Images: rotate, frame, shadow */ 
     $('.rotation ul li img').each(function() { 
      var mleft = 0; 
      var mtop = 0; 
      if ($(this).is(":first-child")) { 
      } 
      else { 
       mleft = parseInt($(this).prev().attr("width"), 10) + parseInt($(this).prev().css('margin-left'), 10); 
       if (parseInt(mleft, 10) + parseInt($(this).attr("width"), 10) > 430) { 
        mleft = 0; 
        mtop = 250 - parseInt($(this).attr("height"), 10); 
       } 
      } 
      var rand = Math.floor(Math.random() * 16) - 8; 
      $(this).css({'border': '5px #ffffff solid', 'border-radius':'10px', 'transform': 'rotate(' + rand + 'deg)', '-moz-transform': 'rotate(' + rand + 'deg)', '-webkit-transform': 'rotate(' + rand + 'deg)', '-ms-transform': 'rotate(' + rand + 'deg)', 'box-shadow': '4px 4px 10px -3px #000000', 'float': 'left', 'margin': '-30px 0 0 -20px'}); 
     }); 
    }); 
</script> 

添加類我需要旋轉圖片：從電視

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.rotation ul').addClass('image_rotation'); 
     $('.image_rotation').css("display","block"); 
     $('.image_rotation').innerfade({ 
      speed: 'slow', 
      timeout: 10000, 
      type: 'sequence' 
     }); 
    }); 
</script> 

HTML輸出：

<ul> 
     <li><img src="assets/images/4.jpg" alt="" width="210" height="139" /><img src="assets/images/5.jpg" alt="" width="117" height="169" /><img src="assets/images/6.jpg" alt="" width="149" height="114" /></li> 
     <li><img src="assets/images/2.jpg" alt="" width="184" height="187" /><img src="assets/images/3.jpg" alt="" width="167" height="179" /></li> 
     <li><img src="assets/images/1.jpg" alt="" width="400" height="232" /></li> 
    </ul> 

電視

<div class="rotation">[[TV]] 
</div> 

所以我上傳的圖片作爲列表，每個L1標籤是獨立的圖像組旋轉。您可以根據需要上傳儘可能多的圖像。