我想在资源页面上列出图像并显示为缩略图。现在我知道有一台可以上传图像的电视是“Image TV”,您可以在其中上传图像并在资源模板上调用电视名称。但是我想在一个资源上显示多个图像,这可能是动态的,就像要显示 4 个或更多图像一样。MODx 革命有没有办法使用单个图像电视上传多个图像?我发现了 MIGX,但它不允许上传,只需输入图像 URL。
答案非常感谢!
我想在资源页面上列出图像并显示为缩略图。现在我知道有一台可以上传图像的电视是“Image TV”,您可以在其中上传图像并在资源模板上调用电视名称。但是我想在一个资源上显示多个图像,这可能是动态的,就像要显示 4 个或更多图像一样。MODx 革命有没有办法使用单个图像电视上传多个图像?我发现了 MIGX,但它不允许上传,只需输入图像 URL。
答案非常感谢!
或者您可以创建 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 标签都是单独的图片组来旋转。您可以上传任意数量的图像。
您可以额外使用图库,并在您的电视中,指向您要显示的一组图像的图库 ID,然后使用前端的图库片段 [将 tv 值传递给模板] 进行显示。