MODx 혁명에서 1 이미지 TV를 사용하여 여러 이미지 업로드

Question

리소스 페이지에 이미지를 나열하고 축소판으로 표시하고 싶습니다. 이제 저는 이미지를 업로드 할 TV가 있다는 것을 알고 있습니다. "이미지 TV"는 이미지를 업로드하고 리소스 템플릿에서 TV 이름을 호출 할 수있는 곳입니다. 하지만 단일 리소스에 여러 개의 이미지를 표시하고 싶습니다. 표시 할 이미지가 4 개 이상있는 것처럼 동적 일 수 있습니다. 단일 이미지 TV를 사용하여 여러 이미지를 업로드하는 MODx 혁명에 대한 방법이 있습니까? MIGX에 대해 알아 냈지만 이미지 URL을 입력하기 만하면 업로드가 가능합니다.

답변드립니다.

Answer 1

갤러리에서 여분의 갤러리를 사용하고 표시 할 이미지 세트의 갤러리 ID를 가리킨 다음 프런트 엔드의 갤러리 코드 조각을 사용하여 [템플릿에 TV 값 전달]을 표시 할 수 있습니다.

Answer 2

TV를 만들고 RichText으로 설정하면 문자열으로 설정할 수 있습니다.

다음으로 이미지를 목록 요소로 업로드하고 CSS에서이 목록의 스타일을 지정하고 div의 TV 콘텐츠를 uniq id로 표시해야합니다.

예를 들어 나는 이미지의 동적 번호 슬라이드를 가지고 있고, 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> 

추가 클래스 I 회전 할 필요가 이미지 : TV에서

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

,451,515,

TV는

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

그래서 나는 목록으로 이미지를 업로드하고, 각 리 태그는 회전하는 별도의 이미지 그룹입니다. 이미지는 원하는만큼 업로드 할 수 있습니다.