Votre question

Mootools. problème liens Fx.Elements et slimbox

Tags :
  • Lightbox
  • Programmation
Dernière réponse : dans Programmation
11 Avril 2008 20:39:15

Bonsoir, voila je rencontre un problème, je voudrai utiliser la lightwindow (similaire a la lightbox mais vraiment plus complète), sur le site que je suis en train de programmer.
Toute la navigation consiste à ce que le visiteur est l'impression d'avoir de l'espace. Aussi je ne veux faire apparaître que du texte sur ma page, c'est pourquoi j'ai opter pour la lightwindow.
Cependant, les liens qui permettrons d'accéder aux images sont dans un carrousel (Jcarrousel), et la lightwindow ne s'ouvre pas correctement ou n'affiche même pas l'image... Je pense que c'est à cause de la taille que j'ai donner à mon carrousel (width:800px;height:auto;).

Voila à quoi ça doit ressembler (il y a quelques bugs sous IE à cause des pubs...)
http://stickart.ifrance.com/stickart2008/index2.html

Et en image:


Cliquez sur le premier texte de la seconde colonne (c'est celui ou il y as une image en lien).

J'aimerai pouvoir lancer ma lightwindow qui se trouve dans une liste a puce (du fait du carrousel), sur ma page mère (directement dans body).
Est-ce que c'est possible? Peut être une propriété popup javascript a insérer dans le lien?
Je vous colle mon code en raccourci.

HTML de mon index:
  1. <link rel="shortcut icon" type="image/x-icon" href="" />
  2. <script type="text/javascript" src="jcarousel/lib/jquery-1.2.1.pack.js"></script>
  3. <script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>
  4. <link rel="stylesheet" type="text/css" href="jcarousel/lib/jquery.jcarousel.css" />
  5. <link rel="stylesheet" type="text/css" href="jcarousel/skins/jcarousel/jcarousel.css" />
  6. <script type="text/javascript">
  7.  
  8. jQuery(document).ready(function() {
  9. jQuery('#mycarousel').jcarousel({
  10. horizontal: true,
  11. scroll: 1
  12. });
  13. });
  14. </script>
  15. <script type="text/javascript" src="js/prototype.js"></script>
  16. <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
  17. <script type="text/javascript" src="js/lightbox.js"></script>
  18.  
  19. <script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>
  20. <script type="text/javascript" src="lightwindow/javascript/scriptaculous.js?load=effects"></script>
  21. <script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>
  22. <link rel="stylesheet" href="lightwindow/css/lightwindow.css" type="text/css" media="screen" />
  23. </head>
  24. <body>
  25. <div id="coprs">
  26.  
  27.  
  28.  
  29.  
  30. <div id="mycarousel" class="jcarousel-skin-jcarousel">
  31. <ul>
  32. <li class="colone2">
  33. <a href="work/moi.jpg" class="lightwindow" params="lightwindow_iframe_embed">
  34. <div class="case">
  35. Design has expanded into new fields, including
  36. the interactions between people and objects. Responsive design features objects that
  37. respond to our needs rather than awaiting our instructions.
  38. </div>
  39. </a>
  40. </li>
  41. </ul>


Merci d'avance :) .

Autres pages sur : mootools probleme liens elements slimbox

7 Mai 2008 20:36:23

Désolé tout le monde je me suis tromper, lightwindow fonctionne très bien avec Jcarousel! Ca marche très bien. J'ai retaper mon code entièrement et ça à marché...sinon j'ai un autre problème, c'est qu'aucune galerie popup que je connais n'est compatible avec la librairie Mootools...avec laquelle j'utilise une sorte de menu en accordéon...mais c'est un autre problème. Si vous connaissais des box similaire à la lightbox/ lightwindow/ lytebox, merci de me laisser un petit mot.
Contenus similaires
7 Mai 2008 23:26:04

Décidément je me parle a moi même pour de bon... J'ai trouver une grande partie de la solution: http://planetozh.com/projects/lightbox-clones/
sur ce lien vous trouverez toutes les box, leurs fonction, compatibilité , poids avec tous les liens. Après une journée passé sur google (mal aux yeux) il était temps de trouver...

Je n'ai pas encore tout à fait fini mes péripéties sur internet, puisque je ne sais pour qu'elle raison, ma box charge derrière mon carrousel...
voila bonne nuit.
7 Mai 2008 23:58:50

"resolut" hum...
8 Mai 2008 19:35:12

Oui, j'étais résolut a aller dormir. J'ai encore passer toute la journée a ramer...
Commençons par le commencement:
J'utilise Mootools( voir http://mootools.net/) dans mon site, c'est une librairie java très légère pourvu d'un contenu vraiment intéressant.
L'une des fonction appeler Fx.Element, ou Kwik ( voir http://demos.mootools.net/Fx.Elements) me sert pour une partie non négligeable de mon site web: j'ai fait mon menu avec et "l'entrée du site":
http://stickart.ifrance.com/new/stickart2008/index.html

Tout marche correctement, excepter quand j'insère un lien:
- IE(7) m'inverse les "li", puisque chaque couleur est en fait une balise "li" dans un "ul" vous vous en doutez, lui même dans un div container.
- Quand à firefox, lui il n'inverse rien mais il me rajoute un bar bleu (background du "ul") qui me décale le contenu...

Ensuite, ma slimbox, qui est en fait une lightbox allégé fonctionnant avec mootools s'affiche derrière mon carrousel... sous firefox et safari, bizarrement IE l'affiche normalement.

J'ai besoin d'un peu d'aide...s'il vous plais.
8 Mai 2008 21:15:16

S'il vous plais... c'est urgent, j'ai besoin d'aide.
9 Mai 2008 09:22:18

Je vais tenter de m'expliquer plus clairement, qui sait...
Je rencontre quelques problèmes dans la conception de ma page web.

Je présente tout mon contenu sur une seul et même page (dans l'air du temps?)
et j'utilise le framework ajax mootools.
Sur mes pages (page de "bienvenue" et l'index), j'utilise Fx.Elements pour créer
des menus qui ressemblent à des accordéons.

L'idéal serait que mes pages sous firefox et ie et safari confondu ressemblent
à ça (pris sous safari):



Pour un coup d'œil en direct c'est par la. cliquez ici

La ou les problèmes commencent...
Voici la structure de la seconde page.
- html et javascript.
  1. <link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
  2. <script type="text/javascript" src="java/mootools.svn.js"></script>
  3. <script type="text/javascript" src="java/demos.js"></script>
  4. <script type="text/javascript" src="slimbox/js/slimbox.js"></script>
  5. <script type="text/javascript">
  6. window.addEvent('domready', function(){
  7. var szNormal = 50, szSmall = 60, szFull = 250;
  8.  
  9. var kwicks = $$("#kwicks .kwick");
  10. var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
  11. kwicks.each(function(kwick, i) {
  12. kwick.addEvent("mouseenter", function(event) {
  13. var o = {};
  14. o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
  15. kwicks.each(function(other, j) {
  16. if(i != j) {
  17. var w = other.getStyle("width").toInt();
  18. if(w != szSmall) o[j] = {width: [w, szSmall]};
  19. }
  20. });
  21. fx.start(o);
  22. });
  23. });
  24.  
  25. $("kwicks").addEvent("mouseleave", function(event) {
  26. var o = {};
  27. kwicks.each(function(kwick, i) {
  28. o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
  29. });
  30. fx.start(o);
  31. })
  32.  
  33. });
  34. </script>
  35. </head>
  36. <body>
  37.  
  38. <div id="kwicks_container">
  39. <ul id="kwicks">
  40. <a id="kwick_1" class="kwick" href="index2.html"><li ><span></span></li></a>
  41. <li id="kwick_2" class="kwick"><span></span></li>
  42. <li id="kwick_3" class="kwick"><span></span></li>
  43. <li id="kwick_4" class="kwick"><span></span></li>
  44. <li id="kwick_5" class="kwick"><span></span></li>
  45. <li id="kwick_6" class="kwick"><span></span></li>
  46. <li id="kwick_7" class="kwick"><span></span></li>
  47. <li id="kwick_8" class="kwick"><span></span></li>
  48. <a id="kwick_9" class="kwick" href="http://stickart-blog.blogspot.com" target="_blank"><li ><span></span></li></a>
  49. </ul>
  50. </div>


Voici le CSS
  1. #kwicks_container /**DIV**/
  2. {
  3. overflow:hidden;
  4. width:100%;
  5. min-width:800px;
  6. height:130px;
  7. position:absolute;
  8. top:0px;
  9. left:0px;
  10. padding-left:42px;
  11. background-image:url("ressources/menuBK.gif");
  12. background-position:top left;
  13. background-repeat:no-repeat;
  14. background-color:#619faf;
  15. }
  16.  
  17. #kwicks { /**UL**/
  18. width:800px;
  19. height: 130px;
  20. display:inline;
  21. background-color:none;
  22. position:relative;
  23. top:0px;
  24. }
  25.  
  26. #kwicks .kwick { /**LIi**/
  27. float: left;
  28. display: block;
  29. width: 50px;
  30. height: 130px;
  31. }
  32.  
  33. #kwick_1 {background-image:url("ressources/menu1b.jpg"); background-color: #2c2e2e;}
  34. #kwick_2 {background-image:url("ressources/menu2b.jpg"); background-color: #2e3b3f;}
  35. #kwick_3 {background-image:url("ressources/menu3b.jpg"); background-color: #376471;}
  36. #kwick_4 {background-image:url("ressources/menu4b.jpg"); background-color: #3c7d8e;}
  37. #kwick_5 {background-image:url("ressources/menu5b.jpg"); background-color: #4194ab;}
  38. #kwick_6 {background-image:url("ressources/menu6b.jpg"); background-color: #45aac6;}
  39. #kwick_7 {background-image:url("ressources/menu7b.jpg"); background-color: #49bcdb;}
  40. #kwick_8 {background-image:url("ressources/menu8b.jpg"); background-color: #4bc8ea;}
  41. #kwick_9 {background-image:url("ressources/menu9b.jpg"); background-color: #4cccee;}
  42.  
  43. #kwick .kwick span {
  44. display:none;
  45. }


