Prototype Carousel

12 réponses - 6342 vues
Salut, Désolé pour le titre qui n'est pas très explicite ^^
Voila j'ai un problème avec Carousel, c'est à dire que j'ai réussi à afficher plusieurs Carousel sur une même page or le problème que je recontre est le suivant:
J'ai des onglets et a l'interieur de ses onglets j'ai mes Carousel... sur le 1er onglet ton fonctionne correctement... sur le second Carousel est bien présent mais les images ne s'affiche pas pourtant elles sont bien dans le code source :aie:
Je n'ai pas mon code source sous la main car il est sur mon portable mais si quelqu'un avait une solution ou une idée ^^
Merci par avance ;)
Tes onglets tu les gères en javascript? Je pense que sans le code, on va avoir du mail à t'aider :)
Oui ^^ Désolé hier j'étais mort ! enfin bon de toute façon je n'ai pas présenté se projet ^^
Le script n'est pas de moi, je l'ai trouvé sur le net :/ le JS est moi ça fait 2...
Voila le code pour l'init des onglets:
**Code **
``// Dйfinition d'un onglet
var Tab = Class.create();
Tab.prototype =
{
// Initialisation
initialize : function (id, tab_id, panel_id, parent)
{
// On enregistre les objets liйs (onglet, paneau, Tabpanel parent)
this . tab = $(tab_id);
this . panel = $(panel_id);
this . parent = parent;
this . id = id;


// Par dйfaut, la souris ne le survolle pas
this . hovering = false;

// On change la classe de l'onglet
this . change_class(this . tab . className, this . tab . className);


this . tab . onclick = function(e)
{
parent . active_tab (id);
};
},


// Changement de classe
change_class : function (c, hc)
{
// On enregistre un nouvel йvйnnement de sortie de la souris
this . tab . onmouseover = function(e)
{
this . className = hc;
};
this . tab . onmouseout = function(e)
{
this . className = c;
};


// Si la souris n'est pas dessus en ce moment, on exйcute cet йvйnnement
if (this . hovering)
this . tab . onmouseover(0);
else
this . tab . onmouseout(0);
},


// Changement d'affichage
change_display : function (d)
{
this . panel . style . display = d;
}
}
// Dйfinition d'un panneau а onglet
var Tabpanel = Class.create();
Tabpanel.prototype =
{

// Initialisation
initialize : function (tabs, active_id, active_class, active_hover, unactive_class, unactive_hover, display_on, display_off)
{
this . tabs = new Array();

this . active_id = -1;


for (var i = 0; i<tabs.length; i++)
{
this . add_tab (i, tabs[i].tab, tabs[i].panel);
}


this . active_id = active_id;

this . set_class_unactive ( unactive_class, unactive_hover );
this . set_class_active ( active_class, active_hover );
this . set_class_display ( display_on, display_off );
//active_tab(active_id);
},


// Ajout d'un onglet
add_tab : function (id, tab_id, panel_id)
{
this . tabs[ this . tabs.length] = new Tab(id, tab_id, panel_id, this);
},

// Changement de classe d'un onglet
change_class : function (i, c, hc)
{
if (i >= 0)
{
this . tabs[i] . change_class (c, hc);
}
},


// Changement de classe d'un onglet
change_display : function (i, d)
{
if (i >= 0)
{
this . tabs[i] . change_display (d);
}
},


// Changement de la classe inactive
set_class_unactive : function (c, hc)
{
this . unactive_class = c;
this . unactive_hover = hc;
for (var i=0; i<this . tabs.length; i++)
{
if (i != this . active_id)
{
this . change_class(i, c, hc);
}
}
},


// Changement de la classe active
set_class_active : function (c, hc)
{
this . active_class = c;
this . active_hover = hc;
this . change_class (this . active_id, c, hc);
},


// Changement de la classe inactive
set_class_display : function (don, doff)
{
this . display_on = don;
this . display_off = doff;

for (var i=0; i<this . tabs.length; i++)
{
this . change_display(i, i == this . active_id ? don : doff);
}
},


// Activation d'un onglet
active_tab : function (active_id)
{
this . change_class (this . active_id, this . unactive_class, this . unactive_hover);
this . change_display(this . active_id, this . display_off);

this . active_id = active_id;


this . change_class (this . active_id, this . active_class, this . active_hover);
this . change_display(this . active_id, this . display_on);
}
}``
Voila le code js pour les onglets:
**Code **
``var tab_droite = new Tabpanel(
[{tab:'site_tab',panel:'site_panel'} , {tab:'graph_tab',panel:'graph_panel'} , {tab:'autres_tab',panel:'autres_panel'}],
0,
'tab_active', 'tab_active_hover','tab_inactive','tab_inactive_hover',
'table', 'none'
);``
Voila mon code html, je me sert de phpBB
**Code **
``<table class="bodyline_tab_ctrl" border="0" cellspacing="0" cellpadding="5" align="center" width="100%" summary="Header 2">

<tr>
<td align="left" class="tab_active" id="site_tab"><p><b>Onglet 1</b></p></td>

<td align="left" class="tab_inactive" id="graph_tab"><p><b>Onglet 2</b></p></td>

<td align="left" class="tab_inactive" id="autres_tab"><p><b>Onglet 3</b></p></td>

</tr>
</table>


<table class="bodyline_tab_panel" border="0" cellspacing="0" cellpadding="11" width="100%" align="center" style="display:table;height: 380px" id="site_panel" summary="Site Web">

<tr>
<td width="100%" align="left"><img src="images/spacer.gif" alt="" title="" width="100%" height="10" /></td>

</tr>
<tr>
<td width="100%" align="left" valign="top">

<!-- BEGIN site -->
{site.DISPLAY}
<!-- END site -->

</td>
</tr>
</table>


<table class="bodyline_tab_panel" border="0" cellspacing="0" cellpadding="11" width="100%" align="center" style="display:none;height: 380px" id="graph_panel" summary="Graphisme">

<tr>
<td width="100%" align="left"><img src="images/spacer.gif" alt="" title="" width="100%" height="2" /></td>

</tr>
<tr>
<td width="100%" align="left" valign="top">

<p class="text">Type</p>
</td>

</tr>
</table>


<table class="bodyline_tab_panel" border="0" cellspacing="0" cellpadding="11" width="100%" align="center" style="display:none;height: 380px" id="autres_panel" summary="Autres">

<tr>
<td width="100%" align="left"><img src="images/spacer.gif" alt="" title="" width="100%" height="2" /></td>

</tr>
<tr>
<td width="100%" align="left" valign="top">

<p class="text">Projet</p>

</td>

</tr>
</table>``DISPLAY est une l'init de carousel dans un boucle afin de pouvoir en génere plusieurs sur la même page :)
J'ai pas épluché tous le code JS. Si t'utilises Firefox installe Firebug et regarde dans l'onglet "Net" si les images dont tu parles sont bien chargés ou retourne un bon 404
Salut, Les images sont bien chargées j'ai pas d'erreur 404 :/
Grumbl, je pense que t'as perdu quelques cheveux à essayer de comprendre ? :D T'as un accès en ligne ? (envoie par mp au pire)
euh na c'est en local désolé mais je vais trouver comment faire ^^ Oui j'en ai perdu pas mal :| mais comme ça j'aurai pas besoin d'aller chez le coiffeur xD
up :aie:
Un petit up ^^
Demain soir j'me lance :D (noté sur l'agenda lol)

(12 résultats)


Catégories


Tags


Liens