Fork me on GitHub




(1) 2 3 »


News : comment utiliser effet lightbox dans les articles ?
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Bonjour,

Actuellement je sais faire agrandir des photos insérées dans les articles grâce à un petit script que j'ai créé dans un fichier popup.js, qui est appelé si on donne la classe "popup" à l'image (pour toute image avec la classe "popup" il ouvre une popup avec javascript et y place l'image).

Ca fonctionne mais je préfèrerais pouvoir utiliser l'effet lightbox pour agrandir l'image.


D'autre part le module exTgallery est installé et fonctionnel, et l'extension activée.

Dans exTgallery lightbox fonctionne parfaitement, c'est extra !

Par contre, dans news, si j'utilise le tag [gallery], qui n'est pas très fun à utiliser, l'image est bien agrandie, mais pas en popup ! Elle s'affiche dans une page remplace l'article, collée dans le coin supérieur gauche.

En bref, lightbox fonctionne dans exTgallery mais l'extension appelle l'image et ne l'affiche pas en popup.

Y a-t-il un moyen de régler ce problème ? Sinon comment modifier mon script popup.js pour qu'il ouvre l'image avec lightbox ?

Posté le : 09/07/2014 00:55

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Re: News : comment utiliser effet lightbox dans les articles ?
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Une astuce, à condition que le très bon module APCal (2.21) soit installé ...

Pour afficher une image qui peut s'agrandir style lightbox, on peut très facilement utiliser une méthode implémentée par APCal associée à l'évènement "onclick".

Procédure (avec tinymce):

1- Dans news pendant la saisie d'un article, insérer une image tout à fait normalement, à la dimension que l'on souhaite (facile avec tinymce).

2- Transformer cette image en lien Open in new window


Onglet "général": URL - répéter adresse de l'image.

Onglet "évènements": onclick - saisir la fonction à appeler (qui est dans APCal) >>> return hs.expand(this)

C'est tout !!! Magique ...

Posté le : 09/07/2014 13:34

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Re: News : comment utiliser effet lightbox dans les articles ?
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
A condition que ApCal soit installé et qu'un bloc soit affiché sur la page. Sinon Xoops, ne charge pas les fonctions jQuery qui gère lightbox

Posté le : 09/07/2014 17:47
Partager Twitter Partagez cette article sur GG+
Re: News : comment utiliser effet lightbox dans les articles ?
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Citation :
lionhell a écrit :
Onglet "évènements": onclick - saisir la fonction à appeler (qui est dans APCal) >>> return hs.expand(this)

C'est tout !!! Magique ...


Si l'utilisateur à désactivé sur son navigateur le javascript, ça ne marchera plus...

Posté le : 09/07/2014 23:19

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: News : comment utiliser effet lightbox dans les articles ?
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
C'est vrai Montuy j'ai testé ... il faut bien qu'un bloc (pas n'importe lequel d'ailleurs) soit activé.

Alain, si javascript est désactivé (il y a bien sans doute quelques paranos qui le font) il y a bien des choses qui ne fonctionneront plus sur xoops !

Posté le : 10/07/2014 02:19

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Re: News : comment utiliser effet lightbox dans les articles ?
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Citation :
A condition que ApCal soit installé et qu'un bloc soit affiché sur la page. Sinon Xoops, ne charge pas les fonctions jQuery qui gère lightbox


Ca serait une bonne idée ça, que jQuery soit appelé par xoops sans avoir à le faire via un module ! Non ?


Mais plus humblement, news étant LE module de base de xoops (hormis le système), ne serait-il pas très intéressant de faire évoluer ce module pour qu'il intègre jQuery ??

Posté le : 10/07/2014 02:23

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Re: News : comment utiliser effet lightbox dans les articles ?
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Citation :
Alain, si javascript est désactivé (il y a bien sans doute quelques paranos qui le font) il y a bien des choses qui ne fonctionneront plus sur xoops !

Le java est géré au niveau du lecteur, navigateur (poste client), pas du serveur, or tu ne maîtrises jamais les paramétrages des postes clients, donc tu ne peux pas être garanti d'un résultat propre.
Je voulais juste attirer ton attention la-dessus.

Posté le : 10/07/2014 09:30

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: News : comment utiliser effet lightbox dans les articles ?
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
Autre précisions quand on y est :
Citation :

Ca fonctionne mais je préfèrerais pouvoir utiliser l'effet lightbox pour agrandir l'image.

Le 'lighthbox' n'agrandit pas l'image, le 'lightbox' permet de visualiser plusieurs images présentes dans une liste d'une façon plus agréable et pratique. Pour que le 'lightbox' fonctionne il y a deux impératifs, le premier c'est que la photo soit enregistré sur le disque dur avec une taille suffisamment grande pour voir que se soit agréable à voir, en second lieu qu'il y ai une taille fixe pour la largeur et/ou la hauteur.

Implanter un 'lightbox' dans un article news, pas très compliqué a première vue, mais oblige certains choix comme :
- toute les images dans ton article seront situées au même endroit
- tu devra prévoir une restructuration de chacun de tes articles déjà écrit

Pour être sûr que cela pose pas de problème, je te conseille vivement de charger Xoops directement dans ton thème. Comme ça, quoi qu'il arrive il est chargé.
En 2 choisir un script 'lightbox' sur la toile et l'implanter à la rigueur dans le template de la visualisation de l'article
En 3, implanter le CSS et les images de la 'lightbox'
En 4, tout simplement utiliser la syntaxe imposée par la 'lightbox' pour insérer les photos (souvent ce sont des div ou des balises <ul> et <li>, pour les plus sophistiqués, ce sont simplement des 'class'). Ce point oblige a utilisé de l'HTML directement dans ton article, donc il faut que le HTML soit autorisé dans les préférences et si tu utilises TinyMCE, penser à cliquer sur le bouton "code"



Posté le : 10/07/2014 09:55
Partager Twitter Partagez cette article sur GG+
Re: News : comment utiliser effet lightbox dans les articles ?
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
@Alain :

Oui Alain je sais bien tout ça, je ne suis pas développeur mais tout de même

Je disais simplement que si tu n'autorises pas javascript on peut dire que xoops ne peut pas fonctionner ... tous les modules utilisent du javascript ! Non ?


@Montuy :

Pourquoi les images devraient avoir la même taille ? Avec extGallery j'ai des images de tailles différentes dans les albums et ça fonctionne très bien !

Posté le : 10/07/2014 10:02

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Re: News : comment utiliser effet lightbox dans les articles ?
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Citation :
Pour être sûr que cela pose pas de problème, je te conseille vivement de charger Xoops directement dans ton thème.


Je ne vois pas trop ce que tu veux dire ...

Posté le : 10/07/2014 10:04

signé: LionHell
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant
(1) 2 3 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

47 Personne(s) en ligne (36 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 47 | Plus ...