Загрузка изображений с использованием 1 изображения в режиме MODx Revolution

Question

Я хотел бы перечислить изображения на странице ресурсов и отобразить их в виде миниатюр. Теперь я знаю, что есть телевизор для загрузки изображения w/c - это «Image TV», где вы сможете загрузить изображение и назвать имя телевизора в шаблоне ресурса. Но я хочу, чтобы на одном ресурсе отображалось несколько изображений, и это может быть динамическим, так как будет отображаться 4 или более изображений. Есть ли способ революции MODx для загрузки нескольких изображений с помощью одного телевизора с изображениями? Я узнал о MIGX, но он не позволит загружать только напечатать URL-адрес изображения.

Ответы приветствуются!

Answer 1

Вы можете использовать дополнительную галерею и в своем телевизоре, указать на идентификатор галереи набора изображений, которые хотите отобразить, а затем использовать фрагмент галереи на передней панели [передача значения tv в шаблон] для отображения.

Answer 2

Или вы можете просто создать телевизор и установить в качестве RichText, выходной Строка.

Затем вы загружаете изображения как элементы списка, а в css вам нужно стилизовать этот список и отобразить ТВ-контент в div с идентификатором uniq.

Например, у меня есть слайды с динамическим числом образов, и в 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> 

TV

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

Так я загружать изображения в виде списка, и каждый литий тег отдельные изображения группы вращаться. Вы можете загружать столько изображений, сколько хотите.