問題タブ [jquery-backstretch]

どうすれば 5 秒ごとに src を変更できるのか疑問に思いました。

私は使っている

スライドショーのように、「home5.jpg」を他の画像 (たとえば、home6.jpg と home7.jpg) と入れ替えることはできますか? 動的に変更する方法がわかりません

プラグイン「バックストレッチ」としてスケーラブルな画像のグリッドを作成しようとしています。彼のすべての画像でプラグインを div 以上に使用できますか?

backstretch (ここにあります) と呼ばれる背景画像ストレッチ スクリプトを変更して、ブラウザで HTML5 ビデオを全画面背景としてストレッチします。

Chrome、Safari、および FireFox で次のコードを使用してこれを実行していますが、IE9 (驚き、驚き) では、これらの追加をさまざまなソースのビデオ要素に追加していません。

これがスクリプト全体です。どんな考えや助けも大歓迎です！前もって感謝します！

「進行中の作業」ページの背景として 1 つの大きな画像を使用した単純なページ構造があります。

問題は、Firefox では 1152x864 の解像度で背景画像が「切り詰められ」、Internet Explorer (および同じ解像度) ではすべて正常に動作するように見えることです。

「切り捨てられた」という意味は、ロゴ、特に「クリエイティブな写真家」というフレーズが、モニターの左側に非常に近いように見えることです。

他の画面解像度 (1200x800、800x600) でも、画像は問題なく表示されます。

ウェブサイトは公開されており、http://www.antoniafiore.comです。

私は何か間違っていますか？どこが間違っているか教えていただけますか？

返信ありがとうございます。

ここにいくつかのスクリーンショットがあります

• コマンドバー付きの Firefox (良い): http://bit.ly/SKser1
• コマンドバーのない Firefox (悪い): http://bit.ly/QFPCIk
• コマンド バー付きの IE (良い): http://bit.ly/Q2m8Ub
• コマンド バーのない IE (悪い): http://bit.ly/VxGgD4

現在、バックストレッチで画像を変更する機能を実装しようとしています。バックストレッチはブロックレベルの要素にバインドされているので、

次に、リンクをクリックしてhrefを取得し、新しいバックストレッチ画像を追加できるようにしたいのですが、現時点では新しいバックストレッチインスタンスが作成されます.ここに私のクリックコードがあります.

どこが間違っているのですか？私ができるようにしたいのは、#background-image.slideshow でバックストレッチされた画像を変更することだけです

友達のウェブサイトhttp://www.gamezilla.co.zaを参照しています。

背景画像はjQueryプラグイン（backstretch）でストレッチされていますが、画像には非常に薄いグリッドマスクがあります。CSSまたはjQueryを使用して、このマスクを背景画像にどのように追加しますか？

ここに示すように、背景画像にはマスクがありません（http://www.gamezilla.co.za/wp-content/uploads/2012/09/b_homepage.jpg）

それがどのように機能するかについて何か考えはありますか？

Backstretch プラグインを適用して、最初のブラウザ ウィンドウの 100% に設定された div を使用しようとしています。クリックするとアニメーション化されて小さいサイズに変更され、その下にある別の div は次のようにサイズ変更されます。まあ、彼らが画面を共有できるようにします。すべての機能が動作しているように見えます。最初は div のサイズが変更され、バックストレッチがそれに伴いますが、アニメーション機能が終了すると、バックストレッチはウィンドウの 100% に戻ります。さらに奇妙なのは、ユーザーがブラウザー全体のサイズを変更すると、バックストレッチが正しい位置にスナップされ、そこにとどまることです。

これをjsfiddleに入れると、問題は私のコードとまったく同じように機能します。クリック機能は div のサイズを変更し、ブラウザのサイズが変更されるまで、バックストレッチは div から飛び出します。通常、私はこの種のことを理解しようとするのが大好きですが、これは私の頭の中にあるのではないかと思います。厳しい締め切りが迫っていて、この問題で 2 週間も頭を悩ませています。どんな洞察も非常に役に立ちます。

私が使用しているコードは次のとおりです。

HTML

CSS

JS

</p>

サイトの親コンテナ（全身ではない）で画像を垂直方向に引き伸ばそうとしています。これは、IDが「imagen-fondo」のdivです。

私はbackstretchプラグインと、background-sizeを使用したcssbackground-imageのいずれかを試しました。

