人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jqueryでlightboxありのhtmlを読み込んでいるのですが、lightboxがうまく動作しません。
lightboxありのhtmlだけを表示した場合は、
うまく動くのですがloadで読み込むと動かない状況です。
何か解決策はありますでしょうか?

■元のhtml
<html lang="ja">
<head>
<title>test</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="/***/jquery.js"></script>
<script src="/***/easySlider1.7.js"></script>
<script src="/***/jquery.flexslider.js"></script>
</head>
<body bgcolor="#000000">
<a name="top"></a>
<script type="text/javascript">
$(function() {
$("#loading").show();
$("#pics").load('test.html', function() {
$("#loading").fadeOut(function() {
$("#pics").show();
});
});
});
</script>
<div id="loading"><img src="/***/loading.gif" /></div>
<div id="pics"></div>
</body>
</html>

■読み込むhtml(test.html)
<script src="/***/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/***/lightbox.css" media="screen,tv">
<script type="text/javascript" charset="UTF-8" src="/***/spica.js"></script>
<script type="text/javascript" charset="UTF-8" src="/***/lightbox_plus.js"></script>
<a href="***.png" rel="lightbox"><img src="***.png" border="0"></a>

●質問者: MrB
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

つまりは、onload以降にAjaxなどで動的に要素を追加する場合は、それぞれ
明示的にonclickに処理を書いてあげれば良いのです。
これで後から追加されたaタグでもlightboxを表示できます。

コードを読んで理解する – Ajaxでlightbox.jsを使う時に注意するところ | kwLog

この辺りがヒントになりませんか。


Create a new Fiddle - jsFiddle
こういうサイトを使って動く状態を見せたほうが解決が早いです。


追記:
親ページを以下のようにしてみてください。lightbox_plus.jsの後ろのコードをコピペしただけです。test.htmはa,imgだけでいいです。

$(function() {
 $("#loading").show();
 $("#pics").load('test.htm', function() {
 var lightbox = new Lightbox({
 loadingimg:'/images/smafo/loading.gif',
 expandimg:'/images/smafo/expand.gif',
 shrinkimg:'/images/smafo/shrink.gif',
 blankimg:'/images/smafo/blank.gif',
 previmg:'/images/smafo/prev.gif',
 nextimg:'/images/smafo/next.gif',
 closeimg:'/images/smafo/close.png',
 effectimg:'/images/smafo/zzoop.gif',
 effectpos:{x:-40,y:-20},
 effectclass:'effectable',
 resizable:false,
 animation:true
 });
 $("#loading").fadeOut(function() {
 $("#pics").show();
 });
 });
});

MrBさんのコメント
ありがとうございます。 少し古いlightboxにするとonclickでうまく動きました。 onclick以外で動作させるほうほうは無いですよね?

Cherenkovさんのコメント
動作確認が取れるものを提示すれば回答が集まるかもしれませんよ。

Cherenkovさんのコメント
質問文にソースがありますが、コピペ一発で再現するものがいいです。

Cherenkovさんのコメント
回答1に追記しました。ご確認ください。

MrBさんのコメント
何度もご教授ありがとうございます。 形として動くようになりました。助かりました。 今度は、lightboxのloadingの表示箇所がおかしいのと 画像が表示されてもlightboxのloadingが消えないというのが 問題になってますが、そこは自力で何とかしてみます。

質問者から

コピペ一発で利用できるものですが、以下でどうでしょうか。
■sample.htm

<html lang="ja">
<head>
<title>test</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="http://dragon1226.web.fc2.com/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://dragon1226.web.fc2.com/lightbox.css" media="screen,tv">
<script type="text/javascript" charset="UTF-8" src="http://dragon1226.web.fc2.com/lightbox_plus.js"></script>
</head>
<body bgcolor="#ffffff">
<script type="text/javascript">
$(function() {
$("#loading").show();
$("#pics").load('test.htm', function() {
$("#loading").fadeOut(function() {
$("#pics").show();
});
});
});
</script>
<div id="loading">
<img src="http://dragon1226.web.fc2.com/loading.gif" />
</div>
<div id="pics"></div>
</body>
</html>

■test.htm

<link rel="stylesheet" type="text/css" href="http://dragon1226.web.fc2.com/lightbox.css" media="screen,tv">
<script type="text/javascript" charset="UTF-8" src="http://dragon1226.web.fc2.com/lightbox_plus.js"></script>
<a href="http://dragon1226.web.fc2.com/test.png" rel="lightbox"><img src="http://dragon1226.web.fc2.com/test_sample.png" border="0"></a>

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