Instalation d'un slider

[laurent11]

Bonjour,

- l'URL du forum : http://team-vips.com/forum
- la version de votre forum : phbb2
- une capture d'écran du problème : aucune
- votre statut sur le forum : fondateur
- si vous avez modifié des templates : index_body / index_box / overall_footer_begin / overall_footer_end / overall_header / viewtopic_body
- si vous avez du CSS personnalisé: oui
- votre ou vos navigateur(s). IE, Google, Mozila, etc ...


Je désespère

Comme vous voyez j'ai déjà pas mal de modif sur mon forum, mais pour installé un slider, la je bug.

J'ai essayé de suivre un "tuto sur le nivo-slider" découvert ici, puis d'autres sur différent site web, mais rien de rien, la je plante complet et donc je fait appel à vous pour tout reprendre du début

J'ai essayé le Rhinoslider : lien et explication simple ici je pense ne pas mettre les codes au bon endroit ...

Bref, sa fait quelques semaine que je rame, et j'aimerai remplacé l'horreur visible sous le menu de mon forum avec des images cliquable en plus

Merci d'avance pour toutes les infos et aides que vous pourrez m’apporte.

[Artdrock]

Bonjour ,

Un slider simple et facilement modifiable
http://www.devthought.com/2008/06/11/barackslideshow-an-elegant-lightweight-slideshow-script/

[laurent11]

Bonjour,

Merci, pour votre lien, ce slider est sympa, mais je n'ai pas vraiment trouvé comment le paramétré (ajout de mes images) ou encore ou mettre mes liens (images cliquable avec lien direct vers un sous-forum)

[Artdrock]

Les paramètres sont dans le fichiers source/barrack.css

Les images dans demo/index.html

Pour mettre une image avec un lien voila un exemple :
Regarde sur mon site le slide que j'ai fais avec le barrackSlideShow
http://quentoch-team.forum.st/forum

Code:

<li><a href="http://www.battlefieldheroes.com/forum/showthread.php?tid=379743" target=_blank>
    <img src="http://cdn.battlefieldheroes.com/uploads/1/BFH-F-Sale-2012-10-12_fr.jpg"
    alt="Melbourne" title="" />
    </a></li>

[laurent11]

J'ai récup les fichiers JS : Que je doit mettre dans un script ?

Code:


/*
Script: BarackSlideshow.js
   Lightweight slideshow script, based on Fx.MorphList

   License:
      MIT-style license.

   Authors:
      Guillermo Rauch
*/

var BarackSlideshow = new Class({
 
  Extends: Fx.MorphList,
 
  options: {/*
    onShow: $empty,*/
    auto: false,
    autostart: false,
    autointerval: 2000,
    transition: 'fade',
    tween: { duration: 700 }
  },
 
  initialize: function(menu, images, loader, options){
    this.parent(menu, options);
    this.images = $(images);
    this.imagesitems = this.images.getChildren().fade('hide');
    $(loader).fade('in');
    new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
      this.loaded = true;     
      $(loader).fade('out');
      if (this.current) this.show(this.items.indexOf(this.current));
      else if (this.options.auto && this.options.autostart) this.progress();
    }.bind(this) });
    if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
  },
 
  auto: function(){
    if (!this.options.auto) return false;
    $clear(this.autotimer);
    this.autotimer = this.progress.delay(this.options.autointerval, this);
  },
           
  onClick: function(event, item){
    this.parent(event, item);
    event.stop();
    this.show(this.items.indexOf(item));
    $clear(this.autotimer);
  },
 
  show: function(index) {
    if (!this.loaded) return;
    var image = this.imagesitems[index];   
      if (image == this.curimage) return;
    image.set('tween', this.options.tween).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide');
      image.getElement('img').setStyle('display', 'block');
    var trans = this.options.transition.run(null, this).split('-');
    switch(trans[0]){
      case 'slide':
        var dir = $pick(trans[1], 'left');
        var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
        image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0);
        break;
      case 'fade': image.fade('in'); break;
    }
    image.get('tween').chain(function(){
      this.auto();
      this.fireEvent('show', image);
    }.bind(this));
    this.curimage = image;
    this.setCurrent(this.items[index])
    this.morphTo(this.items[index]);
      return this;
  },
 
  progress: function(){
    var curindex = this.imagesitems.indexOf(this.curimage);
    this.show((this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0);
  }
 
});


