Question

我想在资源页面上列出图像并显示为缩略图。现在我知道有一台用于上传图像的电视是“图像电视”，在那里你可以上传图像并在资源模板上调用电视名称。但我希望在单个资源上显示多个图像，这可能是动态的，就像要显示4个或更多图像一样。 MODX革命是否有办法使用单个图像电视上传多个图像？我发现了MIGX，但它不允许上传只需输入图片网址。

非常感谢答案！

Answer 1

您可以使用额外的图库并在电视中指向要显示的图像集的图库ID，然后使用前端的图库片段[将电视值传递给模板]进行显示。

Answer 2

或者你可以创建电视并设置为 RichText ，输出 String 。

接下来，您将图像上传为列表元素，在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>

TV

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

所以我上传图片作为列表，每个li标签都是单独的图像组来旋转。您可以根据需要上传任意数量的图片。

MODx革命中使用1个图像电视的多图像上传

2 个答案: