0

jquery プラグイン ( jQuery Image Scale ) を使用して、ページ上の個々の画像のサイズを変更しています。簡単な例:

 // HTML:     
 <div class='parent_container'>
      <img src='image.jpg' class='resize_image' />
 </div>
 <div class='parent_container'>
      <img src='image.jpg' class='resize_image' />
 </div>

 // CSS:
 .parent_container {
      width: 200px;
      padding: 200px;
 }

 // jQuery:
 $('.resize_image').imgscale({
    fade : 1000,
    scale : "fill"
 });

一言で言えば、画像のサイズに関係なく、.parent_container を「塗りつぶし」、オーバーフローはありません。jQuery のセレクターに基づいて、すべての画像を取得し、親コンテナー (.parent_container) の幅/高さをチェックしてコンテナーを塗りつぶします。

私はこれを機能させることができましたが、私の例では、押すとjQueryダイアログウィンドウが開き、そこにコピーが入った同じ画像を持つ「続きを読む」ボタンがあります。ダイアログウィンドウ内の画像で同じことをしたいのですが、jQueryUIが画像を追加または削除（または何かを行う）しているように見えるため、スクリプトが実行され、通常の画像とダイアログ画像の両方に必要な変更が追加されますが、ダイアログ ウィンドウがスクリプトによって割り当てられた余白を削除するかのように、画像のスタイルが壊れています。

ここでやりたいことは、ウィンドウが読み込まれた後に上記の jQuery スクリプトをアクティブなダイアログ ウィンドウに追加することです。これにより、動作させるために必要なスタイリングを再適用する必要があります。これが私のスクリプトのサンプル HTML です。

 $(document).ready(function() {

// Assign to all images with .resize_image as class
$('.resize_image').imgscale({
    fade : 1000,
    scale : "fill"
});

// Dialog box default properties (also, on open, re-assign the plugin to the all the images with the class .resize_image
var dialog_properties = {
    "width"   : "600",
    open    : function(event,ui) {
        $('.resize_image').imgscale({
            fade : 1000,
            scale : "fill"
        });
    }
};

var popup_to_open;

 // When I click the read more button, load the appropriate hidden container with it's content
$(".popup_content .big_button").click(function() {

    popup_to_open = $(this).attr("rel");

    $("div[rel='"+popup_to_open+"']").dialog(dialog_properties);
    return false;
});

 });

スクリプトに必要なスタイリングを追加できるように、モデルがロードされた後にスクリプトを実行する必要があります。

私の質問は、上記の open: function() 部分が機能しないか、機能する場合はうまくいかないということです。それを行う別の方法はありますか（私は間違っていますか）、b）誰かがダイアログボックスをクリックするたびにスクリプトを再度適用せずにこれを行うよりクリーンなバージョンがありますか（開いている画像だけに分離する可能性があります）ダイアログボックス？）

どんなアイデアでも大歓迎です！

4

1 に答える 1

0

私はこれを機能させることができました。dialog_properties という変数を作成し、クリック イベントの前にデフォルトのダイアログ プロパティを割り当てるのと同じように、オブジェクトを移動して、ダイアログ オープン ボックスの例のプロパティに直接設定しました。

  $(".popup_content .big_button").click(function() {

      popup_to_open = $(this).attr("rel");

      $("div[rel='"+popup_to_open+"']").dialog(
           {
               "width"   : "600",
               open    : function(event,ui) {
                   $('.resize_image').imgscale({
                         fade : 1000,
                         scale : "fill"
                   });
           }
      );
      return false;
  });

このように、ダイアログが開いたときに open イベントが実行されるように見えます。ここでは、open イベントで変数を作成することにより、値を割り当てる前に実行されます。それが理にかなっているかどうかはわかりませんが、うまくいきます:)

于 2013-02-21T20:58:36.137 に答える