Instalation d'un slider

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Instalation d'un slider

Message par laurent11 le Dim 14 Oct 2012 - 11:36

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 Wink

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 Wink

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 Wink avec des images cliquable en plus Wink

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


Dernière édition par laurent11 le Mar 16 Oct 2012 - 15:08, édité 1 fois

laurent11
****

Masculin
Messages : 382
Inscrit(e) le : 21/05/2005

http://www.gamers-xboxone.com
laurent11 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Instalation d'un slider

Message par Artdrock le Dim 14 Oct 2012 - 11:48

Bonjour ,

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

Artdrock
****

Messages : 274
Inscrit(e) le : 13/09/2011

http://quentoch-team.forum.st/forum
Artdrock a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Instalation d'un slider

Message par laurent11 le Dim 14 Oct 2012 - 11:55

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)


laurent11
****

Masculin
Messages : 382
Inscrit(e) le : 21/05/2005

http://www.gamers-xboxone.com
laurent11 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Instalation d'un slider

Message par Artdrock le Dim 14 Oct 2012 - 12:05

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>

Artdrock
****

Messages : 274
Inscrit(e) le : 13/09/2011

http://quentoch-team.forum.st/forum
Artdrock a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Instalation d'un slider

Message par laurent11 le Dim 14 Oct 2012 - 14:24

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 reflexion

laurent11
****

Masculin
Messages : 382
Inscrit(e) le : 21/05/2005

http://www.gamers-xboxone.com
laurent11 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Instalation d'un slider

Message par Artdrock le Dim 14 Oct 2012 - 14:56

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

Artdrock
****

Messages : 274
Inscrit(e) le : 13/09/2011

http://quentoch-team.forum.st/forum
Artdrock a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Instalation d'un slider

Message par laurent11 le Dim 14 Oct 2012 - 15:32

Je te remercie, mais la j'ai encore du mal Confused 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 ... Shocked pourtant le tuto est des plus simple ...

laurent11
****

Masculin
Messages : 382
Inscrit(e) le : 21/05/2005

http://www.gamers-xboxone.com
laurent11 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Instalation d'un slider

Message par laurent11 le Dim 14 Oct 2012 - 16:08

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 ?

laurent11
****

Masculin
Messages : 382
Inscrit(e) le : 21/05/2005

http://www.gamers-xboxone.com
laurent11 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Instalation d'un slider

Message par Artdrock le Dim 14 Oct 2012 - 16:54

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

Artdrock
****

Messages : 274
Inscrit(e) le : 13/09/2011

http://quentoch-team.forum.st/forum
Artdrock a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Instalation d'un slider

Message par laurent11 le Dim 14 Oct 2012 - 17:35

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

laurent11
****

Masculin
Messages : 382
Inscrit(e) le : 21/05/2005

http://www.gamers-xboxone.com
laurent11 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum