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>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/04/02 11:21:25
  • 終了:2013/04/07 07:01:12

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922013/04/03 00:13:54

ポイント100pt

つまりは、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();
    });
  });
});
他3件のコメントを見る
id:Cherenkov

回答1に追記しました。ご確認ください。

2013/04/05 00:56:32
id:MrB

何度もご教授ありがとうございます。

形として動くようになりました。助かりました。

今度は、lightboxのloadingの表示箇所がおかしいのと
画像が表示されてもlightboxのloadingが消えないというのが
問題になってますが、そこは自力で何とかしてみます。

2013/04/05 06:43:35

その他の回答(0件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922013/04/03 00:13:54ここでベストアンサー

ポイント100pt

つまりは、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();
    });
  });
});
他3件のコメントを見る
id:Cherenkov

回答1に追記しました。ご確認ください。

2013/04/05 00:56:32
id:MrB

何度もご教授ありがとうございます。

形として動くようになりました。助かりました。

今度は、lightboxのloadingの表示箇所がおかしいのと
画像が表示されてもlightboxのloadingが消えないというのが
問題になってますが、そこは自力で何とかしてみます。

2013/04/05 06:43:35
id:MrB

質問者から

MrB2013/04/04 14:15:51

コピペ一発で利用できるものですが、以下でどうでしょうか。
■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>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません