Mettre le lightbox dans le forum phpboost...

Aide générale [Réglé] Mettre le lightbox dans le forum phpboost... Ou autres...

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Le 16/05/2010 à 02h09

Petite question : peut t'on utiliser ce code sur nos news, et sur notre forum, et sur nos pages créer avec le module pages, ce code :

Code HTML :

[html]<p style="text-align:center">
<a href="/upload/sonic_ban.png" rel="lightbox[roadtrip]"><img src="/search/search.png" alt="" /></a>
<br />
<a href="/upload/sonic_ban.png" rel="lightbox[roadtrip]">Pour prévisualiser cliquez !</a></p>
[/html]

Merci de vos réponses

Edité par tony Le 16/05/2010 à 02h10

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

saturnin

Administrateur

Rang

Inscrit le : 08/08/2009 à 22h19

Messages: 3963

Le 16/05/2010 à 12h15

si le lightbox est actif sur ces pages oui.
il faut modifier le tpl pour y intégré le js, (faire collé l'arborescence des répertoires pour les images ..) et normalement c'est bon.

signaturesaturnin

Accroche toi au clavier, je retire le shell...

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 16/05/2010 à 14h05

J'ai pas compris, je peut l'utiliser ou non ? il faut que je face quoi exactement ?

Merci beaucoup.

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

saturnin

Administrateur

Rang

Inscrit le : 08/08/2009 à 22h19

Messages: 3963

Le 16/05/2010 à 14h47

comme il est maquer dans ce fil de discutions le lightbox n'est d'orine que sur la galerie.
le lightbox n'est pas installé sur tous les modules.
pour la 3.1 ce sera dans le kernel donc rappelable sur tout le cms.
a l'heure actuelle il faut copier les répertoire du js ainsi que la modification du template pour que le lightbox soit utilisable.

relis la 1ere page de ce fil pour plus d'info il me semble que il est assé complet.

(il aurais été mieu d'ouvrir ton message plutôt que de poster dans un sujet réglé)

signaturesaturnin

Accroche toi au clavier, je retire le shell...

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 17/05/2010 à 09h38

Tony,

Regarde.. c'est très simple! Voir "Intégrer le Lightbox sur le forum et autres"

ATTENTION

Par contre ON (SaTurNin et moi) ne vous passera pas l'inclusion de la balise en BBcode pour le forum... car il touche aux fichier propre du module et dans se cas autant que l'on sorte un MOD de PBT pour sortir de la Realise...

Donc pas besoin de créer un topic dans ce sens, vous êtes prévenu ^^

Je pose le Tuto dans Les extras PBT pour ne pas avoir à le rechercher plus tard sur le foum.

swan_signature

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 17/05/2010 à 10h10

merci swan ^^

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 17/05/2010 à 10h42

Et ci je mais ce code dans global.css, ce code :

Code CSS :

/* Lightbox*/
#lightbox{position: absolute;left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#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-image: url(data:image/gif;base64,AAAA); /* 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; outline: none;} 
 
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Et celui la dans le header.tpl de mon thème :

Code TPL :

<script type="text/javascript" src="../templates/TON-THEME/modules/forum/images/js/lightbox.js"></script>

Ba normalement le lightbox devrait pas marcher sur touts le site ?

Edit : Sa marche mais je n'est pas le bouton close qui apparait
Merci Edité par tony Le 17/05/2010 à 10h58

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 17/05/2010 à 12h02

As tu transféré l'image, dans le dossier images du template du module forum?

swan_signature

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 17/05/2010 à 12h45

Oui swan, c'est bien elle l'image ? :

mais dans le css sa appelle pas l'image close et aussi l'image loading, sa viens peut être de la le problème ?

Ba regarder, vous aussi il y a pas le close (a moins que c'est mon ordi qui a un problème), la sur cette exemple il y est le close, mais ici (donc le lightbox que vous avez mis en place en BBCode) il y est pas, pourquoi ? on voit bien qu'il y est le lien close puisque quand je clique en bas a droite du lightbox il ce ferme, mais il y a pas l'image closelabel.gif

Merci de votre aide Edité par tony Le 17/05/2010 à 12h55

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 17/05/2010 à 12h57

Oui c'est exact Tony...

Dans "templates/TON-THEME/modules/forum/images/js"

Ouvre le "lightbox.js" et dans ligne 48 change le chemin du closelabel.gif...

Code JAVASCRIPT :

LightboxOptions = Object.extend({
    fileLoadingImage:        'templates/images/loading.gif',     
    fileBottomNavCloseImage: 'templates/images/closelabel.gif',

Et voilà ^^

swan_signature

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 17/05/2010 à 13h06

Donc je mais exactement ces adresse :
templates/images/loading.gif
templates/images/closelabel.gif

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 17/05/2010 à 13h08

Tony va voir Voir "Intégrer le Lightbox sur le forum et autres"

J'ai mis à jour et en plus détaillé

swan_signature

Site web

saturnin

Administrateur

Rang

Inscrit le : 08/08/2009 à 22h19

Messages: 3963

Le 17/05/2010 à 13h11

l'absence d'image sur CsN était due a une erreur après le changement de thèmes.
J'avais pas réédité le JS.

signaturesaturnin

Accroche toi au clavier, je retire le shell...

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 17/05/2010 à 13h59

Il y avait encore un problème avec les liens des images mais c'est réglé, j'ai fait comme sa :
Comme swan a dit de faire :

Code JAVASCRIPT :

LightboxOptions = Object.extend({
    fileLoadingImage:        'templates/TON-THEME/modules/forum/images/loading.gif',     
    fileBottomNavCloseImage: 'templates/TON-THEME/modules/forum/images/closelabel.gif',

Et comme j'ai fait moi, j'ai juste rajouter un / devant les adresses des images est sa marche, j'ai fait comme sa :

Code JAVASCRIPT :

LightboxOptions = Object.extend({
    fileLoadingImage:        '/templates/TON-THEME/modules/forum/images/loading.gif',     
    fileBottomNavCloseImage: '/templates/TON-THEME/modules/forum/images/closelabel.gif',

Merci beaucoup de m'avoir aidé.

Édit : j'aimerai juste que l'image close soit en haut a droite et non en bas a droite (ci possible) ?
Merci ^^ Edité par tony Le 17/05/2010 à 13h59

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 17/05/2010 à 16h57

Sa ne marche pas sur ma page news et je pense savoir pourquoi, enfaite sa ne marche pas cars ma news et dans la div [ouvrir/fermer] donc je pense que c'est sa qui pose problème, et le problème c'est que quand j'ouvre lightbox sur la page news ba elle s'ouvre tout en dessous de mon site (en dessous du footer carrément) mais l'image ne s'ouvre même pas le lightbox reste en chargement, vous en pensez quoi ?

Édit : j'aimerai juste que l'image close soit en haut a droite et non en bas a droite (ci possible) ?

Merci ^^ Edité par tony Le 17/05/2010 à 17h03

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

Les 10 derniers messages du forum...