Dans le code html, mon menu kwick (avec Fx.Elements) comporte 2 liens.
1 sur la première balise li, avec pour cible la même page (pour une actualisation).
Le second sur la dernière balise li.

Firefox affiche alors le menu en décalent le contenu vers le bas, laissant apparaître en haut le background de la balise ul...

Quand je rajoute un lien sur la balise li suivante, le contenu de la balise li concerné ce décale encore un peu plus (ce qui à la fin fait une sorte d'escalier), alors que pour la dernière balise li le lien n'a aucun effet sur la position de balises li. C'est le premier problème.

Ensuite, IE (7) quand à lui ne créer pas de problème de décalage, mais m'inverse la balise li entouré d'un balise <a> avec la balise li antécédente...
On peut l'observer sur la première page, ou la bulle n'apparait pas corectement
et dans le menu de la seconde page.




Peut être que je place mal mes balise <a>? Comment devrais-je les placer?
Dans le code source de l'index de mootools.net, sur lequel est utiliser un menu
kwick, les balises <a> se trouvent à l'intérieur des balises <li>, mais quand je les positionnes de cette manière, plus rien n'est cliquable...

Enfin, le dernier problème sur lequel je me demande ce qui se passe:
puisque j'utilise mootools, j'ai chercher une galerie comme celle de la lightbox
compatible. J'ai trouver Slimbox qui est similaire à lightbox, et qui en plus fonctionne avec les mêmes balises.
Le problème est que sous firefox et safari (pas sous IE bizarrement...), la slimbox s'affiche derrière mon carrousel.


Je vous colle le head de la seconde page, le problème vient peut être de la?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  3. <head>
  4. <title>Sticky's website</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" media="screen" type="text/css" title="sti" href="sti.css"/>
  7. <link rel="shortcut icon" type="image/x-icon" href="" />
  8.  
  9. <script type="text/javascript" src="jcarousel/lib/jquery-1.2.1.pack.js"></script>
  10. <script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>
  11. <link rel="stylesheet" type="text/css" href="jcarousel/lib/jquery.jcarousel.css" />
  12. <link rel="stylesheet" type="text/css" href="jcarousel/skins/jcarousel/jcarousel.css" />
  13. <script type="text/javascript">
  14. jQuery(document).ready(function() {
  15. jQuery('#mycarousel').jcarousel({
  16. horizontal: true,
  17. scroll: 1
  18. });
  19. });
  20. </script>
  21.  
  22. <link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
  23. <script type="text/javascript" src="java/mootools.svn.js"></script>
  24. <script type="text/javascript" src="java/demos.js"></script>
  25. <script type="text/javascript" src="slimbox/js/slimbox.js"></script>
  26. <script type="text/javascript">
  27. window.addEvent('domready', function(){
  28. var szNormal = 50, szSmall = 60, szFull = 250;
  29.  
  30. var kwicks = $$("#kwicks .kwick");
  31. var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
  32. kwicks.each(function(kwick, i) {
  33. kwick.addEvent("mouseenter", function(event) {
  34. var o = {};
  35. o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
  36. kwicks.each(function(other, j) {
  37. if(i != j) {
  38. var w = other.getStyle("width").toInt();
  39. if(w != szSmall) o[j] = {width: [w, szSmall]};
  40. }
  41. });
  42. fx.start(o);
  43. });
  44. });
  45.  
  46. $("kwicks").addEvent("mouseleave", function(event) {
  47. var o = {};
  48. kwicks.each(function(kwick, i) {
  49. o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
  50. });
  51. fx.start(o);
  52. })
  53.  
  54. });
  55. </script>
  56. </head>
  57. <body>


Est ce que ça peut venir du positionnement des différents codes dans <head>?

Désolé pour la longueur de ce post, mais je voulais d'expliquer clairement les problèmes que je rencontre.
Merci d'avance.
9 Mai 2008 12:24:12

Personne ne peut m'aider??? :( 
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS