問題タブ [jquery-isotope]

最近、MasonryおよびIsotopeJQueryプラグインを発見しました。それらは機能的にほぼ同一であるように見え、両方とも同じ作者を持っているように見えます。私が見ることができる唯一の明らかな違いはライセンスです。

機能面でこれら2つの主な違いは何ですか？なぜあなたは一方を他方の上に使うのですか？

このページにアクセスすると、購読するアーティストを検索し、検索結果で [購読] をクリックしてアーティストを購読できます。

アーティストを購読してから購読を解除しようとすると、そのアーティストはリストから削除されませんが、購読解除ボタンを 2 回クリックすると削除されます。

サブスクライブしているアーティストのリストは、グローバル変数 によって参照される Isotope コンテナーに格納されますSF.container。

ユーザーが呼び出してサブスクライブすると、アーティストがコンテナに追加されます

を呼び出して、アーティストをコンテナから削除します。

「登録解除」がクリックされるたびに同じパラメーター値がこの関数に渡されるため、2 回目には機能するのに 1 回目では機能しない理由がわかりません。

この問題は、アーティストを購読し、ページを更新せずに購読を解除しようとした場合にのみ発生します。つまり、ページが最初にロードされたときにページにあるアーティストから購読を解除しても問題ありません。上記の関数は にありglobal.jsます。

私はjQueryを初めて使用しますが、物事がどのように機能するかの基本的なアイデアは理解しています。現在、Isotope (流動的/レスポンシブ レイアウト) を使用してシンプルなページを開発しており、 Fancyboxをそのコンテンツにうまく統合することができました。しかし、問題は、Isotope のボックスの 1 つで画像リンクをクリックしようとするたびに、クリックするたびにボックスが拡大すると仮定すると、ボックスが元のサイズに戻り、画像が上に重ねられることです。全部。

説明の仕方がよくわかりませんが、jsfiddle で作成したウェブサイトのサンプルは次のとおりです。

1) どういうわけか、ボックスを希望どおりに動作させることができたので、ボックスの選択は問題になりません。しかし、ボックスを元のサイズと位置に戻さずに、展開されたボックスのテキスト/ビデオ リンクをクリックするにはどうすればよいでしょうか。別の新しいボックスをクリックしたときにのみ閉じるようにします。

2) また、可能であれば、クリックするたびに選択したボックスまでウィンドウをスクロールできますか?

誰にとっても混乱しないことを願っています。よろしくお願いします！:)

jQuery MasonryとIsotopeプラグインの両方を試しましたが、希望するレイアウトを実現できないようです。

どちらのプラグインも、前の行の要素の高さに基づいて「次に利用可能なスペース」を計算するようです。例えば：

この例では、アイテム #6 は、#4 の高さが #2 の高さよりも小さいため、右端に移動します (移動したい場所)。

私が実現したいレイアウトは、左フローティング要素に似ています。

上記の 2 つのプラグインでこのレイアウトを実現するためのオプションはありますか、それとも別のプラグインを利用できますか?

同位体でアイテムをフィルタリングしようとしています。これらのアイテムは異なる div 内にありますが、何らかの理由でフィルターは最初の div に対してのみ機能します。ここに私のコードがあります:

私のJavaScript：

私は何を間違っていますか？

前もって感謝します

マウロ

並べ替え、レイアウト ボタン、および複数のフィルターを使用してページを作成しようとしています。isotope のホームページは良い例ですが、フィルターは 1 つしかありません。そのページを使用して、一緒に機能するフィルターを追加する方法がわかりません (つまり、一度に 1 つずつではなく、一緒に機能する色とサイズ)。以下はコードです... 別のフィルターを追加するにはどうすればよいですか?

そして、これはJavaScriptです：

プロジェクトで素晴らしい JQuery Isotope プラグインを使い始めました。すべてがうまく機能しますが、コーナー スタンプ オプションに 1 つの問題があります。

私のマスノリー グリッドの各要素は、固定幅 (220px + 5 マージン) とランダムな高さ (コンテンツに応じて) を持ち、CSS ファイルで @media クエリを使用して、異なる画面解像度で列数を変更しています (ページ幅は 230、460 にすることができます)。 、690..など)。

コーナー スタンプの問題は、最も狭いバージョン (1 列) で発生します - コーナー スタンプは同位元素で覆われています...

このデモの Isotope 公式ページでも同じ問題が発生します: http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html (ウィンドウを狭くすると、大きな赤い四角形が他の Isotope 要素の後ろに隠れます) .

Masnory プラグインのデモ サイトにあるように、正常に動作することがわかりました。 http://masonry.desandro.com/demos/corner-stamp.html

Masnory から Isotope にサイト スクリプトをコピーするために既に組み合わせましたが、JS/jQuery があまり得意ではないのでうまくいきませんでした :/

自分のサイトにフィルタリング オプション (Masnory プラグインでは利用できない) を持たせたいので、Isotope で機能するのは素晴らしいことです。

連絡先のリストを表示し、それらをフィルタリングできるようにするために、優れたアイソトーププラグインを使用することを計画しています。私が抱えている問題は、それが小さなデータセットに対してはうまく機能するということですが、1000以上のデータに対してそれをスケールアップする最良の方法がわかりません。

これまでのところ、私が持っていたアイデアは次のとおりです。

• ランダムなサブセットをロードし、フィルターをクリックしてギャップを埋めるときにノードを追加します
• ユーザーがスクロールするにつれて、より多くのノードをロードする
• 結果のページング
• 数値を事前定義されたしきい値未満にするのに十分なフィルターが選択されるまで、連絡先を表示しません。

これらがうまくいくかどうかはわかりませんが、他の人がこの状況に直面し、私にいくつかのアイデアを与えることができることを望んでいました。

CSS3アニメーションを使用して、相対的な位置にある要素の画面上にコンテンツを配置する場合

javascriptを使用してアイテムの位置を尋ねると、アイテムがまだ残っていることが報告されます

たとえば、jQueryIsotopeプラグインを使用するこの例の要素の位置を見てください。

http://isotope.metafizzy.co/demos/basic.html

このようなjQuerycss（）メソッドを使用する必要がありますか？それがうまくいくかどうかさえわかりません！

アップデート：

この例をJsFiddlehttp://jsfiddle.net/uQtur/3/に投稿しました。

JS

HTML