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;
  });

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

于 2013-02-21T20:58:36.137 回答