Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

Nouveau module : JQueryTools
#1

Incontournable et génial, il vous permet d'utiliser Ajax très simplement et de faire de magnifiques effets.
Plusieurs plugins sont inclus.
Les démos de quelques plugins :
tablesorter
cluetip
form
lightbox
Fancybox
Autre possibilité avec les news : http://calguy1000.com/Blogs/9/60/jquery-...-news.html
Répondre
#2

très très intéressant !

ça sent la refonte de ma shootbox ^^
Répondre
#3

Jean le Chauve a écrit :Incontournable et génial, il vous permet d'utiliser Ajax très simplement et de faire de magnifiques effets.
Fancybox
Celui là est excellent

==> Merci de marquer [Résolu] dans le titre de votre message lorsque une solution a été trouvée <==

Mint 17
Répondre
#4

C'est dingue comme les modes évoluent n'empêche... avant on faisait tout ça en flash, certains criaient au gadget inutile d'ailleurs... maintenant tout le monde est à la sauce Ajax, Jquery & cie, il faudrait changer son site tous les ans pour rester "in" Smile
Répondre
#5

Quelqu'un a utilisé Fancybox pour les images dans CMSMS ?

==> Merci de marquer [Résolu] dans le titre de votre message lorsque une solution a été trouvée <==

Mint 17
Répondre
#6

J'y suis occupé Smile
Répondre
#7

Hé hé, ça marche : http://www.menus-cmsms-madesimple.be/jquery.html

1° insérer dans le content de la page :
Code :
<a id="single_image" href="/uploads/images/tonImage.jpg"><img src="/uploads/images/tonThumb.jpg" alt=""/></a>
2° insérer dans les options métadonnées de la page :
Code :
{JQueryTools action=incjs}
{literal}
<script type="text/javascript">
jQuery(document).ready(function($)
    {
    $("a#single_image").fancybox();
$("a#inline").fancybox({ 'hideOnContentClick': true });
$("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false });
});
</script>
{/literal}
Have fun Smile
Répondre
#8

Génial : une google map dans une infobulle avec les liens internes qui fonctionnent Smile
http://www.menus-cmsms-madesimple.be/jquery.html
Autre avec effet zoom : http://www.confederationparascolaire.org...-nous.html
Procédure :

1° insérer dans le content
Code :
<a class="iframe" rel="popup- map" href="testGoogleMap.html">map</a>
2°ajouter dans les métadonnées (avant </script> du post précédent)
Code :
$("a[rel^='popup']").fancybox({
        'frameWidth': 600,
        'frameHeight': 600
3°créer un nouveau gabarit : googlemap
Code :
{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}
<head>
<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}
{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}
</head>
<body>
      {* Start Content *}
      <div>
         <h2>{title}</h2>
         {content}
      </div>
      {* End Content *}
</body>
</html>
4° Créer une nouvelle page (testGoogleMap) avec ce gabarit.

5° Insérer dans son content l'appel de votre carte ex: {CGGoogleMaps map="1"}

6° Testez Smile
Répondre
#9

Superbe, beau boulot. Ca rend très bien

==> Merci de marquer [Résolu] dans le titre de votre message lorsque une solution a été trouvée <==

Mint 17
Répondre
#10

Bonjour,

Je suis entrain de tester les plugins s de JSquery, en particulier : (cluetip)

Mais je rencontre un prob pour afficher un contenu dans la fenêtre ajax.
çà fonctionne très bien lorsque je crée une page externe, le contenu s'affiche
http://cyberlot-web.lescigales.org/_duravel.html

Mais lorsque je fais une page avec un contenu et que je veux lier le contenu au script, çà bloque.
Le code:
Code :
<!-- use ajax/ahah to pull content from fragment.html: -->
  <p><a class="tips" href="toto.html" rel="toto.html" >show me the cluetip!</a></p>
J'ai regardé [url]http://calguy1000.com/Blogs/9/60/jquery … -news.html[/url] il doit falloir adapter l'url ou assigner le contenu de la page mais je vois pas comment...

-.
Répondre
#11

Jean le Chauve a écrit :Incontournable et génial, il vous permet d'utiliser Ajax très simplement et de faire de magnifiques effets.
Plusieurs plugins sont inclus.
Les démos de quelques plugins :
tablesorter
cluetip
form
lightbox
Fancybox
Autre possibilité avec les news : http://calguy1000.com/Blogs/9/60/jquery-...-news.html
Clique sur les plugins, ce sont des liens vers leur doc et donc http://plugins.learningjquery.com/cluetip/demo/
Pour ton problème, je ne comprend pas ce que tu veux dire et ton lien ne nous aide pas, on ne sait pas de quelle fenêtre tu parles.
Répondre
#12

bonjour Jean,

Je suis déjà allé sur le site du plugin
alors je vais essayer d'être plus clair

Sur ma page il y a deux liens qui utilise le plugin (cluetip)

Le premier (show me toto) utilise ume page externe qui n'a rien à voir avec CMS c'est une page (toto.html) qui me prouve que tout marche bien)

Le deuxième lien (show me dudu) est une page de contenu créé avec cms ms et là çà plante

maintenant si je mets une page qui n'existe pas , le plugin fonctionne en me donnant la réponse que le contenu n'a pu être trouvé.

Maintenant sur ce site je suis en url rewriting, j'ai donc mis dans le href toto.html ou dudu.html
dans le code (métadonnées pour cette page]
Code :
{JQueryTools action=incjs}
{literal}
<script src="jquery.hoverIntent.js" type="text/javascript"></script>{/literal} <!-- optional -->
{literal}<script src="jquery.cluetip.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
  $('a.tips').cluetip();
  
  $('#houdini').cluetip({
    splitTitle: '|', // use the invoking element's title attribute to populate the clueTip...
                     // ...and split the contents into separate divs where there is a "|"
    showTitle: false // hide the clueTip's heading
  });
});
</script>{/literal}
et dans la page
Code :
<p><a class="tips" href="toto.html" rel="toto.html" >show me the cluetip!</a></p>
et le troisieme lien (hoverIntent.js) qui fonctionne
Code :
<p><a id="houdini" href="houdini.html" title="|Houdini was an escape artist.|He was also adept at prestidigitation.">Houdini</a></p>
mais cet exemple est juste un lien (title) amélioré, la réponse est dans le script.

