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的变量并在click事件之前分配默认对话框属性一样，我将对象直接移动为对话框打开框示例的属性：

  $(".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事件的变量。不确定这是否有意义但是有效：）

在jquery模型中运行脚本

1 个答案: