IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

difficultés à mettre en place un Slider JQuery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2012
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2012
    Messages : 7
    Par défaut difficultés à mettre en place un Slider JQuery
    Bonsoir/Bonjour à vous,

    Étant loin d'être calé dans le domaine des langages informatiques, je réalise un site Web (qui n'a rien d'extraordinaire mais qui me permet de comprendre comment réaliser une page web et découvrir toutes les possibilités qu'elle peut proposer), j'éprouve des difficultés à mettre en place un Slider JQuery.

    En effet, je voulais à la base afficher toutes mes images sur une page HTML les unes à la suite des autres mais par soucis de praticité et par choix, j'ai préféré opter pour un Slider Jquery qui permet en cliquant sur un ou plusieurs boutons de faire défiler les images. Seulement, n'étant pas très perspicace et malin (je ne connais pas le langage Javascript), j'éprouve de grosses difficultés dans la mise en place du Slider. Parmi les nombreux Slider proposés, j'en ai donc choisi un qui puisse afficher sans prévisualisation miniature les images en grandeurs nature, ce pourquoi j'ai choisi Supersized mais j'ai du mal à le mettre en place sur ma page HTML.

    Je télécharge donc le Slider au format .RAR que je décompresse dans un répertoire et je me trouve face à un ensemble de fichiers qui permettent le fonctionnement du slider, mais je ne sais pas quoi faire après. Il va vraiment dans mon intérêt de comprendre comment à partir de ce plugin téléchargé, on peut arriver à "installer" le slider en faisant appel au Javascript sur ma page HTML.

    Je rechercherais donc quelqu'un qui pourrait m'expliquer précisément "de A à Z", comment installe-t-on un slider, en prenant l'exemple de Supersized jusqu'à son intégration et sa fonctionnalité dans le code HTML. Je ne me contenterais pas de recopier bêtement le code mais de comprendre vraiment les étapes clefs qui permettent un fonctionnement correct du Slider.

    À partir de trois images prises au hasard et du plugin Supersized, je souhaiterais avoir un exemple de ce que cela pourrait donner avec le code de la page bien évidemment :

    Image 1 (la Terre) : http://system.solaire.free.fr/schematerre.jpg
    Image 2 (la Lune) : http://www.astrofiles.net/cosmos/lune/lune.jpg
    Image 3 (le Soleil) : http://system.solaire.free.fr/structuresoleil1.jpg
    Supersized (Télécharger ici)


    Merci à ceux qui prendront la peine de me répondre.

    - Cordialement.

  2. #2
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2007
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2007
    Messages : 387
    Par défaut
    Que souhaites-tu comme slide ?

    le slide suivant te convient-il (en bas du site) ?
    http://prixmalakoffmederic.com/index...isteVainqueurs

    Sinon, quel type de slide souhaites-tu ?
    Voici une liste d'exemples :
    http://www.awwwards.com/15-fresh-jquery-slides.html

  3. #3
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2012
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2012
    Messages : 7
    Par défaut
    Bonjour et merci à toi pour ta réponse,

    Le slide en bas du site que tu m'as donné ne correspond pas totalement à mes attentes. Je cherche un slider qui permette d'afficher directement les images en taille réelle sans miniature, mais qui demande un peu plus d'"efforts" à l'utilisateur (comparé à certains slides ou les images défilent toutes seules)qui doit cliquer sur le bouton flèche pour passer à l'image suivante, ou retourner à l'image précédente, sans que les autres images ne soient dans le champ de vision, c'est pour cela que j'avais mentionné Supersized (voir démo) qui remplit parfaitement ces conditions.

    Sinon parmi la liste des sliders que tu m'as donné, je pense que le Slidesjs me convient, à moins qu'il ne fournisse des images miniatures, ce que je ne pense pas. On peut voir un avantage aux miniatures mais je veux rester sur du simple, avec deux boutons qui réagissent aux clics et qui impliquent le chargement de nouvelles images qui viennent remplacer celles à l'écran, et ainsi de suite.

    Peut importe le slide choisi, je chercherais à savoir comment l'utiliser sur sa page HTML avec les images de son choix, afin d'assimiler le principe de fonctionnement et de pouvoir l'utiliser.

    (Je sais qu'il existe des tutoriels mais souvent ils sont incomplets ou s'adressent à un public plus "professionnel" et ce que je fais en suivant ces tutos; amène le plus souvent à un slider qui ne fonctionne pas)

    Merci d'avance.

  4. #4
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2007
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2007
    Messages : 387
    Par défaut
    Comment utiliser ce plugin, c'est très simple :
    - va sur http://www.slidesjs.com/
    - télécharge l'archive du plugin
    - dans l'archive tu as "Slides\examples\images-with-captions"
    - execute "index.html" et tu auras des images qui vont slider

    Pour faire que ce soit tes images, il te suffit de modifier "index.html" pour avoir tes liens.

  5. #5
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2012
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2012
    Messages : 7
    Par défaut
    Maintenant que j'ai assimilé comment personnaliser le Slider avec ses propres images ce qui n'est franchement pas du tout compliqué, j'aimerais l'intégrer dans une page HTML : pour cela, on crée une nouvelle page HTML et on colle le code de index.htm, mais ensuite toute l'arborescence ne marche plus (.../css/shutter.css par exemple). En effet, l'ensemble des pages HTML de mon site sont situées sur un serveur distant auquel je n'ai pas accès, donc je ne peux pas rajouter le dossier du Slider au niveau de la nouvelle page HTML crée. Comment faire dans ce cas ?

  6. #6
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2007
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2007
    Messages : 387
    Par défaut
    Ta page HTML et tes Javascripts seront-ils sur le même serveur ?
    - Si oui, pas de soucis, URL relative et ça fonctionne ("../script/")
    - Si non, si tu as accès à ces fichiers, tu mets les URLs réelles ("http://jquery.com/jquery.min.js" ).

    Sinon, je ne comprends pas ta situation.

Discussions similaires

  1. Difficultés à mettre en place un serveur
    Par Invité dans le forum Réseau
    Réponses: 2
    Dernier message: 23/11/2011, 10h24
  2. [Timer] Comment mettre en place un genre de timer ?
    Par freddyboy dans le forum MFC
    Réponses: 6
    Dernier message: 04/08/2005, 10h50
  3. Réponses: 5
    Dernier message: 28/07/2004, 11h39
  4. Réponses: 1
    Dernier message: 02/06/2004, 13h59
  5. Comment mettre en place une structure 3 tiers.
    Par WOLO Laurent dans le forum Débats sur le développement - Le Best Of
    Réponses: 13
    Dernier message: 27/07/2003, 22h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo