[RESOLU] souci intégration script jquery

nicomaxnicomax Member
avril 2013 modifié dans Modifications
Salutatous,

Ma config : PluXml 5.1.7 + Thème Mystique dernière version

Dans une page statique j'essaie d'intégrer sans succès ce script jquery :
http://www.i-services.com/scripts-jquery.php?script=mosaic-gallery

Si je teste dans une page html toute simple (hors PluXml) en local ou en ligne, ça fonctionne parfaitement. :)

Mais au sein de PluXml les images ne s'affichent pas ! :(
A la place j'ai un blanc de 300x300 pixels, en fait la taille des images à afficher.

Voici comment j'ai intégrer le script :

1 ///////////
J'ai tout d'abord uploadé mes 10 images (01.jpg ... 10.jpg) par le biais de l'onglet "Médias" de l'admin,
donc dans le dossier data / images /

2 ///////////
Puis dans le dossier data j'ai créé un dossier "javascript_perso" dans lequel j'ai placé les deux fichiers suivants :
galleryc.js + galleryc.css (cf contenu plus bas dans ce message)

3 ///////////
Ensuite dans le fichier header.php du thème j'ai ajouté ces lignes dans le head :
[== JavaScript ==]
<script type="text/javascript" src="http://www.monsite.com/data/javascript_perso/galleryc.js"></script>

<script language="javascript">
		$(document).ready(function() {
			$('#gallery').imgg({
			images: ['http://www.monsite.com/data/images/01.jpg', 'http://www.monsite.com/data/images/02.jpg', 'http://www.monsite.com/data/images/03.jpg', 'http://www.monsite.com/data/images/04.jpg', 'http://www.monsite.com/data/images/05.jpg', 'http://www.monsite.com/data/images/06.jpg', 'http://www.monsite.com/data/images/07.jpg', 'http://www.monsite.com/data/images/08.jpg', 'http://www.monsite.com/data/images/09.jpg', 'http://www.monsite.com/data/images/10.jpg']
		});
	});
	</script>

<link rel="stylesheet" href="http://www.monsite.com/data/javascript_perso/galleryc.css" />

4 ///////////
Et enfin dans l'onglet "Pages statiques" de l'admin, j'ai cliqué sur "Éditer" pour ma page statique et y est placé le code suivant :
[== HTML ==]
<div id="gallery"></div>

Pour info, voici le contenu du fichier galleryc.css :
[== HTML ==]
#gallery { width: 300px; height: 300px; margin: 0 auto; position: relative; }
#gallery .tile { z-index: 10; }
#gallery .gridY { position: absolute; left: 0; height: 1px; border-top: 1px solid #ccc; z-index: 100; }
#gallery .gridX { position: absolute; top: 0; width: 1px; border-left: 1px solid #ccc; z-index: 100; }

Et voici le contenu du fichier galleryc.js :
[== JavaScript ==]
(function() {
  var generateRand;

  generateRand = function(min, max) {
    var el, found, rand, _i, _len, _results;
    _results = [];
    while (_results.length < max) {
      rand = Math.ceil(Math.random() * max);
      found = false;
      for (_i = 0, _len = _results.length; _i < _len; _i++) {
        el = _results[_i];
        if (el === rand) {
          found = true;
          break;
        }
      }
      if (!found) {
        _results.push(rand);
      } else {
        continue;
      }
    }
    return _results;
  };

  $.fn.imgg = function(options) {
    var animate, arr, currentImage, duration, el, h, i, idx, images, imgNext, index, interval, j, settings, start, w, x, y, _cols, _ref, _rows;
    settings = {
      _rows: 3,
      _cols: 3,
      anim: "fadein",
      duration: 300,
      height: 300,
      width: 300
    };
    if (options != null) $.extend(settings, options);
    if ((options != null) && (options.images != null)) {
      if (typeof options.images !== "Array") {
        if (options.images.length <= 0) {
          alert("Please provide images");
          return false;
        }
      }
    }
    _ref = [0, 0, 0, 0, 0, 1], i = _ref[0], j = _ref[1], x = _ref[2], y = _ref[3], index = _ref[4], idx = _ref[5];
    _rows = settings._rows, _cols = settings._cols, duration = settings.duration, images = settings.images;
    h = settings.height / _cols;
    w = settings.width / _rows;
    currentImage = images[0];
    el = $('<div id="img_g"/>').css('background-image', "url(" + currentImage + ")");
    this.append(el);
    el.height(settings.height).width(settings.width).css('position', 'relative');
    while (i++ < _rows) {
      while (j++ < _cols) {
        el.append($('<div id=id_' + i + '_' + j + ' class="tile" />').css('left', w * (j - 1)).css('top', h * (i - 1)).css('background-position', (-(w * (j - 1))) + 'px ' + -(h * (i - 1)) + 'px'));
      }
      j = 0;
    }
    el.children().css('position', 'absolute').height(h).width(w);
    i = j = 0;
    while (i++ < _rows) {
      this.append($('<div class="gridY" />').css('top', y = y + h).width(settings.width));
    }
    while (j++ < _cols) {
      this.append($('<div class="gridX" />').css('left', x = x + w).height(settings.height));
    }
    arr = generateRand(0, _rows * _cols);
    interval = "";
    animate = function() {
      el.children(":nth-child(" + arr[index] + ")").fadeIn('slow');
      index++;
      if (index >= arr.length) {
        index = 0;
        clearInterval(interval);
        setTimeout(start, 1000);
      }
      return true;
    };
    imgNext = function() {
      el.css('background-image', "url(" + currentImage + ")");
      el.children('.tile').hide();
      currentImage = images[idx++];
      return el.children().css('background-image', "url(" + currentImage + ")");
    };
    start = function() {
      imgNext();
      interval = setInterval(animate, duration);
      if (idx >= images.length) {
        idx = 0;
        arr = generateRand(0, _rows * _cols);
        return true;
      }
    };
    setTimeout(start, 1000);
    return this;
  };

}).call(this);

