PC SOFT

FORUMS PROFESSIONNELS
WINDEV, WEBDEV et WINDEV Mobile

|
|
|
FR
Accueil → WEBDEV 2025 → ZR et effet lightbox
ZR et effet lightbox
Débuté par seve_scd, 25 oct. 2007 16:58 - 23 réponses
#1
Posté le 25 octobre 2007 - 16:58
Salut,
je voudrais afficher des photos dans une zonne répétée , et les ouvrir avec l'effet lightbox.
Je ne sais pas si c'est possible, je ne vois pas comment mettre mon code HTML ?

J'ai une ligne de ce style et je ne vois pas comment l'intégrer :
<a href="photo1.jpg" rel="lightbox"></a>

Quelqu'un a déjà fait ce genre d'effet ?

Merci
Signaler
0
0
#2
Posté le 26 octobre 2007 - 10:47
Séverine a présenté l'énoncé suivant :
Salut,
je voudrais afficher des photos dans une zonne répétée , et les ouvrir avec
l'effet lightbox. Je ne sais pas si c'est possible, je ne vois pas comment
mettre mon code HTML ?

J'ai une ligne de ce style et je ne vois pas comment l'intégrer :
<a href="photo1.jpg" rel="lightbox"></a>

Quelqu'un a déjà fait ce genre d'effet ?

Merci


c'est quoi l'effet lightbox ?
une url de démo ?

--
Eric Roumégou
Webmaster des wtablettes
Signaler
0
0
#3
Posté le 26 octobre 2007 - 11:36
Salut,
Lightbox c'est à cette adresse : http://www.huddletogether.com/projects/lightbox2/

A mon avis, la solution est d'insérer tes images ou tes liens dans un champ HTML dans la zone répétée.

C'est la seule solution avec webdev pour arriver à mettre l'attribut "rel" sur un lien.
Ce qui est indispensable pour faire fonctionner lightbox.
Signaler
0
0
#4
Posté le 26 octobre 2007 - 13:24
Je sais pas si je m'y suis mal prise mais j'ai pas réussi à faire fonctionner mes champs HTML dans ma zone répétée.
Disons que si, ça marche à moitié !! Ma photo s'ouvre bien mais sans l'effet.
Par contre si je met exactement le même champ HTML mais pas dans une zone répétée, j'ai l'effet !!

Ahahaha, est-ce donc impossible de faire du beau avec une ZR ??
Signaler
0
0
#5
Posté le 26 octobre 2007 - 14:05
J'ai également essayé de mettre cet effet dans un champ HTML, les boutons fermer, suivant, précédents n'apparaissent pas.
Une idée?
Signaler
0
0
#6
Posté le 26 octobre 2007 - 19:03
J'ai le même problème.
J'ai modifié le fichier qui fait appel à ces images, j'ai essayé de les coller partout , et impossible de les faire apparaitre !!!
Il doit pourtant bien y avoir un moyen !
Je cherche encore...
Signaler
0
0
#7
Posté le 26 octobre 2007 - 19:34
Il se trouve que Séverine a formulé :
J'ai le même problème.
J'ai modifié le fichier qui fait appel à ces images, j'ai essayé de les coller partout , et impossible de
les faire apparaitre !!! Il doit pourtant bien y avoir un moyen !
Je cherche encore...


Courage, voilà une belle WTablette qui se profile ;o)
Signaler
0
0
#8
Posté le 26 octobre 2007 - 21:21
J ai trouvé, il faut mettre ce code a l entete ds le page
<script type="text/javascript"><!--
var fileLoadingImage = '

';
var fileBottomNavCloseImage = '

';
var resizeSpeed = 7;
var borderSize = 10;
var animate = true;
var overlayOpacity = 0.8;
//--></script>

en changeant l adresse des images of course
Signaler
0
0
#9
Posté le 27 octobre 2007 - 18:02
PEtite précision ca marche pour une image simple ou plusieurs, je n ai pas testé pour une image issue d une base de donnée qu il faudrait ouvrir dans une ZR.
Séverine si tu as essayé et que ca marche je suis preneur :-)
Signaler
0
0
#10
Posté le 27 octobre 2007 - 21:26
Philippe I. a pensé très fort :
Salut,
Lightbox c'est à cette adresse :
http://www.huddletogether.com/projects/lightbox2/

