nyroModal, FAQ et exemples en construction

« novembre 2008 »
lun	mar	mer	jeu	ven	sam	dim
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Par Nyro, vendredi 7 novembre 2008 à 23:47 :: Programmation :: #228 :: rss

Puisque j'ai de plus en plus de demandes d'exemples divers et variés pour nyroModal, j'ai décider de mettre en place des exemples sous forme de FAQ.

Afin de préparer tout ça, vous pouvez faire vos demandes ici !

Alors à vos commentaires !

Trackbacks

Aucun trackback.

Pour faire un trackback sur ce billet :http://nyrodev.info/tb.php?id=228&chk=kkrsli
Attention, ce trackback exprirera dans 2 minutes.

Commentaires

1. Le samedi 8 novembre 2008 à 05:46, par Screu

Et bah je commence !
Des exemple de ce que je pense est le plus important : le paramétrage de la modale (taille et autres ...). IL y a certes plusieurs méthodes comme tu l'as marqué dans la doc mais cela manque en effet un peu d'exemple commenté.

2. Le lundi 10 novembre 2008 à 17:39, par gtraxx

Salut une question lorsque l'ont charge une page html dans un iframe avec nyromodal comment lui dire d'utiliser la css de celui-ci dans l'apercu.
Je demande sa car j'ai créer un systeme qui affiche un apercu d'une page avec le plugin nyromodal seulement il affiche ma page destructuré vu qu'il utilise la css de l'administration au lieu du site public.
ps: je posterai les liens des sites utilisant nyromodal qui est intégrer dans mon framework php

3. Le lundi 10 novembre 2008 à 17:53, par gtraxx

j'oubliais comment spécifier une fenêtre de 100%, je veux dire par la que j'ai besoin d'une modal iframe qui s'ouvre au maximum.
j'ai spécifier une largeur et hauteur minimal mais il me faudrait une largeur plus élevé automatique.

4. Le lundi 10 novembre 2008 à 18:18, par Nyro

gtraxx,
Pour dupliquer toutes les CSS de la page courante dans une iframe, je ferai comme ça :
$(function() {
  $.nyroModalSettings({
    endShowContent: function(elts, settings) {
      var iframe = elts.content.find('iframe');
      if (iframe.length) {
        var styles = $('style, link[type="text/css"]');
        alert(styles.length);
        if (styles.length) {
          var head = iframe.contents().find('head');
          if (head.length)
            head.append(styles.clone());
          
          iframe.load(function() {
            iframe.contents().find('head').append(styles.clone());
          });
        }
      }
    }
  });
});
Bien sûr à toi de placer le code comment et où tu en as besoin.
Attention, ce code ne marchera que pour des pages qui se trouvent sur le même domaine. Sinon, tu auras des alertes de sécurité.

Pour spécifier une fenêtre avec une taille maximale, il te faudra définir le padding à 0, et une taille et hauteur immensément grande.

5. Le lundi 10 novembre 2008 à 20:31, par gtraxx

oui c'est pour previsualiser les pages conçue avec le cms donc dans le domaine courant.
Seulement cela ne fonctionne pas ou je m'y prend très mal.

jQuery(document).ready(function(){

jQuery('a.nyroTxt').nyroModal({
type: 'iframe',
minWidth: 1024, // Largeur minimale
minHeight: 768, // Hauteur minimale
resizeable: true, // Indique si le contenu est redimensionnable. Sera défini à false pour le type swf
autoSizable: true,
errorClass: 'error', // Classe CSS d'erreur ajoutée à la div de chargement en cas d'erreur
contentError: 'Le contenu demandé ne peut pas être chargé..<br />Essayer plus tard svp.<br /><a href="#" class="nyroModalClose">Fermer</a>', // Contenu placé dans la div de chargement en cas d'erreur
handleError: null, // Callback en cas d'erreur
setWidthImgTitle: true, // Définir la largeur pour le titre de l'image
endShowContent: function(elts, settings) {
var iframe = elts.content.find('iframe');
if (iframe.length) {
var styles = jQuery('style, link[type="text/css"]');
alert(styles.length);
if (styles.length) {
var head = iframe.contents().find('head');
if (head.length)
head.append(styles.clone());

iframe.load(function() {
iframe.contents().find('head').append(styles.clone());
});
}
}
}
});
});