Ce que je ne comprends pas c'est que les quatre plugins sont normalement intégrés dans le module Jquery pour CMS MS mais je vois aussi que tu as du faire pas mal de modifs pour faire fonctionner fancybox.

-.
Répondre
#13

Commence déjà par travailler avec un code valide, c'est une perte de temps de déboguer avant.
Répondre
#14

bon, je réponds ici

Pour ce qui est de la validité, je crois avoir éclairci la chose mais le prob reste le même, je ne veux pas te faire perdre ton temps Jean, je pensais juste que tu pouvais avoir une idée la-dessus, je ne vais pas réexposer lle prob mais c'est certainement lié au lien ( h ref) vers la page à afficher dans la fenêtre ajax.

J'ajoute que le plugin "table sorter" lui fonctionne très bien.

-.
Répondre
#15

Non, car ça fonctionne sous chrome.
Répondre
#16

Re,

Alors tout est nickel donc, n'en parlons plus.

-.
Répondre
#17

Bonjour à tous,

tout d'abord merci pour ces explications qui permmettent grandement d'améliorer graphiquement un site web.
Pour tester, j'ai bien réussi à lancer la fancybox sur des images, mais je rencontre un soucis au niveau de la googlemap. J'ai bien suivi les différentes étapes mais je tombe sur une erreur 404 avec page non trouvée. Lorsque je remplace le href dans le content par une adresse externe (ex: http://www.site.com) il m'ouvre le site en question mais pas ds le popup.
Avez vous une idée sur l'origine du pbm ?
Peut on créer une page dans cmsms contenant texte et photo puis l'afficher dans une fancybox ?

Merci pour vos réponses.
Répondre
#18

Bonjour à tous,

après quelques bidouilles j'ai bien réussi à finaliser le tuto déposé par Jean Le Chauve au sujet du module JQuery. Merci encore pour ce tuto.

Je rencontre maintenant un nouveau soucis au niveau de la fancybox. Peut être êtes vous déjà tombé sur ce problème là :
Lors de l'affichage d'une page interne cmsms dans la fancybox, la navigation sur le site continue dans cette même fancybox. Lorsqu'on clique sur un des liens, il y aurait-il une option à paramétrer pour fermer la fancybox et revenir à la page appelée du site ?

Merci pour vos réponses...
Répondre
#19

Quand tu appelles une page dans la fancybox, cette dernière reprend la page entière et la navigation. Cette navigation continue à l'intérieur de la FC puisque c'est prévu pour (afin que les liens direction de la googlemap soient actifs).
Astuce : fais une copie de cette page (alias="nomPage_FC") et supprime les menus et tout autres choses qui ne doivent pas apparaître ou réagir. Ce sera cette page que tu appelleras dans ta box : voir n°3 de http://www.cmsmadesimple.fr/forum/viewto...9549#p9549
Répondre
#20

Bonjour !

Je suis en train d'installer (ou plutôt d'essayer d'installer ^^) ce système de FancyBox mais je bloque.

J'utilise CMS MS version 1.6.5 (nouvellement installé depuis 3 jours).

Alors, je me suis basé sur le post de Jean le Chauve : http://www.cmsmadesimple.fr/forum/viewto...9541#p9541

J'ai bien installé le module JQueryTools dans CMS MS. Et les exemples dans le dossier de DL (cf 1er post) fonctionnent en local.

Le résultat que j'obtiens :

- Image mini présente dans mon contenu
- Lien actif ves la grande image
- Image grande s'affiche en bas de ma page au lieu de se mettre dans une fenêtre "toute jolie" (^^)

J'ai fait différents tests mais là je sèche donc je viens vers vous pour avoir de l'aide Smile

Là où j'me pose des questions c'est sur l'arborescence de mon dossier modules/JQueryTools/ avec les fichiers .js et .css xD

Merci
@bientôt

Cyr'

EDIT : J'obtiens désormais un message d'erreur après le chargement de ma page :

Ligne : 33
Car : 5
Erreur : Cet objet ne gère pas cette propriété ou cette méthode
Code : 0
url : http://www.besnard-sa.fr/index.php?page=...quipements

Quand je suis sur cette page (avec l'erreur), mon image grande s'affiche dans la fenêtre IE et pas en popup "design".

RE-EDIT : j'ai résolu mon problème. J'ai tout effacé puis recommencé l'install et j'avais efectivement un soucis d'arborescence. Désolé pour le dérangement Sad

Super module en tout cas Big Grin
Répondre
#21

Bonjour,

je me permets un double post car mon problème a évolué.

Le système avec affichage d'une image à chaque fois fonctionne très bien lien

Maintenant, je voudrais pouvoir aller sur toutes les images de la page en navigant dans la fancybox.

J'ai vu sur l'exemple (dossier Example de l'archive) que c'est faisable mais je ne parviens pas à le transplanter dans CMSMS Sad

Faut-il changer le contenu dans Metadonnées ? faut-il changer le code HTML ?

Merci
@+

Cyr'
Répondre
#22

Étudie l'api de FancyBox dans le lien donné au premier post.
Répondre
#23

J'ai réussi ^^

J'ai ajouté $("a").fancybox(); dans la fonction (metadonnées de la page) et mis rel="group" sur chaque image.

Merci Smile
Répondre
#24

Bonjour isa46, est tu parvenu à résoudre le problème avec l'appel aux pages internes de CMSMS et cluetip.

Je suis confronté à ce type de problème. Avec une page externe cela fonctionne parfaitement, mais pas avec une page CMSMS.

J'ai essayé d'utiliser un gabarit vide et un tas de manips, mais cela ne change rien.

Mon prob c'est que j'ai besoin d'ouvrir une fenêtre avec cluetip contenant du code :

Code :
{tellafriend_form emailsubject="Un article très intéressant sur mon site !" captcha="true"}
J'ai alors pensé faire appel à ce code à partir d'un fichier html externe, mais je n'ai pas trouvé de solution non plus.

Quelqu'un à t'il une idée?

Merci d'avance

Smile cmsms 1.5.2 -> 1.11.7
Répondre
#25

Les modifications dans les fichiers du module ne sont plus nécessaires. Le tutoa été mis à jour
Répondre


Atteindre :


Utilisateur(s) parcourant ce sujet : 3 visiteur(s)