A mon avis, la solution est d'insérer tes images ou tes liens dans un champ
HTML dans la zone répétée.

C'est la seule solution avec webdev pour arriver à mettre l'attribut "rel"
sur un lien. Ce qui est indispensable pour faire fonctionner lightbox.


ah tiens j'avais vu ça sur un site et ça me plaisait bien ... mème
qu'on me le réclamait.
Merci de l'adresse .
Pas le temps de m'y mettre, mais je l'aurais, un jour je l'aurais !!!

Pour l'idée de la wtablette, je confirme : ce serait une bonne idée, je
suis preneur.

--
Eric Roumégou
Webmaster des wtablettes
Signaler
0
0
#11
Posté le 29 octobre 2007 - 19:57
J'ai créé un projet test si ca interesse quelqu un en différenciant le fait qu on ait une simple image ou une image issue d'une base de données que l on affiche dans une ZR.
Pour une image simple ca fonctionne.
Pour une image dans une ZR ca fonctionne.......presque.
Pour 2 enregistrements différents ma ZR m'affiche la meme image.
Signaler
0
0
#12
Posté le 29 octobre 2007 - 20:12
Nicolas C. avait soumis l'idée :
J'ai créé un projet test si ca interesse quelqu un en différenciant le fait qu on ait une simple image ou
une image issue d'une base de données que l on affiche dans une ZR. Pour une image simple ca fonctionne.
Pour une image dans une ZR ca fonctionne.......presque.
Pour 2 enregistrements différents ma ZR m'affiche la meme image.


Bonjour,

Je pense que ton projet intéressera beaucoup de monde.
En tout cas, je suis très intéressé.
Mon mail: forums@netdev.fr

Le problème rencontré dans la ZR n'est-il pas du aux dysfonctionnements déjà relevés dans
l'affichage des images dans les ZR ajax ?

Cordialement
Signaler
0
0
#13
Posté le 30 octobre 2007 - 09:59
Bonjour,

Pourquoi ne pas créer une Wtablette avec ton projet comme ça tous ceux qui seront intéressés dans le futur pourront le trouver.

Carole
Signaler
0
0
#14
Posté le 30 octobre 2007 - 11:15
J'aimerai créer une wtablette lorsque le projet fonctionnera vraiment. La dans les ZR il y a un souci, ajax ou pas ajax.
Signaler
0
0
#15
Posté le 07 novembre 2007 - 11:36
Désolée de ne revenir que tardivement dans la discussion, mais en fait je suis passée à autre chose plus urgent et j'ai pas eu le temps de me repencher sur le problème.
Mais étant en train de développer une galerie photo, si quelqu'un a trouvé une solution dans une ZR je suis preneuse !!!
Signaler
0
0
#16
Posté le 30 octobre 2008 - 13:08
Je me permet de remettre cette discussion au gout du jour, car je souhaite également utiliser ce script.