6. Le lundi 10 novembre 2008 à 20:48, par gtraxx

ahh oui une derniére chose pour que je comprenne bien la conception de plugin.
j'ai concu un petit plugin pour animer les messages systeme de smarty cependant je n'arrive pas a mettre en place le setting du plugin....

voici mon code

(function($){
var settings;
$.fn.MsgColor = function(options){
var settings = {
startWidth = function(){this.width(0)},
endwidth : null,
startHeight = function(){this.height(0)},
endHeight = : null
};
$(this).hide();
if(options) {
$.extend(settings, options);
}

$(this).show('slow',function(){
$(this).startWidth.startHeight.animate({'width':'+=60%'}, 2000)
.animate({ backgroundColor: "#ff7979", color:'#FFFFFF', opacity: 0.8 }, {queue: false, duration: 2000})
.animate({ 'height':'+=25px' }, 2000)
.css({fontWeight:'bold',padding:'5px'});
setTimeout(function(){
$(this).stop();
}, 2000);
});
}
})(jQuery);

ps: vous utilisez quel version de dotclear ??? j'ai concu pas mal de plugin pour dotclear 2 notamment pour formater du code de manière plus visuel dans les commentaires

7. Le lundi 24 novembre 2008 à 23:27, par PsychoP@T

Aucun rapport avec ton plugin mais je voulais souligner mon passage sur ton blog. Je dois etre dans ma soirée nostalgique car je viens aussi de passer sur l'ordinatueur. En tout cas, je suis sur le cul. J'ai un peu survolé les fonctionnalités de ton plugin et ça envois du steack. Je ne suis pas trop developpement web mais je me dis que je serais loin de pouvoir en faire autant... Deja en terminale, j'étais convaincu que tu ferais des trucs de fou!
A la prochaine, ici ou ailleurs...

8. Le samedi 29 novembre 2008 à 20:23, par gtraxx

Salut nyro est ce possible d'ouvrir une fenêtre avec un contenu défini en js genre :

jQuery.nyroModal('<img src="check.png" width="48px" height="48px" alt="check" />Machin effacer avec succès');

9. Le mercredi 7 janvier 2009 à 04:11, par karpediem

Bonjour,

Moi je dois être très blonde, mais je ne comprends pas à quoi servent tous les fichiers qui sont dans le zip de téléchargement...
En tâtonnant, j'ai vu qu'avec nyroModal-1.3.1.pack.js et nyroModal.css ça allait bien, mais peut-être qu'un complément d'information serait le bien venu ;o)

Par ailleurs (je vous ai prévenu, je suis blonde ;o)), j'ai cru comprendre en regardant les demos qu'en faisant un appel de cette façon :
<a href="demoSent.php#test" class="nyroModal">Ajax avec ciblage du contenu #test</a>
Je récupérais $_GET[nyroModalSel] = test dans ma nyroModal sauf que si j'affiche le contenu de $_GET dans ma nyroModal, il est vide.

Désolée pour ces questions stupides, mais j'ai un peu de mal à m'en sortir...

Excellente soirée et merci de m'avoir lu.

10. Le mercredi 7 janvier 2009 à 23:26, par Nyro

karpediem,

Les fichiers indispensable pour le bon fonctionnement de nyroModal sont :
le js jQuery
le js nyroModal (en version full, pack ou min, selon vos préférences, un seul suffit)
la css nyroModal

De plus, les images doivent être placé dans le dossier img.

Il existe 3 versions du javascript de nyroModal car selon est conseillé et demandé par jQuery.

d'autres libraires JavaScript peuvent-être incluses pour améliorer le fonctionnement de nyroModal.
Ainsi, mousewheel interdira le scroll de la page. Le plugin Color quant à lui permettra la mis à jour du fond de façon animée (utile uniquement avec le changement de la couleur de fond pour une modale déjà affichée)

Concernant la seconde question et le nyroModalSel, il semble fonctionner pour moi. Si vous pensez qu'il s'agit d'un bug, merci de le reporter sur par là : code.google.com/p/nyromod...

11. Le jeudi 8 janvier 2009 à 16:21, par Manitas

Bonjour Nyro

Tout d'abord merci et félicitations pour ce superbe outil qui facilite beaucoup de choses.

