jquery - 在 jquery 模型中运行脚本

Question

我正在使用 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)是否有一个更干净的版本来做到这一点而无需在每次有人单击对话框时再次应用脚本(也许将它隔离到打开的图像对话框？)

任何想法将不胜感激!

Answer 1

我设法让它发挥作用。为了创建一个名为 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;
  });

以这种方式显示打开事件在对话框打开时运行，其中通过在分配值之前使用打开事件创建一个变量来运行它。不确定这是否有意义，但它有效:)