Jquery-lightbox

More
10 years 3 months ago #57433 by darknico84
Jquery-lightbox was created by darknico84
Bonjour à toutes et tous,

J'aurais aimé savoir si certains d'entre vous avaient implémenté avec succès un plugin du type jquery-lightbox dans limesurvey. Par exemple dans le cadre d'un questionnaire où on devrait voter pourpour un photo et où il serait pratique d'avoir une vignette qui pourrait être agrandie.

J'ai essayé de récupérer jquery lightbox et de l'insérer dans les rubriques header de common.php mais sans grand succès.

Merci d'avance pour votre aide ou vos indices

Nicolas
The topic has been locked.
More
10 years 3 months ago - 10 years 3 months ago #57440 by DenisChenu
Replied by DenisChenu on topic Jquery-lightbox
Salut,

Surtout pas dans comon.php, c'est uniquement dans le template.
METHODO:
* Ajouter le fichier jquery.lightbox.js dans le template (envoi de fichier)

* Ajouter dans le fichier start.pstpl
<script type="text/javascript" src="{TEMPLATEURL}jquery.lightbox-0.4.js"></script>
au dessus de la ligne équivalent mais avec template.js

* Ajouter dans le fichier template.js
$(document).ready(function() {
$('a.lightbox').lightBox();
});

Et bien sur, mettre pour les images:
<a href="lien-vers-images.jpg" class="lightbox"><img src="petite-image.jpg"></a>
en mode d'édition de la source

J'ai souvent utilisé jquery-lightbox opu media box dans des sites web, mais peu sous LS.

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development . I don't answer to private message.
Last edit: 10 years 3 months ago by DenisChenu.
The topic has been locked.
More
10 years 3 months ago #57476 by darknico84
Replied by darknico84 on topic Jquery-lightbox
Merci Maître Shnoulle !!!

Ca fonctionne nickel il a juste fallu :
- copier les images de lightbox dans admin/images
- copier le css lightbox dans template/default/css
- et ajouter dans startpage.pstpl
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}css/jquery.lightbox-0.5.css"/>

Bon après ce qui serait carrément trop formidable c'est de pouvoir choisir dans fckeditor si on veut une image normale toute bête ou truc qui dépote avec un machinbox O:D

En fait cela est utile par exemple quand en guise de réponse on met une image (forcément un miniature) et que l'on a besoin de voir cette image en grand, en détails ...

En tout cas ça fonctionne nickel chrome, merci encore
The topic has been locked.
More
6 years 10 months ago #111198 by darknico84
Replied by darknico84 on topic Jquery-lightbox
3 ans et des poussières plus tard après l'installation d'une Version 2.05+ Build 140717 j'essaye de faire exactement la même manip, mais apparemment il y a quelques trucs qui ont bougé entre temps :D

Dans bugzilla je vois bien les bons lightbox.js et css de chargés, mais rien ne s'applique à l'image qui est appelé dans la fenêtre alors que mon lien <a href .. contient bien la classe lightbox.

D'autres personnes ont-elles fait mumuse avec fancybox, lightbox ou autre avec succès depuis mon post précédent ?

Merci d'avances pour vos indications

Nicolas
The topic has been locked.
More
6 years 10 months ago #111204 by DenisChenu
Replied by DenisChenu on topic Jquery-lightbox
Salut darknico84,

Tu as un lien de test pour voir ce que cela donne ?

Sinon : pour toutes les images :
$(document).ready(function() {
$('a > img').parent("a").lightBox();
});

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development . I don't answer to private message.
The topic has been locked.
More
6 years 10 months ago #111216 by darknico84
Replied by darknico84 on topic Jquery-lightbox
Merci pour les infos.
Au final j'ai :
- téléchargé la dernière version de lightbox
- copié lightbox.js + lightbox.css dans mon template ainsi que les images dans le répertoire images de mon template
- ajouté les lignes suivantes dans startpage.pstpl
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}lightbox.css"/>
sous {TEMPLATECSS}
<script type="text/javascript" src="{TEMPLATEURL}lightbox.js"></script>

- et dans mon lien d'appel de l'image je colle rel="lightbox"
<a href="/upload/surveys/341781/images/monimage.jpg" rel="lightbox"><img alt="" src="/upload/surveys/341781/images/monimage.jpg" style="width: 750px; height: 382px;" /></a>


Et ô miracle ça fonctionne sans modification ... par contre si je met class="lightbox", ça me foire la disposition des images.
The topic has been locked.
Moderators: Nickko

Start now!

Just create your account and start using Limesurvey today.

Register now