Je voudrais pour ma part pouvoir fermer la modale par le biais de code javascript, Est ce possible ?

Pour être plus précis, après la saisie et l'envoi en ajax d'un formulaire dans une modale, je souhaiterais, si les infos sont bien enregistrés sur le serveur, fermer automatiquement la modale.

Merci d'avance pour ton aide.

12. Le jeudi 8 janvier 2009 à 17:30, par Nyro

Il suffit simplement d'utiliser la fonction $.nyroModalRemove() sur le success de l'appel Ajax.

13. Le jeudi 8 janvier 2009 à 22:09, par Manitas

Merci beaucoup pour ta réactivité très appréciable. je ne comprends toujours pas comment j'ai pu passer à coté dans ton tutorial
Bonne continuation et longue vie à ton projet.

14. Le vendredi 9 janvier 2009 à 01:44, par karpediem

Bonjour Nyro,

Merci pour ces rapides explications complémentaires.

Concernant mon pb du GET, je pense que ce doit être une mauvaise utilisation de ma part, d'autant que ça fonctionne dans tes exemples...

Avant de déclarer qu'il y a un bug dans ce superbe outil, je souhaitais vérifier ce que j'avais pu faire (ou ne pas faire ;o)) pour que le comportement ne soit pas ce qu'il devrait être...

En fait ce qui se passe c'est que si j'envoie :

<a href="detail_bien.php" class="nyroModal">Detail</a>
et que dans ma page detail.php je demande un print_r(GET) j'obtiens un array vide

Et si j'envoie

<a href="detail_bien.php#test" class="nyroModal">Detail</a>
J'obtiens le message
The requested content cannot be loaded.
Please try again later.

C'est aussi ça qui me fait dire que c'est moi qui merdouille quelque part...

Je ne sais pas si ça suffit pour te donner une piste... Mais si tu penses que le mieux c'est que je le reporte comme étant un bug, il n'y a pas de pb...

Encore un grand MERCI pour ce superbe outil !

15. Le vendredi 9 janvier 2009 à 03:29, par karpediem

Re-bonsoir,

J'ai réussi à le faire passer en écrivant : <a href="detail_bien.php?test" class="nyroModal">Detail</a>

Merci et à bientôt

16. Le mardi 13 janvier 2009 à 13:09, par standardisator

Salut Nyro,

Superbe plugin !

Mais perfectionniste comme je suis je voulais savoir s'il existait une technique pour que le ficheir nyroModal.css soit valide et sans avertissement aux yeux de la w3c. le plugin firefox webdevelopper me signale les 2 avertissements identiques ligne 68 et 72. Les voila :
Avertissement : Erreur d'analyse de la valeur pour la propriété « filter ». Déclaration abandonnée.
Fichier Source : localhost/0.5/css/nyroMod...

Désolé d'avance de t'embêter avec ce détail et Merci d'avance pour ton aide.

17. Le dimanche 18 janvier 2009 à 16:26, par TiGeR WooD

Salut,

Est-ce qu'il y a un moyen de bloquer une galerie à un ID ? Je m'explique ..
Pour le moment, si plusieurs bloc avec des liens vers les images, lorsqu'on clique sur le premier lien ouvrant par exemple l'ID "gal_1" la modale s'ouvre correctement et on peut faire défiler les images mais le problème, c'est qu'il continue sur tous les autres liens contenu dans les autres bloc.
Donc pour reprend la demo si j'ai par exemple

<p>
<a href="img/img1.jpg" id="imgFiche" class="nyroModal" title="UCLA" rel="gal">Galerie Img 1</a><br />
<a href="img/img2.jpg" class="nyroModal" title="3rd Street Promenade by Night" rel="gal">Img 2</a><br />
<a href="img/img3.jpg" class="nyroModal" title="Sunset at Santa Monica" rel="gal">Galerie Img 3</a>
</p>
et
<p>
<a href="img/img1.jpg" id="imgFiche2" class="nyroModal" title="UCLA" rel="gal">Galerie Img 1</a><br />
<a href="img/img2.jpg" class="nyroModal" title="3rd Street Promenade by Night" rel="gal">Img 2</a><br />
<a href="img/img3.jpg" class="nyroModal" title="Sunset at Santa Monica" rel="gal">Galerie Img 3</a>
</p>

