Jquery Tabs dans Facebox

Marsh Posté le 16-11-2009 à 13:40:42

Bonjour,

J'utilise une facebox (lightbox façon facebook) afin d'agrandir des images et d'afficher du contenu html.

Pour apporter un peu de clarté j'ai installé le jquery tabs ( http://jqueryfordesigners.com/jquery-tabs/ ).

Le script en lui même marche très bien mais lorsque je l'insère dans mon div masqué pour être affiché dans la facebox alors il ne fonctionne plus.

Il me semble pourtant que la facebox supporte l'ajax.

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Tabs</title>
<style type="text/css" media="screen">

</style>

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>

<link href="facebox.css" media="screen" rel="stylesheet" type="text/css"/>

<script src="facebox.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();

$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>

</head>

<body id="page">

<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox();
// On peut aussi personnaliser les images
// de chargement et de fermeture :
$('a[rel*=facebox]').facebox({
loading_image : 'loading.gif',
close_image : 'closelabel.gif'
});
})
</script>

<a href="#test" rel="facebox">Exemple de lien</a>

<div id="test" style="display: none; width: 600px">
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">First</a></li>
<li><a href="#second">Second</a></li>
<li><a href="#third">Third</a></li>
</ul>
<div id="first">
<h2>First</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="second">

<h2>Second</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="third">
<h2>Third</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

</body>
</html>

Me suis-je trompé quelque part, faut-il que je change quelque chose ?

Merci de votre aide smile

Bonne journée,

Emmanuel

Message édité par emmanuel82 le 16-11-2009 à 13:41:34

Marsh Posté le 16-11-2009 à 13:40:42

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *