Bonjour à tous,
Je suis graphiste.
En revanche, je suis une bille en développement web. Mais c'est en faisant que j'apprends.
Je bosse sur mon site web.
J'avais besoin d'une lightbox et à force de recherche et d'essai, j'ai utilisé celle de Beladom qui se lance à partir
d'un flash.
C'est du beau boulot. Ça marche impec après essai sur une page vierge en ayant modifier au préalable quelque petite chose comme le fichier flash et le code html.
Je viens de faire l'essai sur mon propre site en mettant le tout sur mon serveur...et là j'ai un problème.
La "vignette flash" qui appelle la lightbox marche mais elle positionnée par défaut en haut à droite de la page. Page d'ailleurs bien plus large que la mienne qui est de : H :1300 L:1024 (je ne suis pas en pourcentage mais en pixels.
Si je veux modifier son positionnement, est-ce le css de la lightbox qui est concerné ou bien la partie body de la page html?
Je comprends que je pose une question de gros débutant qui pourra énerver certaines personnes mais j'ai vraiment besoin de votre aide sur ce coup.
A toutes fins, je vous communique le code css et de la page htlm de la lightbox.
Sauf erreur de ma part, le fichier flash qui appelle la lightbox s'appelle ("img1)
Merci d'avance à ceux qui pourront m'aider.
Code HTML :
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%
}
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}Code HTML :
<!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" lang="en">
<head>
<!--
Développé par BELADOM - Webmaster, Webdesigner, Développeur web - www.beladom.fr
Pour plus de trucs, astuces, bons plans webmastering, rendez vous sur BELABLOG - www.beladom.fr/blog
-->
<title>Lancement d'une gallery lightbox à partir d'un Flash</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox++.js" type="text/javascript"></script>
<script type="text/javascript">
function GroupDelegate(id) {
var objLink = document.getElementById(id);
Lightbox.prototype.start(objLink);
}
</script>
</head>
<body>
<a id="img1" title="Titre première image" rel="lightbox[img]" href="images/image-1.jpg"></a>
<a id="Retouches d'image" title="Retouches d'image" rel="lightbox[img]" href="images/Retouches d'image.jpg"></a>
<a id="Magazine" title="Magazine" rel="lightbox[img]" href="images/Magazine.jpg"></a>
<a id="carte de visite1" title="carte de visite1" rel="lightbox[img]" href="images/carte de visite1.jpg"></a>
<a id="grand" title="Affiche" rel="lightbox[img]" href="images/grand.jpg"></a>
<a id="Flyer concert" title="Flyer concert" rel="lightbox[img]" href="images/Flyer concert.jpg"></a>
<a id="Flyer discotheque" title="Flyer discothèque" rel="lightbox[img]" href="images/Flyer discotheque.jpg"></a>
<a id="Menu restaurant" title="Menu restaurant" rel="lightbox[img]" href="images/Menu restaurant.jpg"></a>
<a id="Photomontage realise pour la Mairie de Sens" title="Photomontage réalisé pour la Mairie de Sens" rel="lightbox[img]" href="images/Photomontage realise pour la Mairie de Sens.jpg"></a>
<a id="Trucage Photoshop" title="Trucage Photoshop" rel="lightbox[img]" href="images/Trucage Photoshop.jpg"></a>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="338">
<param name="movie" value="gallery.swf" />
<param name="quality" value="high" />
<param name="allowscriptaccess" value="samedomain">
<param name="wmode" value="transparent">
<param name="swfversion" value="6.0.65.0" />
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="gallery.swf" width="450" height="338">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="allowscriptaccess" value="samedomain">
<param name="wmode" value="transparent">
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>