2

画像ギャラリーにjqueryアイソトープを実装しました。
ギャラリーに画像アップロードフォームがあり、ユーザーが画像をアップロードした後、アップロードされた画像に関するデータを含むJsonオブジェクトを返します。
そのデータに基づいて、同位体コンテナに新しい画像を追加したいと思います。
私はいくつかの方法を試しましたが、すべて失敗しました。
最後の画像はコンテナに画像を追加しますが、新しい画像は古い画像の下にあります。
私は何かが欠けているに違いないが、何が見つからない。
ここに画像の説明を入力してください

$("#ajaxUploadForm").ajaxForm({
...
success: function (result) {
                var $container = $('#container');
                var $newItems = $('<div class="imgItem"><a class="fancybox-button" rel="fancybox-button" href="' + @Url.Content("~/") + result.messageOriginal+ '"> <img src="'+ result.message +'" /> </div></a>');

                $container.prepend($newItems).isotope('reloadItems').isotope({ sortBy: 'original-order' });
...

これは、ユーザーがページを開いたときにアイテムをロードする方法です

$(window).load(function () {
        var $container = $('#container');

        $container.isotope({
            itemSelector: '.imgItem',
            filter: '*',

            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
...

そして、これは各アイテムのテンプレートです。

<div class="imgItem">
                <a class="fancybox-button" rel="fancybox-button" 
           href="@Url.Content("~/" + @i.Media.PathOriginal)" 
           >
                    <img src="@Url.Content("~/" + @i.Media.PathMedium)" alt="" />
                </a>
            </div>
4

2 に答える 2

1

私は同じ問題に直面しました。そこで、次のように画像読み込みプラグインでラップしました

$('#container').imagesLoaded( function(){
        $('#container').isotope({
          // options
          sortBy : 'random',
          layoutMode: 'masonry',
          itemSelector : '.imgItem'
        });
    });

そしてそれはうまくいきました。

于 2013-05-24T16:23:52.763 に答える
0

で試してみてください

var $newItems = $('<div class="imgItem" style="float:left;"><a class="fancybox-button"....
于 2012-09-15T12:51:29.147 に答える