1

次のウェブサイトのようなものを作成しようとしています

基本的に私が求めているのは、多数のサムネイルを含むポートフォリオ ページを作成するために Isotope を使用することです。ユーザーがサムネイルにカーソルを合わせると、キャプション オーバーレイが表示され (フェードイン)、ユーザーがサムネイルをクリックすると、写真の大きなバージョンが表示されます。レイアウトは再調整する予定です。

これまでのところ、効果を個別に達成するためにいくつかのプラグインを使用することができました...つまり、Mosiac.js を使用してホバー効果を達成し、Isotope.js を使用してレイアウトを達成しました。私がこれまでに持っているものは、mosaic.htmlとisotope.htmlで見ることができます。

私は立ち往生しています。これら 2 つのソリューションを組み合わせる方法がわかりません。CSS クラスを操作してみたり、jQuery を少しいじったりしました。私はjQuery初心者です:(

助けてください！

さらに情報が必要な場合や質問が不明な場合はお知らせください

4

2 に答える 2

2

このような単純なものには、mosaic.js を使用する必要はありません。まず、機能面で Isotope を使用して Web サイトを動作させます。その段階では設計の微調整について心配する必要はありません。次に、Isotope 要素にオーバーレイ キャプションを含む div をネストし、デフォルトで非表示にします。非表示の div を表示するホバー イベントを Isotope 要素にアタッチし、視聴者のマウスが Isotope 要素の上にあるときにそれらを表示します。

ただし、モバイル タッチ スクリーン デバイスを使用しているユーザーには、ホバー効果が表示されないことを忘れないでください.

HTML

<div class="item">
    // content of the Isotope .item
    <div class="overlay">
        // content of the overlay
    </div>
</div>

CSS

.overlay {
    display: none;
    /* other rules to style the overlay */
}

jQuery

$(".overlay").hover(function(){
    $(this).filter(':not(:animated)').animate({ whatever you like to animate });
        }, function() {
    $(this).animate({ whatever you like to animate });
});

ホバー時に実装したい効果については、jQuery fadeToggle()とjQuery animate()メソッド、および show()、hide() などのメソッドも参照してください。

于 2012-10-04T15:53:54.717 に答える
0

私はまったく同じものを持っていますが、それらを組み合わせることができない理由がわかりません。モザイクには高さが必要であり、同位体にはそのダイナミクスがあります。だから私は使用します：

$('.mosaic-block').each(function (index) {
    $(this).height($(this).find(".mosaic-backdrop").height());
});

しかし、アイソトープにはまだアイテムが配置されており、キャプションはまだ機能しません。しかし、Mosaic を使い続けたい場合は、これで正しい方向に進むかもしれません。コードを @Systembolagnet のソリューションに変換します。彼の答えを受け入れてください

于 2012-12-04T10:58:01.710 に答える