問題タブ [jquery-isotope]

私はしばらくの間、アイソトープに苦労しています。いくつかの異なる座った後、私はこれを理解できないようです.

isotope.metafizzy.co/index.html

私の問題を画像で説明しますが、ここに説明があります。私のサイトを見ればわかるように、

test.davewhitley.com/not-wp/isotope_test/index.php

同じ幅の列が 3 つあるアイソトープを使用しています。

中央のレイアウトの外側の端を見ると、パディングがあり、中央全体がヘッダー/フッターよりもやや狭くなっていることがわかります。私は心ゆくまでCSSをいじりましたが、中央ギャラリーを含まれているdivの端まで拡張する方法がわかりません(960pxです-したがって、中央ギャラリーは約940pxです)。通常は div といくつかの CSS だけでこれを行うことができますが、Masonry の JavaScript は私の頭の中にあります (すべての計算など)。どんな助けでも大歓迎です。

ここに私の問題が示されています。私が持っているもの：

http://farm7.static.flickr.com/6207/6057816365_e0b6e2e8c4.jpg

私が欲しいもの：

http://farm7.static.flickr.com/6208/6058362460_d1200a1491.jpg

リンクされた画像とハイパーリンクされていないテキストで申し訳ありません。私はこのサイトでは若すぎます.

開いているjQuery Isotope divを他のすべてのものの上に強制的に開くことは可能ですか?

現時点では、かなりランダムに見えます - 行を下にジャンプする人もいれば、右に移動する人もいます。私がやろうとしているのは、divをクリックすると、左上にジャンプして行全体を引き継ぐことです他のクリックされていない div はすべて下の行にジャンプします。

jsFiddleのリンクはhttp://jsfiddle.net/djsbaker/gPuD9/です。

Isotope JSの並べ替えと画像の配置を使用していますが、ページが読み込まれるときを除いて、すべての画像が読み込まれるまでスクリプトが実行されないことを除けば、正常に機能しています。Isotope JSヘルプページには、高値と幅の値を指定すると、画像を読み込まずにアイテムを配置するために必要な情報がスクリプトに提供されると記載されています。私はこれを行いましたが、スクリプトはまだすべての画像がロードされた後にのみトリガーされます。私はJSコーディングに慣れていないので、見逃していたものを見つけようとしていました。

