質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2872閲覧

loadメソッドで別ページの要素を読み込んでowl carouselを適用できますか?

bokero

総合スコア14

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2015/06/10 04:43

編集2015/06/11 02:32

以下のカルーセルプラグインを使用しております。

owl carousel
http://owlgraphic.com/owlcarousel/

表題の件の問題。Wordpressを使用しております。
おそらく原因としては、carouselの動的に生成されている要素

lang

1<div class="owl-wrapper-outer">..... 2<div class="owl-wrapper">..... 3<div class="owl-item">.....

この辺りの要素が読み込まれないからだと思いますが。。。
loadメソッドを動的な要素に対応させる、またはjQueryのプラグインを動作させるやり方をご教授頂けないでしょうか?

※以下記述、プラグイン動作に必要な記述は省略しております。

javascript loadメソッドでcarousel要素を出力

lang

1$(window).load(function() { 2 3 $('#import').load('index.php #export'); 4 5});

読み込みたい要素 index.php ※ここにはcarouselのjsは読込みません。

lang

1<div id="export"> 2 <div id="owl-demo" class="owl-carousel"> 3 <dl class="item"> 4 <dt></dt> 5 <dd></dd> 6 </dl> 7 <dl class="item"> 8 <dt></dt> 9 <dd></dd> 10 </dl> 11 <dl class="item"> 12 <dt></dt> 13 <dd></dd> 14 </dl> 15 </div> 16</div>

読み込ませたい場所 page.php

lang

1<div id="import"></div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

load()のコールバックを利用して、読み込み完了時に改めてカルーセルを適用すればいいのではないでしょうか。

lang

1 $('#import').load('index.php #export', function(){ 2 //ここでカルーセル適用する 3 });

投稿2015/06/10 04:57

orange0190

総合スコア1698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bokero

2015/06/10 08:39

コールバック関数がありましたね! 無事に動作しました。 迅速でわかりやすいご解答ありがとうございましたm(__)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問