Votre question

Aide zoombox

Tags :
  • photo
  • Programmation
Dernière réponse : dans Programmation
8 Juin 2011 20:56:14

Bonjour,
alors voila, pour mon projet tut, je voudrais réaliser une zoombox avec des photos. Seulement, problèmes, la zoombox marche mais elle n'est pas affiché au bon endroit. Au lieu d'être au millieu de la page, elle est tout en bas à gauche et en verticale.
De plus, quand je clique sur une autre photos, celle ci apparait mais la zoombox descend dans la page, comme si celle d'avant rester ouverte (sans photo dedans).
Pourriez vous m'aidez s'il vous plait ?

P.S. je me suis aidé de grafikart pour faire ma zoombox.

Autres pages sur : aide zoombox

a c 145 L Programmation
8 Juin 2011 21:01:16

Une url, un code ?
m
0
l
8 Juin 2011 21:02:58

<!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="fr" >
<head>
<title>Réalisation</title>
<link href="realisation.css" type="text/css" rel="stylesheet" media="screen"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jque..."></script>
<script type="text/javascript" src="zoombox/zoombox.js"></script>
<link href="/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">
jQuery(function($){
$('a.zoombox').zoombox({
theme : 'lightbox',

});
});
</script>
</head>
<body>
<div id="back">
<div id="menu">
<ol>
<li><a href="presentation.html">Accueil</a></li>
<li><a href="realisation.html">Réalisation</a></li>
<li><a href="cv.html">CV</a></li>
<li><a href="contact.html">Contact</a></li>
</ol>
</div>
<div id="videos">
<h3>Vidéos</h3>
<p>Mes réalisations vidéoludiques sont aux nombres de trois. Deux d'entres elles présentent une succesion de scènes de films. L'une des deux seulement est términée.</br>
La troisième était une mini bande annonce, pour un film fictif, parodiant "La planète des Singes". Cette vidéo n'a, hélas, jamais était términée.</p>
</div>
<div id="images">
<h3>Images</h3>
<p>Je n'ai que très récement comencé à me servir de photoshop et autre logiciel du même genre, j'ai donc très peu de créations imagée à mon nom.</p>
</div>
<div id="projets">
<h3>Projets</h3>
<p>Je n'ai à mon actif que très peu de réalistions de dossier en groupe, il n'y en a qu'une, c'est mon projet de travaux pratique encadrés, réalisé durant mon année de première. Mon dossier porté sur l'évolution des lycée depuis leurs créations à nos jours, en passant bien évidemment par la période Napoléonienne.</p>
</div>
<div id="sites">
<h3>Sites</h3>
<p>J'ai créé un site, cette année, que je n'ai pas mis sur internet. Mon site présente la solution d'un jeu vidéo de Playstation 3: Uncharted 2</p>
</div>
<div id="aphoto">
<a class="zoombox zgallery1" title="aphoto" href="aphoto.jpeg"><img src="aphoto.jpeg" alt="" /></a>
</div>
   
<div id="classeur">
<a class="zoombox zgallery1" title="classeur" href="classeur.gif"><img src="classeur.gif" alt="" /></a>
</div>
   
<div id="arobase">
<a class="zoombox zgallery1" title="arobase" href="arobase.gif"><img src="arobase.gif" alt="" /></a>
</div>
</div>
</body>
</html>

Et voila le html, je pense que l'erreur est ici car le reste je l'ai prit direct sur le site !
m
0
l
Contenus similaires
a c 145 L Programmation
8 Juin 2011 21:06:34

A mon avis, le souci vient plutôt de la CSS, et merci d'utiliser les balises [ code ] et [ /code ] (sans les espaces) pour rendre plus lisible tes sources.
m
0
l
8 Juin 2011 21:09:39

