Intégrer script dans page

Thibaut · février 2007

Salut à tous,
voila, je suis en train d'adapter un script pour ouvrir les images dans une pop-up en javascript.
J'aimerais qu'à chaque article créé, ce code soit automatiquement inséré dans la page :

<link rel="stylesheet" href="../claveille/pluxml/lib/lightbox.css" type="text/css" media="screen" />
<script src="../claveille/pluxml/lib/prototype.js" type="text/javascript"></script>
<script src="../claveille/pluxml/lib/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="../claveille/pluxml/lib/lightbox.js" type="text/javascript"></script>

Malheureusement, je ne sais pas ce que je dois modifier et dans quelle page.

Merci d'avance à ceux qui pourront m'aider

Thibaut

Gzyg · février 2007

En le plaçant dans le header du fichier template.php ?

à plus,

Gzyg

Thibaut · février 2007

C'est parfait, ca marche parfaitement.

J'ai encore une petite question. Quand j'insère une image, je vais avoir le lien sous cette forme : "<img src="images/nom_de_limage.jpg" alt="" />"

Et moi je voudrais avoir ca : "<a href="images/nom_de_limage.jpg" rel="lightbox"><img src="images/nom_de_limage.jpg" width="" height="" alt="" border="0" /></a>"

Je crois qu'il faut que je modifie le fichier "image.php", mais je m'embrouille un peu dans la fin du code

Merci encore pour votre aide

Thibaut

Ps : je suis sur Pluxml Classique

Ali · février 2007

Je vous pose une question :

Comment avez-vous mis Litebox, est-ce uniquement des fichiers js à ajouter dans le dossier ?

Merci.

Si vous pouvez m'envoyer une archive.

Gzyg · février 2007

Thibaut a écrit:

Je crois qu'il faut que je modifie le fichier "image.php"

Regarde plutôt le fichier lib/functions.js à la fin dans textarea.value ...

à plus,

Gzyg

<edit>
Ali, jette un oeil sur cette page.
</edit>

Thibaut · février 2007

Merci beaucoup Gzyg, c'était bien dans le fichier "lib/functions.js"

@micalement

Thibaut

Ali · février 2007

je relance...

Comment faire le même script litebox mais avec les miniature de la bêta 2...

J'ai beau cherché, je ne trouve pas comment faire

<a href="+src+" alt="" rel="lightbox"><img src="+src+.tb"></a>

( .tb = minature )

Diti · février 2007

J'en sais rien, mais la balise <img /> n'est pas fermée et le alt est dans le <a>

Thibaut · février 2007

Bah moi en fait, sur la version normal (pas blog), je gardais mon image taille réelle que je redimensionnais avec les atributs "width" et "height".

Si vous réussissez à trouver avec les miniatures, je suis preneur

@ bientôt

Thibaut

elody · mars 2007

Suite a la découverte du blog de Gcyrillus http://blog.re7net.com/index.php?4-maj-et-fonctionnalites , j'ai découvert qu'il avait réussi a intégrer cet excellent plugin de pop up d'image DANS le popup d'upload d'image de Pluxml !
Je propose de le soudoyer pour qu'il nous livre son secret sur l'intégration de lightbox dans l'admin de Pluxml

Cyrille, si tu nous lis, ai pitié de nous

Diti · mars 2007

Personnellement, je trouve que c'est un artifice, et je vous raconte pas comment c'est chiant de devoir attendre que la fenêtre Lightbox s'ouvre pour voir l'image, et c'est aussi chiant de devoir cliquer sur une partie de l'image pour la fermer au lieu de faire « Précédente ». C'est totalement non-accessible, dans le sens où ça s'apparente à une pop-up.

Comptez pas sur moi pour visiter vos sites si vous utilisez cette technique

elody · mars 2007

Et un pop-up d'image classique tu le fermes comment alors ? pas en tappant sur précédente a mon avis

Pour un besoin spécifique genre galerie de photos où on a besoin d'ouvrir une image version taille maxi ds un pop-up, je trouve cela parfaitement concluant : pas d'ouverture de pop-up ki passera en arriere plan si l'utilisateur clique a coté, et surtout pas de fenetre inesthétique, mais le site en arriere-plan qui s'assombrit, c tout une ambiance qui se dégage !
Le seul point a revoir et modifiable j'imagine, c de cliquer sur l'image et non sur un lien en bas a droite pour fermer, bcp plus pratique et intuitif

De plus la gestion dans l'admin apporte un gain de temps et une facilité d'usage qui permet de mettre cette fonctionnalité à la portée de tous, au contraire d'autres alternatives manuelles ...

Bref, pas grave si tu ne visites pas mon blogalerie, mais ne prive pas les autres lol