$（window）.load（function（）{$（'＃container'）。isotope（{itemSelector：'.item'}）;}）; var $ container = $（'＃container'）; $（'。filtersa'）。click（function（）{varセレクター= $（this）.attr（'data-filter'）; $ container.isotope（{filter：selector}）; return false;}）; $（'＃options'）。find（'。option-seta'）。click（function（）{var $ this = $（this）; //すでに選択されている場合は続行しないif（！$ this.hasClass （'selected'））{$ this.parents（'。option-set'）。find（'。selected'）。removeClass（'selected'）; $ this.addClass（'selected' ）; }}）;

David DeSandro の興味深い Isotope 実装のリストには、http://www.wonderfulwebsolutions.net/の 1 つがあり、要素をクリックすると追加のコンテンツ (画像、テキスト、リンクなど) が表示されます。jQueryの初心者として、私はこの素晴らしいプラグインの非常に基本的な基本を理解しているようですが、ここで簡単なテストhttp://www.16percent.de/siehmaleineran.htmlアップサイズされた各要素のコンテンツを明らかにする方法がわかりません。クリックされたら。その例の要素で実行されている自動スライドショーのように、私はさらにトリッキーなことを望んでいません。カテゴリのフィルタリングと並べ替えも、現時点ではまったく重要ではありません。

これを正しい方法で行う方法を知っている人はいますか? 別の投稿から、Isotope がレイアウトを解決するには、最初に各要素をアップサイズする必要があることを収集しました。

あらゆる種類の洞察を事前にありがとうございました。

クリックするとボックスが展開する石積みスタイルのページを作成しています。別のボックスをクリックすると、他のすべてのボックスがデフォルトで元のサイズになるように、JavaScript コードを作成しました。つまり、一度に 1 つのボックスのみが展開されます。

それはうまくいきます！

問題は、同位体はボックスのサイズ変更をアニメーション化せず、再配置のみをアニメーション化することです!

そのため、jquery UI プラグインを呼び出してトグル クラス関数をアニメーション化しました。これにより、要素の再配置だけでなく、要素自体の拡張もアニメーション化されます。

しかし残念なことに、jquery UI と isotope の何かが完全に適合していません。つまり、要素の再配置がうまくいかないということです。

例の JavaScript コードは次のとおりです。

最初に機能するもの：

次に、機能しないもの (ミリ秒が 2 つの例の唯一の違いであることに注意してください):

誰が問題が何であるか、またはそれを解決する方法を知っていますか? よろしくお願いします。

//A.

ハッシュ履歴付きのアイソトープを使用しています。うまく機能しますが、URL に満足していません。単純化してクリーンアップしたいと思います。

現在使用中:

このマークアップについて:

それで、私の質問: 次のマークアップでどのように機能させることができますか?

私はフィルターのみを使用しています。他のすべての同位体オプションはロックされているため、フィルターへの参照を削除したいと考えています。

前もって感謝します！

私は現在、jQuery Isotope で遊んでいます。私はそれを愛していますが、それは私の非常に基本的なjQueryの知識をはるかに超えています. これまでのところ、他の人々の助けを借りて、ゆっくりと最終目標に到達しています. 今日の私の質問は、開いた大きなボックスが閉じられるまで、小さなボックスをクリックできないようにすることが可能かどうかを確認することです - http://jsfiddle.net/djsbaker/gPuD9/を参照してください

私の理想は、小さな箱をそれぞれ一番上で開き、すべての小さな箱を押し下げることでした。ユーザーが複数のボックスをクリックすると、大きなボックスが 2 行目にドロップダウンするため、これは可能ではないようです。これを回避する方法は、大きなボックスを開いた後に小さなボックスをクリックできないようにしないことです...少なくとも私は願っています。

前もって感謝します。

DB

新しい.elementがクリックされたときに現在拡大されている.elementを自動的に縮小できるかどうか、および現在拡大されている.elementを常に左上に表示できるかどうかを知っている他のjQuery Isotopeプラグイン実装者はいますかコンテナー div (他の要素は、reLayout 後に通常どおり Isotope 自体を処理できます)?

ありがとう！

jQuery Isotope を使用して製品写真をフィルタリングしています。選択ボックスを使用するように例を変更する必要がありましたが、これはうまく機能しますが、複数のフィルター属性を持つ例からコードを変更する必要があります。

これは動作するコード例です:

そして、これが機能しない私のコードです。

追加されている isoFilters 配列アイテムまで追跡しましたが、それらは空です。何が問題なのかわかりません。

この行を置き換えると、コードが機能します。

これとともに：

ただし、両方のグループでフィルタリングすることはできません。1 つのみです。

助けを期待して、私はこれについて頭を悩ませています。

ありがとう。

基本的なスタイリングに Twitter の Bootstrap css フレームワークを使用して単純な Web サイトに取り組んでいます (これが関連情報かどうかはわかりません)。

isotope.js を使用して簡単なフィルター可能な製品ページを作成しました。これは、Mac の Chrome、Safari、および Firefox で期待どおりに動作しています。しかし、IE8 と IE9 では奇妙なことが起こっています。画像はすべてくしゃくしゃになります (WP の注目の画像機能を使用して、正方形にする必要があります) 。 imageを参照してください。

サイトの URL は次のとおりです。http://www.niewkerkonline.nl/het-bedrijf/producten/

誰がこれを引き起こしているのか、どうすれば解決できるのか知っていますか? 丸みを帯びた角やその他の CSS3 の長所が取り残されているという事実は、私は我慢できますが、写真は確実に適切に表示される必要があります。

どんな助けでも大歓迎です。