Face box doesn't work with INNER HTML any suggestions

raknin

unread,

May 7, 2008, 2:09:29 AM5/7/08

to facebox

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?

Chris Wanstrath

unread,

May 7, 2008, 3:05:33 PM5/7/08

to fac...@googlegroups.com

Use the LiveQuery plugin to maintain behaviors across Dom manipulations.

You can't attach behavior to an anchor tag that only exists in a string.

- Chris

--
Chris Wanstrath
http://github.com/defunkt

paul.roberts

unread,

May 8, 2008, 3:49:45 AM5/8/08

to facebox

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.

Jon

unread,

May 8, 2008, 3:02:45 PM5/8/08

to facebox

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:

Reply all

Reply to author

Forward