oscss et intégration de noobslide

Messagepar djedai » Lun 01 Déc 2008, 12:05

Bonjour,

Je suis entrain d'intégrer un slide sur mon site oscss sur la page d'accueil :
http://www.efectorelativo.net/laboratory/noobSlide/

J'ai modifié dans includes/languages/french le fichier index.php en mettant la partie html du script à savoir :
Code: Tout sélectionner
define('TEXT_MAIN', '<!-- SAMPLE 1 -->
<h2>Sample 1</h2>
<div class="sample">
  <div class="mask1">
   <div id="box1">
     <span><img src="img1.jpg" alt="Photo" /></span>
     <span><img src="img2.jpg" alt="Photo" /></span>
     <span><img src="img3.jpg" alt="Photo" /></span>

     <span><img src="img4.jpg" alt="Photo" /></span>
     <span><img src="img5.jpg" alt="Photo" /></span>
     <span><img src="img6.jpg" alt="Photo" /></span>
     <span><img src="img7.jpg" alt="Photo" /></span>
     <span><img src="img8.jpg" alt="Photo" /></span>
   </div>
  </div>
</div>


<!-- SAMPLE 4 -->
<h2>Sample 4</h2>
<div class="sample">
  <div class="mask3">
   <div id="box4">

     <div>
       <h3>1. Lorem ipsum dolor sit amet</h3>
        <img src="img1.jpg" alt="Photo" />

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
       <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
     </div>

      <div>
       <h3>2. Nullam porttitor tortor et sem</h3>
        <img src="img2.jpg" alt="Photo" />
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>

       <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p>
        <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
     </div>

      <div>
       <h3>3. Aenean consectetuer nibh sedt</h3>
       <img src="img3.jpg" alt="Photo" />
        <ul>

          <li>Duis consequat laoreet libero.</li>
         <li>Nullam scelerisque porta arcu.</li>
         <li>Praesent ut tortor quis nunc vehicula interdum.</li>
          <li>Cras ultrices venenatis justo.</li>
         <li>Duis eu ligula at justo tempus varius.</li>
         <li>Vivamus mattis ante et arcu.</li>

         <li>Nulla eleifend dignissim neque.</li>
          <li>Donec ut elit vel nisi mollis volutpat.</li>
        </ul>
     </div>

      <div>
       <h3>4. Pellentesque ac dolor</h3>
       <img src="img4.jpg" alt="Photo" />

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
       <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
     </div>

      <div>
       <h3>5. Pellentesque ac dolor</h3>
       <img src="img5.jpg" alt="Photo" />
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>

       <p>Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
      </div>

      <div>
       <h3>6. Lorem ipsum dolor sit amet</h3>
        <img src="img6.jpg" alt="Photo" />
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
       <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>

     </div>


      <div>
       <h3>7. Nullam porttitor tortor et sem</h3>
        <img src="img7.jpg" alt="Photo" />
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
       <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p>
        <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>

     </div>

      <div>
       <h3>8. Aenean consectetuer nibh sedt</h3>
       <img src="img8.jpg" alt="Photo" />
        <ul>
          <li>Duis consequat laoreet libero.</li>
         <li>Nullam scelerisque porta arcu.</li>

         <li>Praesent ut tortor quis nunc vehicula interdum.</li>
          <li>Cras ultrices venenatis justo.</li>
         <li>Duis eu ligula at justo tempus varius.</li>
         <li>Vivamus mattis ante et arcu.</li>
         <li>Nulla eleifend dignissim neque.</li>
          <li>Donec ut elit vel nisi mollis volutpat.</li>

        </ul>
     </div>

    </div>
  </div>
  <h4>Show: <span id="info4"></span></h4>
 <p class="buttons" id="handles4">
   <span>1. Uno</span>

   <span>2. Dos</span>
   <span>3. Tres</span>
    <span>4. Cuatro</span>
    <span>5. Cinco</span>
   <span>6. Seis</span>
    <span>7. Siete</span>

   <span>8. Ocho</span>
  </p>
</div>');

Ensuite dans templates/osCSS/template.php
J'ai rajouté
Code: Tout sélectionner
<!--script pour noobslide il s'affiche juste sur la pages index.php -->
 <?php $ser=$_SERVER['REQUEST_URI'];
 if ($ser =="/~cphoceen/index.php" or $ser=="/~cphoceen/")
 {echo'
 
<script type="text/javascript" src="mootools-1.2-core.js"></script>
 <script type="text/javascript" src="_class.noobSlide.packed.js"></script>
 <!--banniere-->
<script type="text/javascript">
  window.addEvent('domready',function(){
    //SAMPLE 1 (auto, every 5 sec)
    var nS1 = new noobSlide({
     box: $('box1'),
     items: [0,1,2,3],
     size: 480,
      autoPlay: true
    });
 

    //SAMPLE 4 (walk to item)
   var nS4 = new noobSlide({
     box: $('box4'),
     items: $$('#box4 div'),
     size: 480,
      handles: $$('#handles4 span'),
      onWalk: function(currentItem,currentHandle){
        $('info4').set('html',currentItem.getFirst().innerHTML);
        this.handles.removeClass('active');
       currentHandle.addClass('active');
     }
   });

   
    //more "previous" and "next" buttons
    nS8.addActionButtons('previous',$$('#box8 .prev'));
   nS8.addActionButtons('next',$$('#box8 .next'));
   //more handle buttons
   nS8.addHandleButtons(handles8_more);
    //walk to item 3 witouth fx
   nS8.walk(3,false,true);

 });
 </script>';}?>

J'ai bien sur aussi rajouté les styles dans le fichier sample.css

A la suite de ça, en allant sur ma page d'accueil, il ne se passe rien (l'effet ne fonctionne pas et il est impossible de jongler entre deux images/textes).

J'ai testé le même script dans une page à la racine du site et là tout fonctionne.

y a t'il des incompatibilité avec jquery du plugin fancy ou une histoire de cache ?
merci
jérôme
djedai
Membre actif
 
Messages: 25
Inscription: Dim 26 Oct 2008, 14:03

Messagepar j4k » Lun 01 Déc 2008, 13:10

il est fort possible qu'il y ai une incompatibilité avec jquery, pour s'en assurer, il suffit de désactiver le plugin fancybox.

Je pense que ce genre de script existe aussi autour de jquery, le mieu serait d'adapter un script jquery, de façon à être sur de la compatibilité.
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar djedai » Lun 01 Déc 2008, 15:15

Après test c'est bien un problème de compatibilité!
je vais intégrer un carousel compatible jquery!
Il sera bientôt dispo sous forme de plugin oscss
Merci de tes conseils j4k
djedai
Membre actif
 
Messages: 25
Inscription: Dim 26 Oct 2008, 14:03

Messagepar cynic- » Mar 24 Mar 2009, 12:19

Salut DJEDAI, du nouveau du côté de ce plugin ? Il fonctionne, peux-tu nous donner un lien à zieuter ? :)
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04

Messagepar djedai » Dim 29 Mar 2009, 17:10

salut !
Je t'envoie l'url du site pour que tu puisses le voir en fonctionnement.
Comme c'est une url avant redirection sur le nom de domaine, je peux que te la donner en privée...
je te la mail et si ca te plais je te donnerai les sources
djedai
Membre actif
 
Messages: 25
Inscription: Dim 26 Oct 2008, 14:03

Messagepar cynic- » Lun 30 Mar 2009, 12:02

Merci beaucoup je vais voir ça ^^
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04


Retourner vers Developpement

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron