2013-02-21 20 views
0

我使用一個jQuery插件(jQuery Image Scale)到我的網頁上調整我的個人圖片中運行的腳本。一個簡單的例子:一個jquery模型

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

}); 

我需要有效運行的腳本後,模型加載,這樣我可以有腳本添加neccesary造型。

我的問題是,開放:函數()以上部分不工作,或者如果這樣做,沒有做的伎倆。是否有另一種方法來做到這一點(我是否做錯了)和b)是否有更乾淨的版本來做到這一點,而不需要每次有人單擊對話框時再次應用腳本(也許將它隔離爲只是打開圖像對話框?)

任何想法將大大不勝感激!

回答

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

看來這種方式打開的情況下運行當對話框打開時,通過創建一個帶有打開事件的變量,它將在分配值之前運行。不知道這是否有道理,但它的工作:)