0

テキストを展開するための jquery プラグインである expander.js を使用しています。

ここにあるのは、

展開と折りたたみがトリガーされるたびに、画像を交換することになっています。

現在、通常は問題ありません。

もう1つの情報は、拡張可能な説明と画像が付属するアイテムのリストがあるため、コード内にIDがあることです。

編集:完全なコードが表示されるようになりました。

コードは以下のとおりです。

   $(document).ready(function() {

  // override some default options
  $('div.expandable div').expander({
    slicePoint:       200,  // default is 100
    expandText:         'Expand', // default is 'read more...'

    expandEffect:     'fadeIn',
    collapseTimer:    0, // re-collapses after 5 seconds; default is 0, so no re-collapsing
    userCollapseText: 'Collapse' , // default is '[collapse expanded text]'

    afterExpand: function($thisElement) {

      var vendorParaID = $thisElement.attr('id');

      var underscore = vendorParaID.indexOf('_');

      var vendorID = vendorParaID.substring(0, underscore);

      $("#vendor_img_"+vendorID).attr({height : "308",
                      src : "img/m/"+vendorID+".jpg"
                      });


    },
    onCollapse: function($thisElement, byUser) {
      //alert($thisElement.attr('id'));
      var vendorParaID = $thisElement.attr('id');
      var underscore = vendorParaID.indexOf('_');

      var vendorID = vendorParaID.substring(0, underscore);


      $("#vendor_img_"+vendorID).attr({height : "80",
                      src : "img/m/"+vendorID+"-crop.jpg"
                      });


    }
  });

});

ただし、画像の変化にはタイムラグがあります。

イメージをプリロードしたいのですが、正しくスワップする方法がわかりません。

これらの 2 つのリンクを調べましたが、どうすれば機能するのかまだわかりません。

http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html http://jquery-howto.blogspot.com/2009/04/jquery-image-swap-or-how -to-replace.html

お知らせ下さい。

4

2 に答える 2

1 
 ...
 <script>

    $(function() {

        $preloadImgVendor = new Array();
        $preloadImgVendorCrop = new Array();

        //automatically call function and variable objects with images with vendors Ids in "listIdsVendors"
        (function(aVendors){

            $.each(aVendors, function(i,val)
            {
                //check
                alert("vendor id load : " + i);

                $preloadImgVendor[i] = $("<img />").attr("src", "img/m/"+i+".jpg");
                $preloadImgVendorCrop[i] = $("<img />").attr("src", "img/m/"+i+"-crop.jpg");
            });

            //check
            alert("$preloadImgVendor length: " + $preloadImgVendor.length + "\n$preloadImgVendorCrop length: " + $preloadImgVendorCrop.length);


        })($("#listIdsVendors").text().split("-"));

      // override some default options
      $('div.expandable div').expander({
        slicePoint:       200,  // default is 100
        expandText:         'Expand', // default is 'read more...'

        expandEffect:     'fadeIn',
        collapseTimer:    0, // re-collapses after 5 seconds; default is 0, so no re-collapsing
        userCollapseText: 'Collapse' , // default is '[collapse expanded text]'

        afterExpand: function($thisElement) {
          var vendorParaID = $thisElement.attr('id');
          var underscore = vendorParaID.indexOf('_');
          var vendorID = vendorParaID.substring(0, underscore);

          //check
          alert($thisElement.attr('id') + " ; " + $($preloadImgVendor[vendorID]).attr("src"));

          $("#vendor_img_"+vendorID).attr({height : "308", src : ($preloadImgVendor[vendorID]).attr("src") });
        },
        onCollapse: function($thisElement, byUser) {
          var vendorParaID = $thisElement.attr('id');
          var underscore = vendorParaID.indexOf('_');   
          var vendorID = vendorParaID.substring(0, underscore);

          //check
          alert($thisElement.attr('id') + " ; " + $($preloadImgVendorCrop[vendorID]).attr("src"));

          $("#vendor_img_"+vendorID).attr({height : "80", src : $($preloadImgVendorCrop[vendorID]).attr("src") });
        }
      });

    });
</script>
</head>
<body>
    <div id="listIdsVendors" style="display:none">1-2-3-4-5-6</div>
    ...
</body>
于 2009-10-28T16:27:34.657 に答える
0

私はついにそれを理解しました。

ドキュメント準備機能の前にこれを最初に持ってください

$preloadImgVendor = new Array();
  $preloadImgVendorCrop = new Array();

  {/literal}{foreach from=$venders item=vender name=vender}
  {literal}var id = {/literal}{$vender.id_manufacturer}{literal};
  $preloadImgVendor[id] = $("<img />").attr({height : "308",
                        width : "180",
                src : "img/m/"+id+".jpg",
                id : "vendor_img_"+id
                });
   $preloadImgVendorCrop[id] =  $("<img />").attr({height : "80",
                         width : "180",
                src : "img/m/"+id+"-crop.jpg",
                id : "vendor_img_"+id
                      });

  {/literal}{/foreach}{literal}

次に、関連する行のエキスパンダー内で使用します

$("#vendor_img_"+vendorID).replaceWith($preloadImgVendor[vendorID]);

また

$("#vendor_img_"+vendorID).replaceWith($preloadImgVendorCrop[vendorID]);
于 2009-10-29T11:55:08.530 に答える