0

リソース ページに画像を一覧表示し、サムネイルとして表示したいと考えています。これで、画像をアップロードする TV が「Image TV」であることがわかりました。ここで、画像をアップロードし、リソース テンプレートで TV 名を呼び出すことができます。しかし、1 つのリソースに複数の画像を表示したいのですが、4 つ以上の画像が表示されるように動的にすることができます。単一の Image TV を使用して複数の画像をアップロードする MODx 革命の方法はありますか? MIGX について知りましたが、画像の URL を入力するだけではアップロードできません。

回答をお待ちしております。

4

2 に答える 2

0

または、 TV を作成してRichTextとして設定し、 Stringを出力することもできます。

次に、画像をリスト要素としてアップロードし、css でこのリストのスタイルを設定し、TV コンテンツを 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>

TV からの 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

ギャラリー エクストラを使用し、TV で表示する一連の画像のギャラリー ID を指定してから、フロント エンドでギャラリー スニペットを使用して [TV 値をテンプレートに渡します] 表示します。

于 2012-05-31T19:39:07.823 に答える