Le fichier CSS : Que je doit configuré

Code:


#slideshow * { margin: 0; padding: 0; }
#slideshow { background: url('images/bg_shadow.gif') no-repeat top; position: relative; padding: 14px 0 15px; width: 603px; height: 306px; }
#slideshow #menu, #slideshow #pictures, #slideshow #loading { position: absolute; }
#slideshow #loading { background: url('images/spinner.gif'); display: block; top: 158px; left: 205px; text-indent: -5000px; width: 24px; height: 24px; visibility: hidden; z-index: 5; }
#slideshow #pictures { background: url('images/bg.jpg'); width: 437px; height: 277px; left: 0; overflow: hidden; }
#slideshow #pictures li { display: block; position: absolute; top: 0; width: 437px; }
#slideshow #pictures li img { display: block; position: relative; bottom: 0; }
#slideshow #menu { background: url('images/bg_side.jpg'); list-style-type: none; width: 166px; height: 257px; right: 0; padding-top: 20px; }
#slideshow #menu li { display: block; z-index: 1000; position: relative; zoom: 1; }
#slideshow #menu li a { display: block; font: 11px "Lucida Grande", "Verdana"; text-decoration: none; padding: 7px 0 7px 28px; z-index: 1000; color: #ccc; line-height: 14px; vertical-align: middle; zoom: 1; }
#slideshow #menu li a:focus { outline: 0; }
#slideshow #menu li a:hover { color: #fff; }
#slideshow #menu li.current a { font: 15px "Georgia"; color: #fff; padding: 5px 0 5px 28px; line-height: 18px; }
#slideshow #menu li.background { background: url('images/arrow.gif') no-repeat left center; position: absolute; font-size: 1px; height: 7px; width: 4px; z-index: 5; }


La ok, mais ensuite pour mettre les images (elles sont déjà héberger) je change donc l'adresse et lien via le code que tu me fourni, mais ce code je le place ou ?

J'avoue être plus que perdu

[Artdrock]

Les images sont à mettrent dans demo/index.html

Le mieux c'est d’héberger tout le répertoire via un FTP
Moi comme je suis sur Free je l'ai mis dessus et j'ai donc ça :
http://artdrock.free.fr/Slide/Demo/index.html

Il suffit ensuite de mettre le lien sur la page d'accueil

[laurent11]

Je te remercie, mais la j'ai encore du mal comme toi je suis chez Free, et j'ai héberger mais images, mais j'arrive à rien.

Du coup sa fait une petite heure que je teste un menu accordéon (tuto forumactif) et la j'arrive à l'affiché, mais il ne fonctionne pas non plus ... pourtant le tuto est des plus simple ...

[laurent11]

retour au menu (le Brack)

tu mes ou ce code :

Code:


        <li><a href="http://www.battlefieldheroes.com/forum/showthread.php?tid=379743" target=_blank>
            <img src="http://cdn.battlefieldheroes.com/uploads/1/BFH-F-Sale-2012-10-12_fr.jpg"
            alt="Melbourne" title="" />
            </a></li>


Et sinon, quand tu dit "héberger tout le répertoire via un FTP" tu veux dire tout sur ma page free puis faire un genre d'ifram ?

[Artdrock]

tu héberge tout le répertoire Barrack
Celui que tu telecharge là
http://devthought.com/wp-content/moogets/BarackSlideshow/BarackSlideshow.zip

Les fichiers à modifier sont
--> demo/index.html pour les images,liens,menu
--> source/barrack.css pour la config du slide

L'exemple de code que j'ai mis ce met donc dans le fichier index.html que tu ouvre avec Notepad , par defaut c'est des images de capitales

[laurent11]

Pas tout suivi, mais je test le truc mardi, car avant pas trop de temps