Discussion :

[The-Deft-Scientist]

• 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.

[PP(Team)]

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

[The-Deft-Scientist]

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.

[PP(Team)]

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.

[The-Deft-Scientist]

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 ?

[PP(Team)]

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.