Swipebox - lightbox plugin

  • Posts: 473
  • Thank you received: 30
  • Hikashop Business
5 years 5 days ago #313313

-- HikaShop version -- : 4.2.2
-- Joomla version -- : 3.9.13
-- PHP version -- : 7.3

Bonjour,

Je tente d'utiliser le plugin pour les popups d'images "Swipebox - lightbox plugin" acheté dans le Marketplace.

J'ai deux problèmes sur appareil mobile (tablette, iPhone) :
1. Le titre de l'image ne s'affiche pas (sur un ordinateur le titre s'affiche dans un bandeau mais seulement quand on clique sur l'image)
2. La croix de fermeture : quand on clique dessus, cela ferme bien la fenêtre. Mais cela active aussi tout lien qui serait situé dessous (par exemple un lien de connexion ou de déconnexion) !

On pourrait aussi pouvoir fermer la fenêtre en cliquant n'importe où en dehors de l'image, ce serait bien.

Last edit: 5 years 4 days ago by lesyeux.

Please Log in or Create an account to join the conversation.

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
5 years 5 days ago #313327

Bonjour,

Le plugin "image popups" est un plugin qui permet l'intégration entre HikaShop et des librairies JavaScript existantes.
La page produit du plugin vous donne les liens des différentes librairies afin de pouvoir tester

Pour "Swipebox", il s'agit de la librairie du même nom que vous trouverez sur le site : brutaldesign.github.io/swipebox/#try
Sur ce site, vous avez la possibilité de regarder ce que fait la librairie sur votre tablette et iPhone.
Pour ce qui est de la modification du comportement en cliquant n'importe où, je crains que cela ne soit pas possible car c'est le design de cette librairie.
Sur Desktop, le titre et les contrôles vont se masquer automatiquement et en cliquant n'importe où (hors la croix) cela va les faire re-apparaitre.
Sur mobile, le titre et les contrôles ne sont pas visible mais il est possible de "swipe" les images avec son doigt.

Lorsque nous avons eu l'idée de faire ces plugins, nous avons sélectionné plusieurs librairie qui sont très utilisées et également éprouvées.
Si le comportement choisi par Swipebox vous pose des soucis, je vais vous conseiller de tester les autres librairies que nous avons listés. Si vous avez connaissance d'autres librairies qui sont bien utilisées et stable ; nous pouvons regarder pour ajouter de nouvelles intégrations.

Cordialement,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: lesyeux

Please Log in or Create an account to join the conversation.

  • Posts: 473
  • Thank you received: 30
  • Hikashop Business
5 years 4 days ago #313335

Merci pour cette réponse très claire et détaillée.

Je vais étudier la source pour Swipebox. Je vois déjà que j'ai accès à certains paramètres, comme l'affichage des barres de titre et navigation sur les appareils mobiles.

removeBarsOnMobile : true, // false will show top bar on mobile devices

Ce qui serait parfait avec ces plugins, c'est qu'ils permettent, lorsqu'on les édite dans l'administration, d'agir sur les paramètres de base, comme ci-dessus.

Last edit: 5 years 4 days ago by lesyeux.

Please Log in or Create an account to join the conversation.

  • Posts: 473
  • Thank you received: 30
  • Hikashop Business
5 years 4 days ago #313346

J'ai tenté d'ajouter des paramètres (via une option de mon template) dans le HEAD en utilisant l'exemple de code présent sur la page brutaldesign.github.io/swipebox/#try , mais sans aucun effet :

<script type="text/javascript">
;( function( $ ) {
	$( '.swipebox' ).swipebox( {
		removeBarsOnMobile : false, // false will show top bar on mobile devices
		hideBarsDelay : 4000, // delay before hiding bars on desktop
		loopAtEnd: true // true will return to the first image after the last image is reached
	} );
} )( jQuery );
</script>

Comme javascript est quasi incompréhensible pour moi, je ne sais pas comment faire fonctionner ce qui semble pourtant simple.

C'est pour ça que ce genre d'options devraient être intégrées au backend du plugin. Ce serait beaucoup pratique à utiliser par les créateurs de sites qui ne sont pas des experts du code.

Please Log in or Create an account to join the conversation.

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
5 years 4 days ago #313365

Bonjour,

A ce moment là, je vous conseil de modifier le fichier "lightbox_swipebox.php" et modifier la ligne

try { jQuery(function () { jQuery(\'[data-hk-lightbox="swipebox"]\').swipebox(); }); } catch(err) {}
Afin de rajouter votre code.
De notre côté, on peut voir pour ajouter des options pour ce plugin afin de gérer ces paramètres supplémentaires.

Cordialement,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 473
  • Thank you received: 30
  • Hikashop Business
5 years 4 days ago #313370

Merci, ça fonctionne.

fichier : plugins/hikashop/lightbox_swipebox/lightbox_swipebox.php

try { jQuery(function () { jQuery(\'[data-hk-lightbox="swipebox"]\').swipebox({
		removeBarsOnMobile : false, // false will show top bar on mobile devices
		hideBarsDelay : 4000, // delay before hiding bars on desktop
		loopAtEnd: true // true will return to the first image after the last image is reached
	}); }); } catch(err) {}

Please Log in or Create an account to join the conversation.

Time to create page: 0.062 seconds
Powered by Kunena Forum