1

colorbox を使用して、画像と html コンテンツを 1 つのページに表示します。この要素の初期化は異なります。1 つはイメージ用で、もう 1 つは html コンテンツ用です。ウィンドウのデザインが異なり、「image」カラーボックスの cboxLoadedContent div のパディングは「padding:15px」で、「html」カラーボックスの cboxLoadedContent div のパディングは「padding:0px 15x」です。「html」リンクをクリックすると、特別なクラスを追加でき、パディングが正しくなります。ただし、メインのカラーボックス ウィンドウは高さを変更しません。両方のリンクの横には、さまざまなギャラリーの一部があります。したがって、幅と高さが強いhtmlのカラーボックスを呼び出すことはできません。

誰かがこれを手伝ってくれますか?

4

1 に答える 1

2

コメントで提供されているソリューションが気に入っていますが、コードをより一般的なものにするためにいくつかの小さな変更を加えています。アイデアは、すべてのカラーボックス css ファイルが「ヘッド」に含まれているが、無効になっているということです。次に、カラーボックス ウィンドウが開かれると、対応するテーマの css ファイルのみが有効になります。

それを達成する方法はたくさんありますが、そのうちの 1 つです。

function useColorboxTheme() {
    var selectedTheme = $(this).attr("data-theme");

    $(".colorboxTheme").attr("disabled", "disabled");
    $("#" + selectedTheme).removeAttr("disabled");
}

function defaultColorboxTheme() {
    $(".colorboxTheme").attr("disabled", "disabled");
    $(".colorboxTheme.default").removeAttr("disabled");
}

$(document).ready(function(){
    $("a.colorbox").colorbox({
        onOpen: useColorboxTheme,
        onClosed: defaultColorboxTheme
    });
});

useColorboxTheme() はdata-theme、カラーボックス アンカーの属性を探します。

<a data-theme="theme1" class="colorbox" title="This is pic1" href="http://pics/pic1.jpg"></a>

「theme1」は、head セクションの「link」タグの ID に対応することに注意してください。例えば：

<link id="theme1" class="colorboxTheme" rel="stylesheet" type="text/css" href="css/colorbox/example1/colorbox.css">

おそらく、使用しているコードまたは CMS に合わせて調整する必要がありますが、これで一般的な考え方がわかります。これがそのためのフィドルです。

ただし、これは colorbox の意図した使用法ではないことに注意してください。複数のテーマを使用する際に問題が発生しないように、すべてのブラウザーで徹底的にテストする必要があります。私が気付いた 1 つの癖は、すべてのテーマを連携させるには、example 5 のテーマを他のテーマの前にリンクする必要があることです。

于 2012-10-10T21:56:46.307 に答える