Dans ce cas voila le code css, vraiment bourrin je trouve, il n'est pas de moi !


  1. /*[fmt]0020-000A-3*/
  2. /*#zoombox iframe, #zoombox image*/
  3. #INVALID-RULE{ border:none;}
  4. #zoombox .mask{ background-color:#000000; position:fixed; width:100%; z-index:90; height:100%; top:0; left:0;}
  5. #zoombox .container{ position:absolute; z-index:100;}
  6. #zoombox .relative{ position:relative;}
  7. #zoombox .prev{ position:absolute; top:0; left:0; width:50%; height:100%; cursor:pointer; /*+opacity:0;*/ filter:alpha(opacity=0); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -moz-opacity:0; opacity:0;}
  8. #zoombox .prev:hover{ /*+opacity:100%;*/ filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity:1; opacity:1;}
  9. #zoombox .next{ position:absolute; top:0; right:0; width:50%; height:100%; /*+opacity:0;*/ filter:alpha(opacity=0); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -moz-opacity:0; opacity:0;}
  10. #zoombox .close, #zoombox .next, #zoombox .prev{ cursor:pointer;}
  11. #zoombox .next:hover{ /*+opacity:100%;*/ filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity:1; opacity:1;}
  12. #zoombox .gallery{ position:absolute; bottom:0; left:0; right:0; text-align:center; /*+opacity:85%;*/ filter:alpha(opacity=85); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85); -moz-opacity:0.85; opacity:0.85; cursor:pointer; width:auto; background-color:#050505;}
  13. #zoombox .gallery img{ height:50px; padding:5px; /*+opacity:50%;*/ filter:alpha(opacity=50); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -moz-opacity:0.5; opacity:0.5;}
  14. #zoombox .gallery img:hover, #zoombox .gallery img.current{ /*+opacity:100%;*/ filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity:1; opacity:1;}
  15. #zoombox_loader{ background:url(img/loader.png) no-repeat left top; position:absolute; height:40px; width:40px; cursor:pointer; top:50%; left:50%; margin:-20px 0 0 -20px; overflow:hidden; z-index:110;}
  16. /** Zoombox Theme **/
  17. .zoombox .container{ background:#000000; color:#666; /*+box-shadow:0px 0px 10px #000000;*/ -moz-box-shadow:0px 0px 10px #000000; -webkit-box-shadow:0px 0px 10px #000000; -o-box-shadow:0px 0px 10px #000000; box-shadow:0px 0px 10px #000000;}
  18. .zoombox .content{}
  19. .zoombox .title{ color:#FFFFFF; /*+placement:anchor-top-left -1px -22px;*/ position:absolute; left:-1px; top:-22px; /*+text-shadow:1px 1px #000000;*/ -moz-text-shadow:1px 1px #000000; -webkit-text-shadow:1px 1px #000000; -o-text-shadow:1px 1px #000000; text-shadow:1px 1px #000000;}
  20. .zoombox .close{ background:url(img/close.png) no-repeat; width:30px; height:30px; /*+placement:anchor-top-right -15px -15px;*/ position:absolute; right:-15px; top:-15px;}
  21. #zoombox.zoombox .next{ background:url(img/next.png) no-repeat right center;}
  22. #zoombox.zoombox .prev{ background:url(img/prev.png) no-repeat left center;}
  23. /** Lightbox Theme **/
  24. .lightbox .container{ background:#FFFFFF; margin-left:-30px; padding:10px 10px 37px; color:#666;}
  25. .lightbox .close{ background:url(img/lightclose.gif) no-repeat left top; width:66px; height:22px; top:auto; /*+placement:anchor-bottom-right 12px 6px;*/ position:absolute; right:12px; bottom:6px;}
  26. .lightbox .title{ text-align:left;}
  27. .lightbox .next{ background:url(img/lightnext.gif) no-repeat right 50px;}
  28. .lightbox .multimedia .next, .lightbox .multimedia .prev{ display:none;}
  29. .lightbox .prev{ background:url(img/lightprev.gif) no-repeat left 50px;}
  30. #zoombox.lightbox .gallery{ left:10px !important; right:10px; bottom:36px;}
  31. /** Pretty Photo Theme **/
  32. .prettyphoto .container{ border:10px solid #0B0A0A; /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; background:#FFFFFF; padding:10px 10px 37px; margin-left:-20px; color:#797979;}
  33. .prettyphoto .title{ text-align:left;}
  34. .prettyphoto .close{ background:url(img/ppsprite.png); width:27px; height:24px; top:auto; /*+placement:anchor-bottom-right 6px 8px;*/ position:absolute; right:6px; bottom:8px;}
  35. .prettyphoto .next{ background:url(img/ppnext.png) no-repeat right center;}
  36. .prettyphoto .prev{ background:url(img/ppprev.png) no-repeat left center;}
  37. .prettyphoto .multimedia .next, .prettyphoto .multimedia .prev{ display:none;}
  38. #zoombox.prettyphoto .gallery{ left:10px !important; right:10px; bottom:36px;}
  39. /** Dark Pretty Photo Theme **/
  40. .darkprettyphoto .container{ /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; background:#0C0C0C; padding:10px 10px 37px; margin-left:-30px; color:#828282;}
  41. .darkprettyphoto .title{ /*[empty]position:;*/ text-align:left;}
  42. .darkprettyphoto .close{ background:url(img/ppsprite.png); width:27px; height:24px; top:auto; /*+placement:anchor-bottom-right 2px 6px;*/ position:absolute; right:2px; bottom:6px;}
  43. .darkprettyphoto .next{ background:url(img/ppnext.png) no-repeat right center;}
  44. .darkprettyphoto .prev{ background:url(img/ppprev.png) no-repeat left center;}
  45. .darkprettyphoto .multimedia .next, .darkprettyphoto .multimedia .prev{ display:none;}
  46. #zoombox.darkprettyphoto .gallery{ left:10px !important; right:10px; bottom:36px;}
  47. /** Simple Theme **/
  48. .simple .container{ background:#000;}
  49. .simple .title{ color:#FFFFFF; /*+placement:anchor-top-left -1px -22px;*/ position:absolute; left:-1px; top:-22px; /*+text-shadow:1px 1px #000000;*/ -moz-text-shadow:1px 1px #000000; -webkit-text-shadow:1px 1px #000000; -o-text-shadow:1px 1px #000000; text-shadow:1px 1px #000000;}
  50. #zoombox.simple .next{ background:url(img/simplenav.png) no-repeat -20px center; /*+opacity:100%;*/ filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity:1; opacity:1; right:-20px; width:20px;}
  51. #zoombox.simple .next:hover{ background-position-x:left;}
  52. #zoombox.simple .prev{ background:url(img/simplenav.png) no-repeat -40px center; /*+opacity:100%;*/ filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity:1; opacity:1; left:-20px; width:20px;}
  53. #zoombox.simple .prev:hover{ background-position-x:-60px;}
  54. .simple .prev{ background:url(img/ppprev.png) no-repeat left center;}
  55. .simple .close{ background:url(img/simpleclose.png) no-repeat; width:30px; height:30px; position:absolute; top:0; right:-10px;}
=> C'est comme sa ?
m
0
l
a c 145 L Programmation
8 Juin 2011 21:25:24

C'est bon pour les balises :) 
Je suis désolé, mais je ne regarderai pas la vidéo (surement très instructive) du tuto sur zoombox, mais j'ai un petit doute sur ton:
  1. <link href="/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />

Le premier "/" dans le href est-il juste ?
m
0
l
8 Juin 2011 21:28:56

C'était bien là l'erreur, je te remercie tu es un vrai pro !! Je ne sais pas ce que j'aurai fais sans toi ! La fin de mon projet tut arrivant très vite je commence a stressé un max !
m
0
l
a c 145 L Programmation
8 Juin 2011 21:42:24

Et c'est la qu'on ne voit plus les petites erreurs :) 
Bon courage pour la suite (et fin heureuse)
m
0
l
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