ceci sur la meme page, la modale ouvrira les images de "imgFiche" et "imgFiche2". Il ne s'arretera pas à "imgFiche".

Merci d'avance.

18. Le lundi 19 janvier 2009 à 19:24, par TiGeR WooD

Salut,

Je me suis débrouiller autrement, par contre j'ai un un petit souci
je fais ceci
$('.viewGallery').click(function(e) {
e.preventDefault();
$.ajax({
url: "view.php",
type: "POST",
data: "id="+$(this).attr('rel2'),
dataType:"html",
success: function(data){
$('#hiddenblock').html(data);
$('#gallery').nyroModalManual({
bgColor: '#cc3333'
});
}
});
return false;
});

cela fonctionne bien mais lorsque la modale est ouverte sur la première image, il y a le lien précedent qui s'affiche et est cliquable du coup je me retrouve avec un contenu introuvable.
Ce lien précedent pointe vers la page courante dans ce cas ci (gallery.php) accompagné du signe #
gallery.php#

Je ne comprend pas ? si quelqu'un avait une idée ?
Merci d'avance.

19. Le mercredi 4 février 2009 à 18:33, par yodamad

Je suis intéressé aussi par une solution, car j'ai exactement le même soucis.

Merci

20. Le mercredi 4 février 2009 à 18:39, par TiGeR WooD

Salut yodamad,

Vérifie le lien sur lequel tu cliques pour lancer le nyroModal ... tu devrais avoir un attribut rel="gal"
Mon problème venait de là pour ma part ...

21. Le mercredi 4 février 2009 à 18:45, par yodamad

Hello,

j'ai bien mes rel="gal" pour chaque img, ms mon probleme se situe + au niveau de la gestion des différentes galleries au sein d'une même page.

Y-a-t-il une solution plus simple d'implémentation que ta bidouille ? Sinon, a quel endroit l'as-tu positionné pour que ca fonctionne ?

Thx :p

22. Le mercredi 4 février 2009 à 18:51, par TiGeR WooD

Si ce que tu veux est de lancer le nyroModal et le bloquer à un id, je n'ai trouvé aucune solution.

Il existe d'autre plugin qui ne sont fait pour l'image comme jquery fancybox
fancy.klade.lv/

Il y a plusieurs galeries sur la même page. Jette un coup d'oeil.

Moi je préfrère nyroModal, bcp plus complet, plus fluide, plus léger ... Bref c'est le top en matière de modal ...

23. Le mercredi 4 février 2009 à 19:53, par Nyro

plusieurs galeries = utilses différents attributs rel pour chaque galerie

24. Le jeudi 5 février 2009 à 10:21, par yodamad

Slt,

donc juste pour etre sur de bien comprendre :

galerie 1 = rel="gal1"
galerie 2 = rel="gal2"

??

Merci pour l'info en tt cas

25. Le samedi 11 avril 2009 à 09:45, par jojodivx

Bonjour.

J'utilise ce script comme Iframe et tout marche nikel. Le seul problème est que j'aimerais qu'il se lance au chargement de la page mais je ne sais pas comment définir l'url.

Si quelqu'un a une idée je suis preneur

Cordialement.

26. Le dimanche 10 mai 2009 à 18:26, par Caro

Bonsoir,
Je te remercie tout d'abord pour ton plugin, il est efficace et facile à prendre en main !

Je bloque juste sur une chose : j'ai une créa avec un voile blanc au lieu du traditionnel voile noir ... j'ai voulu changer les paramètres de la fonction : $.nyroModalSettings({height: 370, width: 960, bgColor: '#ffffff'}) mais cela ne fonctionne pas.
Est-ce que quelqu'un a la solution ? Merci d'avance à tous.
Bonne soirée.

27. Le jeudi 8 octobre 2009 à 22:38, par Jean-Marc

Bonjour,

Un grand merci pour nyromodal que je découvre avec beaucoup de plaisir.

J'ai peu de connaissances dans les languages html, php, etc. Donc, merci de demeurer clair et simnple.

Le nom de l'image apparaît trop petit et dans une police peu lisible. J'ai voulu modifier ceci en agissant sur les styles, mais ça ne fonctionne pas.

De plus, Dreamweaver détecte des erreurs dans nyromodal.css version 1.5.2.

Est-ce que quelqu'un peut m'aider ?
Par avance, merci.