ただし、どちらの場合も問題は、親コンテナの計算された高さが直接の子の高さよりも小さいため、背景画像がコンテンツ自体よりも小さく見えることです。

どうすれば彼の直接の子供と同じ高さ、または少なくともそれより大きくすることができますか？

ここでライブデモを見ることができます：

アップデート：

問題は、div＃imagen-fondoがコンテンツではなくウィンドウの高さを取得していることだと思います。これが、画面が大きい場合は問題が発生しないが、ウィンドウの高さが発生するコンテンツよりも小さい場合は、背景画像が終了する垂直方向のスクロールを開始するのと同じように、この2つのスクリーンショットで確認できます。

オーバーフローのあるものはありますか？

更新2：

今のところ、私はそれを機能させるためにいくつかのJavaScriptを導入しました、

フッターのオフセット位置を取得し、「。backstretch」divの高さをその高さまでストレッチします。

ただし、ウィンドウのサイズを変更して垂直スクロールバーを表示し、ページを調べると、親コンテナ「＃imagen-fondo」（バックストレッチが自動的に高さを取得する場所）が引き続き高さを取得していることがわかります。コンテンツ自体からではなく、表示されるビューポート。

誰かがそれを行うためのより良い方法を見つけた場合、CSSはこの汚いアプローチの代わりにそのアプローチのみを使用します。

レスポンシブな Wordpress テーマで Instagram ギャラリーに取り組んでいますが、助けが必要な問題がいくつか見つかりました。

ajax と jsonp を使用して Instagram フィードを取得し、結果をいくつかの空の div に追加しています。私が使用している簡略化されたコードは次のとおりです。

このスクリプトは、Instagram の各写真を特定の div ("id=instabox1"、"id=instabox2" など) に割り当てます。このコードは正常に動作しています。

写真が反応するように、 jQuery Backstretch プラグインを使用したいと思います。それを機能させるには、次のコードを使用するだけです。

このコード行は正常に機能しているため、backstretch.js が適切にロードされ、正常に機能しています。

だからここに私が抱えている問題があります。Instagram から最新の写真を取得し、それらを backstretch プラグインに動的に割り当てることで応答性を高めたいと考えています。最初に試みたのは、成功セクションの ajax 関数で backstretch メソッドを呼び出すことです。

data.data[i].images.low_resolution.url が画像の正しいパスを与えることを考えると、これにより、boxitem (#instabox0、#instabox1、...) によって定義された ID に backstretch メソッドが適用されるので、 div は順番に入力されます。

それが機能しない部分で、エラーが発生します: Uncaught TypeError: Object [object Object] has no method 'backstretch'

したがって、メソッド .backstretch を $.ajax 関数の外側で使用すると、正常に動作します (ただし、Instagram の写真の動的パスは取得されません)。

$.ajax 関数内でメソッド .backstretch を使用すると、前述のエラーが発生します。

バックストレッチ画像のコード行を文字列として動的に記述し、それらを配列内および ajax 関数の外側に格納して評価するなど、多くのことを試しました。

しかし、「メソッド 'backstretch' がありません」というエラー メッセージが常に表示されます。

また、スクリプト セクションを作成し、次のような動的に生成された適切なバックストレッチ コードを入力しました。

ただし、ページがロードされたときに実行されません。

何か助けはありますか？Ajax jsonp 関数内で .backstretch メソッドを使用するにはどうすればよいですか? Instagram の写真を別の方法で取得した方が簡単でしょうか? スクリプト セクションを作成することはできますが、ページが既に読み込まれているときにどのように実行できますか?

どうもありがとう、私はプロのプログラマーではないので、この問題で少し立ち往生しています。皆さんにとって明らかなことを見落としているかもしれませんが、私は何日もそれを解決しようとしてきました。

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

サイトのデモに取り組んでおり、FF (mac) でページをロードまたは更新すると、ブラウザのサイズを変更するかマウスをスクロールするまで、左の列の背景がページ全体を占めているように見えます。

Chrome (mac) では発生しないようです。それが私のCSSにあるのか、それともFFにあるのかはよくわかりません。また、背景画像にギャラリーを使用しないと発生しないようです。

ここに私のデモへのリンクがあります：

http://review.boostmktg.com/niven/

どんな洞察も大歓迎です。ありがとう！