2012-02-14 11 views
3

Pipboxは、「Plone 3でAJAXポップアップを行うPlone 4互換の方法」と言います。Plone 4のAJAXの画像ポップアップ

http://plone.org/products/pipbox

その後、Ploneの4にjQueryのツール画像のポップアップを行うための適切な方法は何ですか?

をplone.app.imagingから事前に定義されたサイズのいずれかを使用して、ポップアップで画像を開くクリックで[インストール]をクリックハンドラ

  • をセレクタ

  • を使用して画像のための

    • スキャンHTML

  • 答えて

    11

    すべてのpipboxはPlone 3でload plone.app.jquerytoolsをサポートしています。Plone 4では、plone.app.jquerytoolsが組み込まれています。

    plone.app.jquerytoolsは、簡単なAJAXポップアップのためのjQueryツールとPlone固有のサポートをロードします。そのサポートにより、AJAXポップアップをjQueryで選択可能なページコンポーネントに関連付けることができます。詳しくは、the PYPI pageを参照してください。

    簡単な例:plone.app.imagingで提供されているプレビュースケールを使用して、コンテンツ領域の画像にライトボックススタイルのポップアップを設定するとします。 JSはこれを行うには次のとおりです。

    jQuery(function($) { 
        $('img.image-right, img.image-left, img.image-inline') 
        .prepOverlay({ 
         subtype: 'image', 
         urlmatch: '/image_.+$', 
         urlreplace: '/image_preview' 
         }); 
    }); 
    

    あなたはその後、portal_javascriptsのJSリソースに追加し、皮膚またはブラウザ層としてのjavascriptのリソースを登録することで、このコードをロードします。

    コード:

    1. は「jQueryの」「$」の別名を持つページは、準備ができたときにロードするための機能を設定します。
    2. ビジュアルエディタで使用するスタイルを使用するページ内のすべてのイメージアイテムを選択します。
    3. plone.app.jquerytoolsからのprepOverlayルーチンを呼び出してオーバーレイと関連付けます。
    4. オーバーレイがイメージであることを指定します。つまり、読み込まれたイメージからサイズ情報を判断することができます。
    5. 画像URLを取得してプレビューに変換するための少しの正規表現のマッチングと置き換えを行いますか。
    +0

    Pipboxはこれらを追加するportal_properties設定を提供しているので、私はほとんど混乱しませんでしたが、純粋なJSでそれらを行うのはさらに簡単です。 –

    関連する問題