28. Le dimanche 7 mars 2010 à 00:37, par bd

bonjour,
depuis la page principal, j'ai défini un link avec un ID pour effectuer l'affichage de ce lien dans un modal. tout se passe bien à ce niveau-là.
maintenant j'aimerais dans le texte affiché dans ce modal intégrer un lien ferme le modal (ok avec class="nyroModalClose") en même temps renvoie la fenêtre principale vers un url définies.
est-ce possible et si oui comment dois-je faire?
merci d'avance.
bd

29. Le jeudi 11 mars 2010 à 13:46, par raf

Hello, un grand merci, après en avoir testé une quantité, celui-ci est robuste et paramétrable.

Je bloque sur un point : comment lancer une fenêtre nodal au chargement de la page html ?
(Je souhaite simplement ouvrir la page alert.php au chargement)

a++

30. Le mardi 16 mars 2010 à 17:00, par Nyro

@jojodivx et @ref: nyromodal.nyrodev.com/wik...
@Caro : ça devrait marché, 1 page où l'on peut voir le bogue ?
@Jean-Marc : il faut modifier dans la CSS h1#nyroModalTitle pour metter ce que tu veux (et ne pas utiliser Dreamweaver ?)
@bd : ne met simplement pas de class et l'URL sera renvoyé correctement dans le navigateur

@tous : désolé pour le long délai...

31. Le vendredi 18 juin 2010 à 17:13, par morgan

bonjour,
Je me permet de poster une requête sur le forum car après de nombreuse heur de recherche je reste blocké sur un test javascript. Je m'explique:
Je suis sur une page nyromodal qui me sert a avoir un formulaire de saisie. Ce formulaire me permet de changer le MDP d'un utilisateur et il a pour action d'aller sur une nouvelle page nyromodal. Il me faut donc tester les champs afin de s'avoir si les text sont remplit et surtout si les deux MDP rentrés sont identique. Les test se font correctement en java script. Cependant quand le test est effectuer et même si la fonction javascript me retourne false le script n'est pas blocker et donc le formulaire s'execute et m'envoie donc sur la nouvelle page nyromodal.
je vous presente ma fonction javascript ainsi que mon formulaire:

javascript:
function testMdp(val1,val2){
if (val1 == ""){
alert("Le premier mot de passe n'est pas renseigner")
return false;
}
if (val2 == ""){
alert("Le deuxième mot de passe n'est pas renseigner")
return false;
}
if (val1 != val2){
alert("Les deux MDP saisit sont différent")
return false;
}
//return true;
}

$(function() {
$('#modifMDP').submit(function(e) {
e.preventDefault();

if (!testMdp($("input[name~=mdp1]").val(),$("input[name~=mdp2]").val())) {

return false;
}
else {
$.nyroModalManual({
url: this.action
});
}
});
});

formulaire.php:

ouverture du formulaire
zone de saisie1
zone de saisie2
bouton submit

Je vous serait reconnaissant d'une quelconque réponse. Si vous souhaiter plus de renseignement n'hésite pas a me demander. merci d'avance.

32. Le jeudi 22 juillet 2010 à 10:03, par Luc

Bonjour

Je découvre nyroModal et ca semble tres agréable notamment pour faire une galerie sympa. J'ai le code suivant mais je n'arrive pas a le faire fonctionner lorsque je le met sur mon server web, il marche seulement lorsque je clique dessus depuis mon explorateur de fichier (Finder sous Mac). Lorsque j'y accede depuis mon site web et que je clique sur un des lien => l'image s'ouvre normalement dans une page blache. Est ce que j'ai loupe quelque chose ?

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/...
<html xmlns="www.w3.org/1999/xhtml&quo... xml:lang="fr" lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="./css/styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="./css/nyroModal.css" media="screen" />
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.nyroModal-1.6.2.pack.js"></script>
</head>
<body>
<a class="nyroModal" title="test1" rel="gal" href="./picts/test1.jpg">Gallery Img 1</a>
<a href="www.youtube.com/watch?v=l... class="nyroModal" rel="gal" title="Hockey Goal fight">Youtube in gallery</a><br />
<a class="nyroModal" title="test2" rel="gal" href="./picts/test2.jpg"/>
</body>
</html>

Merci beaucoup,
Luc