Je n'ai malheureusement pas réussi à le mettre en place. D'une part parce que mon projet est multi-langue, et qu'il n'est pas en sans contexte (à savoir qu'il est dynamique mais pas en awp...). Donc rien que pour afficher une image en spécifiant son chemin avec un champ HTML, je n'ai pas réussi o.O

Donc après maintes essais, je me suis résolu à passer temporairement une page en awp, afin de faire mes tests. Maintenant quand j'utilise :

<a href="Logo.jpg" rel="lightbox" title="Essai"><img src="Logo_Petit.jpg" width="40" height="40"></img></a>

mon image s'affiche sans problème, mais quand je clique sur mon image, c'est l'image qui s'affiche, et non pas la lightbox...

C'est à devenir chèvre...
Signaler
0
0
#17
Posté le 30 octobre 2008 - 14:53
Bonjour Thibault,

J'ai réalisé deux exemples en WebDev sur Lightbox. Tu peux les tester en ligne et télécharger les projets WebDev correspondant.

http://megusta.webdevtest.com/WD120AWP/WD120Awp.exe/CONNECT/FlashLightBox
http://megusta.webdevtest.com/WD120AWP/WD120Awp.exe/CONNECT/Slimbox

C'est en anglais parce que sur le moment, la question venait du forum US.
http://forum.pcsoft.fr/thread.awp…

--
bon courage
pat
http://aaa.windev.free.fr
Signaler
0
0
#18
Posté le 30 octobre 2008 - 16:47
Oui excellent projet pour permettre de comprendre l'intégration du JAVA dans Webdev. Cela m'a beaucoup aidé pour faire mes premiers pas en JAVA.

Merci beaucoup. Mais hélas, après une journée complète à travailler dessus, et malgré vos exemples didactiques, je n'ai réussi qu'à intégrer partiellement ces scripts.

A savoir que maintenant je sais que le script s'execute, mais le problème, c'est que je n'ai pas le grisage de fond, et que l'image apparait en bas a gauche de ma page, et elle déborde sur le cote gauche de l'ecran !!! Du grand n'importe quoi, autant dire que je ne vois que la moitié de l'image, et que celle-ci apparait tout en bas de ma page...
Signaler
0
0
#19
Posté le 30 octobre 2008 - 18:03
HAHA !!

Ca y est j'ai réussi !!! j'avais bien mis le doigt sur le problème. En effet, Pat, dans ton projet, après avoir regardé le code HTML de tes pages générées, j'ai remarqué la ligne :

<LINK REL=stylesheet TYPE=text/css HREF="[%_PROJET_WEB_%]css/slimbox.css">

qui apparait vers le début du code !! Ce fameux feuillet qui me manquait ! Et comme elle n'était pas spécifié dans l'éditeur de WebDev, je pouvais toujours chercher. Alors actuellement, je ne sais toujours pas comment Pat arrive à introduire ce code dans ses pages HTML générées... Mais j'ai résolu le problème en spécifiant cette fameuse ligne dans l'onglet "Avancé", onglet "HTML" de description de ma page. Impec !

Maintenant se pose un autre problème que j'ai déjà rencontré. A savoir le contexte dépendant de ma page. En effet, cette page fait parti d'un projet dynamique SANS AWP. Donc chaque page dépend des autres, vous allez comprendre pourquoi...

Fort de ma trouvaille, je commence à mettre mon code HTML dans un champ HTML que j'insère dans ma ZR. Jusque là tout vas bien, à chaque affichage de ligne, mon champ HTML se transforme en image tel que :

sContenuHTML est une chaîne = ""

sContenuHTML = "<a href=" + Caract(34) + p_dossier_Maquette + ATT_NUMERO_TPF_MAQUETTE + "\WEB\" + ATT_NUMERO_TPF_MAQUETTE + ".jpg" + Caract(34) + " rel=" + Caract(34) + "lightbox" + Caract(34) + " title=" + Caract(34) +...
"Image" + Caract(34) + "><img src=" + Caract(34) + "[%_PROJET_WEB_%]/btn_image_24.jpg" + Caract(34) + " border=" + Caract(34) + "0" + Caract(34) + "/></a>"
CHAMP_HTML = sContenuHTML

les rubriques "ATT" sont les différentes rubriques de ma ZR, et CHAMP_HTML mon champ HTML. Tout irai pour le mieux sauf qu'évidemment ce n'est pas aussi simple.

Voila ma structure, j'ai un serveur de fichier qui s'appelle "SERVEUR_01", mon serveur web s'appelle "SERVEUR_02". Grâce à PCSoft, il est possible d'accéder à des images "distantes". En effet, mon catalogue d'image est sur SERVEUR_01.
Ma variable "p_dossier_maquette" est donc de la forme "\\SERVEUR_01\Maquette\". Cela fonctionne quand j'utilise des champs image directement dans ma ZR, et que ces champ images sont dit "généré". Mais dès que je veux faire du code HTML, impossible !!

Voila le genre de message d'erreur que j'ai :

Requête invalide : le contexte de page 'Accueil/serveur01/ekko/Maquette/003685/WEB/003685.jpg' est inconnu. Vérifiez : - l'url demandée, - la validité du nom de page.

On voit bien que le chemin de l'image est presque correct. Sauf que le répertoire de base n'est pas le serveur, mais la page en cours !!!! (page accueil o.O).

Et personnellement, je n'ai pas trop envie de passer tout mon projet en AWP.

Au passage, un autre soucis, ma ZR est en mode AJAX, et elle me renvoit toujours le même numéro de maquette à chaque affichage de ligne !!! Est-ce normal ? Ou y a t il une solution ?

Merci de votre lecture.
Signaler
0
0
#20
Posté le 30 octobre 2008 - 18:04
Bon, j'ai déjà plus ou moins avancé sur mon problème. J'ai réussi à reproduire le problème que j'ai (à savoir l'image qui apparait en débordant sur le bord gauche de l'écran, et toute en bas des pages) sur le projet de Pat.

Cela s'est produit lorsque j'ai supprimé le slimbox.css présent dans le répertoire UK/css/ de son projet. HORS je l'ai bien mis sur dans mon projet ! J'ai respecté la même arborescence pour le placement des fichiers, mais rien n'y fait. J'en déduis donc que c'est ce feuillet de style qui provoque cette erreur d'affichage (à savoir que les images de la slimbox n'apparaissent pas...)

Après avoir éplucher les scripts slimbox.js et mootools.js, à aucun moment les script ne font référence à ce feuillet de style !! J'en ai déduit que Pat doit le déclarer ailleurs dans l'éditeur de WebDev, mais je n'ai pas trouver où.

A savoir que Webdev va aller chercher ce feuillet de style dans les répertoires de langues tel que UK, FR ou ES (pour moi).

Donc comment fait le script pour trouver son feuillet de style slimbox.css ?
Signaler
0
0
#21
Posté le 30 octobre 2008 - 20:17
Re,

La feuille de style est une feuille de style externe. Elle est associée au projet ainsi :





Rien de mystérieux en fait.

--
courage
pat
Signaler
0
0
#22
Posté le 07 novembre 2008 - 12:41
Bonjour Pat et merci pour ces exemples, cela marche parfaitement pour moi.
J'aurais tout de même une question à vous poser.
J'essaie de faire la même manip avec un autre composant mootools ( window.growl ) mais je n'arrive pas à appeler le bon code à partir de webdev. Pouvez-vous m'aider à comprendre comment vous determinez la fonction js à appeler dans webdev svp ?
Par avance merci de votre aide et du temps que vous m'accordez.
Anthony.
Signaler
0
0
#23
Posté le 08 novembre 2008 - 18:52
Bonjour Anthony,

J'ai trouvé un script Mootools pour jGrowl, mais après quelques essais, j'ai abandonné. Trop confus, des paramètres un peu partout, des fichiers .js à modifier. Bref pas facilement réutilisable.

Ce matin j'ai trouvé un script équivalent basé sur jQuery.
http://www.fragmentedcode.com/jquery-growl/

Il me convient mieux et il a été facile de l'intégrer dans WebDev.





J'ai pas trop de temps pour des explications, mais tu peux télécharger ici un projet WebDev qui l'utilise. Il y a très peu de code. Pour jouer, j'ai géré deux langues, anglais et espagnol. Si j'ai le temps, j'écrirais un tutorial. Si ...



--
Bon WE
pat

http://ilikewd.free.fr/zip/jQueryGrowl.zip
Signaler
0
0
#24
Posté le 13 novembre 2008 - 13:59
Bonjour Pat
Merci beaucoup pour ton aide, ça marche parfaitement sur Firefox (un peu moins bien sur IE)
Je te remercie pour ton aide précieuse et ta réactivité.

Belle maîtrise, respect...
Anthony
Signaler
0
0
→ Revenir à WEBDEV 2025