PS :
Jé précise que pour moi il n'y a pratiquement pas eu d'attente pour loader l'image (je roule en 2mb seulement), certainement pas plus qu'avec un popup traditionnel, donc je ne vois pas le souci de ce coté non plus ...

gcyrillus · mars 2007

hmmm , ce n'est pas chiant ni une popup , il s'agit d'un lien enturant l'image de miniature vers l'image non reduite (fonction deja presente dans pluxml a l'upload , la miniature et l'image en taille "normale sont donc presente.)

Dans le cas ou javascript est activé , alors le lien ne même pas vers l'image , mais l'affiche dans la page elle même a l'aide de css , (position absolute + un grain de js pour la centrée) .

Ce script est tres bien fait et n'a pas de succés par hasard.

Maintenant si l'image met 2 plombes a chargée , a charge au webmaster de s'adapté au besoin du web et de ne pas balancé des images trop grosse , ça ne sert a rien d'ailleurs , la qualité et la taille d'affichage limite la qualité possible du rendu .

pour integré alors le script lightbox et son lien :

(je reprend mon organisation habituelle)

Créer un repertoire plugins.

Y mettre les fichiers suivants :
lightbox.css et lightbox.js (au besoin relooké votre css et francisé le "press x to close ").

dans le fichier template.php :

<link rel="stylesheet" href="core/plugins/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="core/plugins/lightbox.js"></script>

attention au chemin , il est a indiqué a partir du fichier index.php de votre version de pluxml .

et enfin pour integré le lien en mode "insertion d'image" il nous faut un js supplementaire et un lien dans la popup "upload image" de l'admin pour automatisé tout ça.

Le lien a ajouté :

// supplement lightbox
echo '<a style="color:#F28E5A;font-weight:bold;" href="#" onclick="opener.insimglightbox(\''.str_replace('../', '',$a_images[$i]).'\')">Ajouter en lightbox</a> | ';
//fin supplement lighbox

entre ajout de miniature et supprimer (par exemple)

.Pour le js supplementaire ajouté au fichier function.js

//////////////////////////////////////////////////////////
// insertion lightbox

function insimglightbox(src) {

msg="Donnez une bréve description de l'image.";
des="description";
text1='<a href="'+src+'" rel="lightbox" title="'+prompt(msg,des)+'"><img src="'+src+'.tb" alt="miniature" /></a>';
text2=''; //laisser vide
if(!tt){ // initialisation
tt=document.getElementsByName('contenu');
moz=tt.selectionStart || tt.selectionStart == 0 ? 1 : 0; // Moz 1.6+, Firefox
ie= document.selection ? 1 : 0; // IEWin, Opéra
}
tt.focus();
// sélection de texte :
txt = moz ? tt.value.substring(tt.selectionStart, tt.selectionEnd):
ie ? document.selection.createRange().text: '';

if (ie) {
var sel=document.selection.createRange();
//remplace le contenu du textarea
sel.text = text1 + txt + text2
sel.select(); //place le curseur juste après text2
}

else if (moz) {
debut = tt.value.substring(0,tt.selectionStart);
fin = tt.value.substring(tt.selectionEnd, tt.value.length);
contenuScrollTop=tt.scrollTop; //sauve le scroll
//remplace le contenu du textarea
tt.value = debut + text1 + txt + text2 + fin;
//place le curseur comme IE
tt.selectionEnd=tt.selectionStart=(debut + text1 + txt + text2 ).length;
//empèche le scroll
tt.scrollTop=contenuScrollTop;
}

else { // anciens navigateurs, curseur à la fin de la fenêtre d'édition
tt.value=tt.value + text1 + text2;
}
text=tt.value;

}

voila , vous devriez avoir integré le script lightbox a votre pluxml et automatisé son utilisation.

@diti , me dit pas juste que ce n'est pas valide , pointe sur les erreurs plutot , ce script a beaucoup de "fan" ... et quasiment chaque cms le retrouve en plugin ... et franchement , je le trouve de bonne qualité.

++

Diti · mars 2007

Salut,

Pour l'attente, c'est dû au fait que je parlais du script Lightbox 2 et non pas de la version de Gcyrillus, la première.

Ensuite, si tu regardes bien, tu verras que les meilleurs scripts de galerie d'images ('faut que je retrouve celui que j'ai utilisé, très bien fait) ouvrent les images dans la même fenêtre, comme Pixml par exemple.

elody · mars 2007

tu es trop bon ^^ - et surtout trop réactif lol
Je test cela de suite

Et ma propo de te rendre service tient tjrs

Diti a écrit:

