18041 sujets

Questions générales et questions de débutants

Problème css et le script Lightbox v2 !

Bonjour,

Voilà j'ai un petit souci avec la mise en place du script Livebox, je me casse la tête depuis un petit moment !
Alors je fais appel à vous, voici mon problème.

Lors de l'affichage via Ligntbox de ma photo en grand, le titre en bas de la photo qui est plus un descriptif qu'autre chose sort de la fenêtre du Ligntbox voir de la page ne faisant qu'une ligne.

Je pense que cela peut être corrigé via le fichier css que voici :


#splash_screen {
	top: 0;
	left: 0;
	background-color: #000;
	position: absolute;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	z-index: 1;
	cursor: pointer;
}

#image_content {
	border: 10px solid #FFF;
	background-color: #FFF;
	margin: 0;
	position: absolute;
	z-index: 2;
}

#image_content img {
	margin: 0;
	padding: 0;
	display: none;
	z-index: 3;
	cursor: pointer;
}

#title_content {
	font-size: 11px;
	color: #333;
	border: 10px solid #FFF;
	background-color: #FFF;
	margin: 0;
	padding: 0;
	left: 0;
	z-index: 3;
	position: absolute;
}

#splash_previous, #splash_next {
	margin: 0;
	padding: 0;
	top: 0;
	display: block;
	position: absolute;
	z-index: 4;
	cursor: pointer;
	width: 20px;
	height: 20px;
}
#splash_previous { right: 40px; background: url(control_rewind.png) no-repeat center; }
#splash_next { right: 0; background: url(control_forward.png) no-repeat center; }
#splash_pause { top: 0; right: 20px; background: url(control_stop.png) no-repeat center; }
#splash_play { top: 0; right: 20px; background: url(control_play.png) no-repeat center; }
#splash_notification.playing { background: url(control_play.png) no-repeat center; }
#splash_notification.paused { background: url(control_stop.png) no-repeat center; }
#splash_pause, #splash_play, #splash_notification {
	margin: 0;
	padding: 0;
	display: block;
	position: absolute;
	z-index: 4;
	cursor: pointer;
	width: 20px;
	height: 20px;
}

#splash_close {
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	display: block;
	position: absolute;
	z-index: 4;
	cursor: pointer;
	width: 20px;
	height: 20px;
	background: url(cross.png) no-repeat center #FFF;
}

#splash_description {
	margin-top: 4px;
	font-weight: bold;
}

div.ajax-loading { background: url(ajax-loader-thickbox.gif) no-repeat center; }


fonction d'appel du script lightbox dans mon fichier php :


...
echo '<a href="'.$file_path.'" rel="splash.image[roadtrip]" title="'.$comphoto.'">';
...


Un aperçu du résultat de l'erreur :
http://perso.orange.fr/photosdestef/erreur_lightbox.JPG

Merci d'avance pour votre aide.
Modifié par Chypster (20 Jul 2007 - 17:30)
Bonjour,

Peut-être qu'avec un exemple en ligne ce serait plus simple de te dépanner, ainsi qu'avec des précisions sur la version et/ou framework de la freebox que tu utilises, si tu as modifié le script, les styles, dans quel navigateur tu rencontres ce problème.
Bonjour,

Je rencontre ce problème sur IE et Firefox.
Pour un exemple en ligne tu peux aller là:
le lien
Il suffit de cliquer sur la photo la plus à droite pour constater l'erreur avec une description longue.

Pour info la version que j'utilise du Lightbox est Splash image (Splash par xuxu).

voilà !
Modifié par Chypster (20 Jul 2007 - 21:45)
Salut,

le lien que tu as mis ne marche pas j'ai l'impression.

Le script de Xuan n'a rien à voir avec lightbox.
Modifié par Christian Le Bouler (21 Jul 2007 - 02:52)
Salut,

comme le dit Christian, il ne s'agit pas de Lightbox mais de Splash Smiley smile .

Et si ça se trouve, il suffirait que tu écrives une vraie phrase (avec des espaces !) pour que le commentaire se mette bien sur plusieurs lignes... Tu devrais quand même essayer Smiley cligne !

A+
Bon là, je me sens ridicule oulala...
Oui finalement le fait d'écrire un vrai commentaire résous mon problème.
Merci.

Pour autant, je voudrais éviter ce problème, le descriptif d'une photo dans le splash provient d'un formulaire d'upload ou dans celui ci j'ai un text area, comment faire pour empécher un utilisateur de mettre n'importe quoi comme moi pour l'exemple et ainsi remédier définitivement au problème dans le splash ?
Chypster a écrit :
comment faire pour empécher un utilisateur de mettre n'importe quoi comme moi pour l'exemple et ainsi remédier définitivement au problème dans le splash ?


Il y a deux chose à régler en fait :

1. Gérer les erreurs (c'est à dire les situations qui provoquent un dysfonctionnement du document html lui même)


2. Gérer des comportements fanstaques coté producteurs du texte


Sur le point 1 a priori je n'en voie qu'une en fait, et ce serait le résultat de la présence de doubles quote dans le texte de commentaire. Par rapport à cela un simple :

PHP

<?php
$comphoto=str_replace('"','\'',$comphoto);
?>


Devrait suffire à empêcher le dysfonctionnement complet du document.

Pour le reste je pense que la seule vraie solution c'est de permettre l'édition en ligne du commentaire, ce qui permettrait à l'utilisateur/auteur de corriger ses bévues en ayant vu les conséquences.
a écrit :
Pour le reste je pense que la seule vraie solution c'est de permettre l'édition en ligne du commentaire, ce qui permettrait à l'utilisateur/auteur de corriger ses bévues en ayant vu les conséquences.


Tu veux dire qu'avant même que l'utilisateur ne valide le formulaire d'upload de sa photo, il ait un aperçu de sa photo avec le splash pour voir si dysfonctionnement ou pas et ainsi rectifier son commentaire en connaissance de cause ?
Modifié par Chypster (23 Jul 2007 - 18:01)
Sujet clos
Aller à