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