Ensuite, si tu regardes bien, tu verras que les meilleurs scripts de galerie d'images ('faut que je retrouve celui que j'ai utilisé, très bien fait) ouvrent les images dans la même fenêtre, comme Pixml par exemple.

Personnellement je préfere la solution du popup intégré au site qui s'ouvre SANS RUPTURE ni chargement de page, c tellement plus élégant

C une question de gout et de besoin apres !

Merci donc Cyrille

gcyrillus · mars 2007

oui , plixml nous l'attendons tous aussi avec impatience

.

Je crois que l'on ne pourra pas empecher les uns et les autres a vouloir "en ajouter" .

En tout cas pluxml , est deja tres bien tel quel , on y trouve l'essentiel.

elody · mars 2007

Je viens de tester l'install, qui se fait sans difficulté, a part qu'il faudrait préciser le fichier a éditer pour inclure le lien "Ajouter en Lightbox", il s'agit de images.php ds le repertoire /admin, mais il y aun bug au moment de l'ajout en Lightbox :

Apres avoir cliqué sur le lien "Ajouter en Lightbox", j'ai bien une petite fenetre me demandant de donner une breve description, mais apres avoir rempli et cliquer sur OK, rien ne se passe, et IE7 donne le message d'erreur suivant :

Erreur ligne 43, caractere 5, "tt" est indéfini, code 0, et la page incriminée est admin/article.php ..... où ne se trouve pas de "tt" biensur , mais le code "include('top.php');" (à la ligne 43).

[...]
EDIT :
Je viens de repérer "tt" dans le fichier "lib/function.js", si ça peut aider à comprendre ...
[...]

J'ai bien refais 2 ou 3 fois les étapes d'install et je pense n'avoir rien loupé, par contre je viens de voir sur ton site que tu as installé lightbox sur une version floppalamyte 14, et moi je teste actuellement la version la plus récente à savoir la 15 !
Certainement qques modifs ont été apportées qque part mais cela sort de mes compétences :-(

Merci de m'aider ds ce débuggage ^^

gcyrillus · mars 2007

bonjour , non tt est le contenu de l'element dans lequel est inserer le code html generé .

en principe le textarea principale qui est dénommé comme ceci : name="contenu" avec cette ligne dans le code js :

tt=document.getElementsByName('contenu');

je dois m'absente , je repasserais dans la soirée vers 22heures.

j'ai peut-etre omis un truc au copier/coller , ou le forum m'a zappé un caractere ou deux .

Je vais voir a preparer un petit zip pour simplifier les choses pour tout le monde .

++

<edit>

un zip avec les fichiers (modifiés) a modifié. (flop 14)

http://gcyrillus.free.fr/decoupe-fr/pluxml/plux2-lightbox.zip

Si vous n'etes pas sur de la version de votre pluxml blog faites les modifications sur vos propres fichiers (n'oubliez pas de commencer par vous faire une copie de vos fichiers avant de les modifiés).

Ceci dit les modif ne sont que de l'ajout de code en "echo" et du "js " , cela devrait donc fonctionné sur un bon nombre de version de pluxml blog aussi longtemps que l'interface de l'edition des articles et la popup pour les images ne sont pas remis en questions.

GC

elody · mars 2007

Eh bien de mon coté avec la flop15 ca ne marche tjrs pas :-(
Mais bon, j'ai fini par me résoudre à installer LightBox a la main en rajoutant le rel="lightbox" ds chaque lien et finalement ce nest pas si dur ^^
J'ai suivi les instructions d'install sur : http://www.huddletogether.com/projects/lightbox/

Merci qd meme Cyrille pour ton aide, si ca se trouve jai du trop bidouiller mon Pluxml et ca ne marche pas juste chez moi

Si qqun veut bien tester avec la flop 15 sur un pluxml fraichement installé, quil nous laisse son témoignage ca m'interesse qd meme ^^

dosch · mars 2007

j'essais aussi d'installer lightbox, je suis avec pluxml classic, et je l'insert à la main. Mais voilà ce que j'obtiens
Not Found

The requested URL /pluxml/images/3eb619100c9ebaff_vvvkatwijkazee_600.jpg rel= was not found on this server.

rel not found.
j'ai mis les chemins des liens (scripts et css) depuis l'index.php, dans mon template.php.

est-ce que quelqu'un peut m'aider?
merci

gcyrillus · mars 2007

bonjour,

le repertoire et l'image existent-ils bien ?

Le chemin doit-etre indiqué a partir de l'endroit ou se trouve le fichier index.php (si besoin remonter d'un repertoire : ../pluxml/ ) ou en absolu (url complete).

Le fichier n'est pas trouvé , ou l'url est mauvaise , ou le nom est mal "ecrit" , ou il n'est pas present.

GC

Intégrer script dans page

Réponses