jQuery(document).ready() is executed before the image exists in the
DOM.
I tested your above code with the test() function defined as:
function test() {
var image = '<a href="image.gif" rel="facebox"><img src="image.gif"
width="200"
height="200" align="absmiddle" alt="Click for larger picture"></
a>';
//$("#imageDIV").html(image);
//$("#imageDIV > a[rel*=facebox]").facebox();
document.getElementById('imageDIV').innerHTML=image;
}
This displays the image but, as you describe, doesn't use facebox when
you click on it. The reason is that you have to activate facebox on
that link once you have added it to the DOM. Since facebox is
designed to work as a jQuery plugin you really can't give the link an
ID and then make a second call to document.getElementById to call
facebox() to initialize it.
Since you have jQuery loaded anyway the easiest way to handle this is
to just use jQuery for everything. Remove the document.getElementById
line and uncomment the 2 lines above it.
jQuery adds the image string to the imageDIV and then selects just the
anchors in that one DIV to initialize facebox on.
I hope this helps.
-Jon
On May 8, 3:49 am, "paul.roberts" <paul.robe...@riddenpath.co.uk>
wrote:
> I am not sure if you have figured this out but I have a solution that
> is working for me:
> document.getElementById({ELEMENTID}).innerHTML=arrItems[1];
> reInitFacebox(arrItems[{ELEMENTID}]);
> FUNCTION :
> function reInitFacebox(objPass){
> jQuery(document).ready(function($) {
> $('#' + objPass + ' a[rel*=facebox]').facebox()
> })
> If you pass the Element ID through to reInitFacebox({ELEMENTID}) and
> this line $('#' + objPass + ' a[rel*=facebox]').facebox() apparently
> reinitialise that element. Get it wrong and that single element will
> work but all the other elements will reinitialise every time and will
> show multiple times. Play with it abit.
> Let me know how it works.
> On May 7, 7:09 am, raknin <rak...@gmail.com> wrote:
> > Hi,
> > I am using the following code:
> > --- Code start ----
> > <html>
> > <head>
> > <title></title>
> > <script language="javascript" src="js/jquery.js" type="text/
> > javascript"></script>
> > <script language="javascript" src="js/facebox.js" type="text/
> > javascript"></script>
> > <link rel="stylesheet" type="text/css" href="facebox.css"
> > media="screen" />
> > <script language="javascript" type="text/javascript">
> > jQuery(document).ready(function($) {
> > $('a[rel*=facebox]').facebox({
> > loading_image : 'loading.gif',
> > close_image : 'closelabel.gif'
> > })
> > })
> > </script>
> > <script language="javascript" type="text/javascript">
> > function test()
> > {
> > var image = '<a href="image1.jpg" rel="facebox"><img src="image1.jpg"
> > width="200" height="200" align="absmiddle" alt="Click for larger
> > picture"></a>';
> > document.getElementById('imageDIV').innerHTML=image;}
> > </script>
> > </head>
> > <body>
> > <input name="Test" id="Test" type="button" value="Test"
> > onclick="test();">
> > <div id="imageDIV">
> > </div>
> > </body>
> > </html>
> > --- End of code---
> > The problem is that I don't see any box when I click on the image. I
> > am using innerhtml. when I put imag1 statement inside the body it is
> > working fine, any suggestions?