Merci d'avance de vos lumières
Nico

Réponses

  • i M@Ni M@N Member
    Hello.

    T'as essayé en supprimant h t t p://www.monsite.com/ : 
    [== HTML ==]
<script type="text/javascript" src="data/javascript_perso/galleryc.js"></script>

<script language="javascript">
		$(document).ready(function() {
			$('#gallery').imgg({
			images: ['data/images/01.jpg', 'data/images/02.jpg', 'data/images/03.jpg', 'data/images/04.jpg', 'data/images/05.jpg', 'data/images/06.jpg', 'data/images/07.jpg', 'data/images/08.jpg', 'data/images/09.jpg', 'data/images/10.jpg']
		});
	});
	</script>

<link rel="stylesheet" href="data/javascript_perso/galleryc.css" />
  • StéphaneStéphane Member, Former PluXml Project Manager
    Salut
    Si dans ton navigateur tu tapes l'url http://www.monsite.com/data/javascript_perso/galleryc.js est-ce que tu vois bien le contenu du fichier galleryc.js?

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • nicomaxnicomax Member
    Salut Stéphane,

    oui je vois bien le contenu du fichier galleryc.js quand je tape l'url
    http://www.monsite.com/data/javascript_perso/galleryc.js

    Nico
  • StéphaneStéphane Member, Former PluXml Project Manager
    As-tu la réécriture d'url activée (essaye avec et sans) ?

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • StéphaneStéphane Member, Former PluXml Project Manager
    Dans le code c'est normal le double caractère g dans cette ligne
    $('#gallery').imgg({
    ça devrait pas etre img ?

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • i M@Ni M@N Member
    @Stéphane, non c'est normal si tu regardes http://www.i-services.com/scripts-jquery.php?script=mosaic-gallery la fonction s'appelle bien imgg();

    @nicomax tu m'as pas répondu : )
  • nicomaxnicomax Member
    Bonjour iM@N,

    Je viens d'essayer en supprimant h t t p://www.monsite.com/

    ça ne change rien.

    Nico
  • nicomaxnicomax Member
    Stéphane,

    Activée ou pas, la réécriture d'url ne change rien ! :(

    Nico
  • Jerry WhamJerry Wham Member
    avril 2013 modifié
    Ne vaudrait-il pas mieux placer ces fichiers dans le dossier thèmes/le-theme-que-tu-utilises?

    Et l'appel jquey, "où qu'il est" dans ta page ?

    Tu n'as pas une page de test sur laquelle on pourrait se rendre pour mieux se rendre compte de ce qui se passe ? Des fois, il suffit juste de lire ce que raconte la console...
  • nicomaxnicomax Member
    Bonjour Jerry,

    Dans le fichier header.php du thème, j'ai ajouté cette ligne dans le head : 
    [== JavaScript ==]
<script type="text/javascript" src="http://www.monsite.com/plugins/jquery/jquery.min.js"></script>

    mais ça marche toujours pô 8.(

    Nico
  • FrédéricFrédéric Member
    Ca donne quoi si tu applique la modification sur le thème par défaut ?
  • nicomaxnicomax Member
    Bonjour Frédéric,

    J'ai appliqué le thème par défaut... et bé c'est pareil... nada...

    Pfff ch'commence à désespérer là.

    Nico
  • nicomaxnicomax Member
    Jerry,

    Dans le fichier header.php il y a déjà cette ligne qui appelle jquery : 
    [== JavaScript ==]
<script type="text/javascript" src="<?php $plxShow->template(); ?>/js/jquery.js"></script>

    Donc à priori ça sert à rien que je rajoute cette ligne : 
    [== JavaScript ==]
<script type="text/javascript" src="http://www.monsite.com/plugins/jquery/jquery.min.js"></script>

    Nico
  • nicomaxnicomax Member
    Jerry Wham a écrit:
    Ne vaudrait-il pas mieux placer ces fichiers dans le dossier thèmes/le-theme-que-tu-utilises?

    J'ai placé le fichier galleryc.js dans themes/theme-mystique/js/
    puis le fichier galleryc.css dans themes/theme-mystique/css/

    puis dans le fichier header.php fait le pointage comme suit :
    [== JavaScript ==]
<script type="text/javascript" src="http://www.monsite.com/themes/theme-mystique/js/galleryc.js"></script>

<link rel="stylesheet" href="http://www.monsite.com/themes/theme-mystique/css/galleryc.css" />

    Le problème est toujours là.

    Nico
  • Jerry WhamJerry Wham Member
    tu n'as pas une page en ligne à nous montrer? ça sera beaucoup plus simple pour t'aider
  • FrédéricFrédéric Member
    avril 2013 modifié
    Allez c'est cadeaux,

    Le fichier slider.zip à décompresser dans le dossier de ton thème (respecte bien l'arborescence des dossiers !).

    Dans l'admin, créer une page statique du Nom que tu veux et clique sur 'modifier la liste des pages statiques'.

    Ensuite édite-la et ajoute en contenu:
    <div id="gallery"></div>

    Comme template sélectionne le fichier 'static-slider.php'

    Enregistre cette page et admire.

    >Démo<
  • nicomaxnicomax Member
    Frédéric,

    J'ai appliqué ta méthode à mon thème Mystique et ça fonctionne parfaitement :) :) :)

    Je commence bien la journée :cool:
    Vraiment un grand grand merci :)
    Nico
Connectez-vous ou Inscrivez-vous pour répondre.