0

我想在资源页面上列出图像并显示为缩略图。现在我知道有一台可以上传图像的电视是“Image TV”，您可以在其中上传图像并在资源模板上调用电视名称。但是我想在一个资源上显示多个图像，这可能是动态的，就像要显示 4 个或更多图像一样。MODx 革命有没有办法使用单个图像电视上传多个图像？我发现了 MIGX，但它不允许上传，只需输入图像 URL。

答案非常感谢！

4

2 回答 2

0

或者您可以创建 TV 并设置为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>

电视

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

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

于 2012-07-27T16:28:25.220 回答
0

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

于 2012-05-31T19:39:07.823 回答