BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Éditeur d'éléments
  Nouveaux messages Nouveaux messages Fil RSS  - carrousel texte / image
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

carrousel texte / image

 Répondre Répondre Page  <12
Auteur
Message
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 13 Jan 2015 à 13:54
Ouais..

D'ailleurs (pour Bridet) je n'ai jamais utilise BonPatron pour écrire sur ce forum. Je l'utilise surtout pour corriger les fautes dans les textes envoyés par des clients français. Parce que les français, eux, ils n'aime pas s'arracher les cheveux, ils sabotent les règles tout simplement (ce sont ses règles a eux, donc ils peuvent faire ce qu'ils veulent).

P.S. Heuresement Bridet est belge et non francaise.
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 13 Jan 2015 à 14:04
Message posté par Dmit OE Dmit OE a écrit:

Il semble que c'est déjà présenté mais je ne trouve pas. Effectivement si quelqu'un peut écrire un tutoriel ce sera sympa..

Effectivement, Brolysan m'avait tout bien expliqué à l'époque mais quand je fais une recherche sur mon nom et il y a un an (il m'a conseillée aux alentours de mars je dirais) par exemple, ça ne remonte pas si loin.

En gros il faut faire ceci : http://www.menucool.com/javascript-image-slider#view2 ;-)
pour une traduction approximative ouvrir dans chrome
voici une page où il n'y a qu'un slider view-source:http://vervoz.be/photos-condroz.htm ça aide à voir l'essentiel
pour le script il ne faut pas sélectionner javascript mais autre script
la galerie est placée à la main à la source du site dans un directory "galerie" via explorateur windows
j'ai également ajouté les(nom d') images à la main dans le script de la page

Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 13 Jan 2015 à 14:24
bravo Bridet!!! 
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 13 Jan 2015 à 16:20
Bonjour à tous,

Voila ce qui ressortait des essais que j'avais fait avec le script de brolysan, c'est peut être ce que recherche "lableue"

Image slider 700px 

Bon, première chose, téléchargez le script et le décompresser. Le dossier se compose des éléments suivants : Dossier "images" et "thèmes" - 8 pages démo en html - 1 fichier "généric" en css.

Opérations à effectuer pour un slider :

1) Pour commencer, il faut copier les 2 dossiers "images" et "thèmes", ainsi que le fichier "generic.css" dans ton projet dans un dossier au nom que tu souhaite, sur mon site "monSlider

2) Ensuite, sur la page (ou sur le calque) où tu veux mettre le slider, tu vas commencer par :

- créer un bloc de code source type : HTML et comme position : Header dedans, tu mets le code ci dessous.

<link href="monSlider/themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />

    <script src="monSlider/themes/1/js-image-slider.js" type="text/javascript"></script>

    <link href="monSlider/generic.css" rel="stylesheet" type="text/css" />

- créer un bloc de code visuel dedans, tu vas mettre le code (ci dessous) qui va faire apparaître les images. 

EXEMPLE à modifier avec les infos de la 2éme partie.

<div id="sliderFrame">

       <div id="slider">

            <a href="http://forum.openelement.com/fr/default.asp?C=7&title=h1openelement-h1" target="_blank">

              <img src="nomquetuveux/images/image-slider-1.jpg" alt="Vive OpenElement" /></a>

          <img src="nomquetuveux/images/image-slider-2.jpg" alt="" />

          <img src="nomquetuveux/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />

          <img src="nomquetuveux/images/image-slider-4.jpg" alt="#htmlcaption" />

          <img src="nomquetuveux/images/image-slider-5.jpg" />

       </div>

       <div id="htmlcaption" style="display: none;">

            <em>HTML</em> caption. Link to <a href="http://forum.openelement.com/fr/default.asp?C=7&title=h1openelement-h1/">OpenElement</a>

        </div>

    </div>

Tu sauvegardes ta page, et tu peux tester en local.

Deuxième partie, comprendre le code et pouvoir le modifier à ta guise.

- si tu veux simplement des images qui défilent, sans "lien", ni "caption" (texte par dessus l'image), tu ne mets que ceci : (textes à adapter)

<img src="monSlider/images/image-slider-2.jpg" alt="" />

- si tu veux (comme sur le premier exemple), un lien sur l'image et un caption (du texte par dessus l'image) en bas de l'image, tu mets ceci :

<a href="http://forum.openelement.com/fr/default.asp?C=7&title=h1openelement-h1" target="_blank">

              <img src="monSlider/images/image-slider-1.jpg" alt="Vive OpenElement"></a>

- si tu veux un caption sur l'image mais aucun lien actif, tu mets ceci :

<img src="monSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />

 - si tu veux un lien sur le caption uniquement, tu mets ceci :

<img src="monSlider/images/image-slider-4.jpg" alt="#htmlcaption" />

<div id="htmlcaption" style="display: none;">

            <em></em><a href="http://forum.openelement.com/fr/default.asp?C=7&title=h1openelement-h1/">OpenElement</a>.

        </div>

Pour que ca marche en ligne, il te faudra remettre entièrement ton site en ligne, soit avec OE, soit en ftp.

 

 

Pour mettre en plus gras les caption (textes au bas des images) dans => monSlider => "generic.css"

.code

{

    border: dashed 1px #BCBCCB; padding:8px 12px; background-color: #F3F3F9; white-space:pre; font-family:"Courier New", Georgia;

    font-size:12px; font-weight:900; margin:6px 0;overflow:auto;

}



Edité par Maurice306 - 13 Jan 2015 à 16:21
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
 Répondre Répondre Page  <12
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.094 secondes.