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 :

http://www.gaus-sts.com/images/img_ico.bmp Image 1 (la Terre) : http://system.solaire.free.fr/schematerre.jpg
http://www.gaus-sts.com/images/img_ico.bmp Image 2 (la Lune) : http://www.astrofiles.net/cosmos/lune/lune.jpg
http://www.gaus-sts.com/images/img_ico.bmp Image 3 (le Soleil) : http://system.solaire.free.fr/structuresoleil1.jpg
http://aduratech.com/inc/img/ico-download.png Supersized (Télécharger ici)


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

- Cordialement.

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

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.

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.

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 ?

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.

Justement non, je n'ai pas accès au serveur puisque j'ai créé mon site à l'aide d'un autre site (hébergement non pro), et j'ai le dossier du slider sur mon propre ordinateur. Donc je peux créer une nouvelle page HTML mais je n'ai pas accès au contenu des fichiers du site et je ne peux modifier qu'à travers l'interface. Donc je dois pour chaque répertoire cité dans le code .../css/shutter.css ou .../script/js.min.3.2, le remplacer par une URL indiquant directement le lien du fichier et c'est très long car il faudrait ré-héberger les fichiers du css pour indiquer une URL. Par exemple, pour faire appel à la feuille de style, il faut ré-héberger le css puis au sein même du CSS, réheberger toutes les images du visuel du slider ce qui est vraiment long. J'essaie donc de trouver une autre méthode, sachant que je n'ai pas accès aux fichiers du serveur, sinon il suffirait à l'emplacement de la page HTML de coller les dossier js, img, css etc...

N'y a-t-il pas un autre moyen plus pratique, si l'on a pas accès au serveur hébergeant le site, de rendre fonctionnel les liens vers lequel retourne les fichiers HTML, et CSS ? Car sinon, je dois prendre pas mal de temps à tout ré-héberger et pas que les fichiers .JS qui eux se trouvent tous seuls, mais aussi les images, puis le CSS.

Je ne comprend pas ta situation. Tu as un hébergement mutualisé ?

Comment veux-tu faire quelque chose sur un site sans avec accès à son serveur ?
J'ai l'impression que tu utilises un site à partir de ton site sans en avoir le droit...

Pourrais-tu expliquer en détails ta situation (en cachant les noms bien sur) ? Cela m'aidera grandement afin de trouver une solution à ton problème. Car sans le contexte, il va être complexe de régler ton problème.

Cordialement.

J'ai créé mon site pour débuter à partir de nombreux sites qui le proposent : e-monsite, sitew etc... Le soucis, c'est qu'en tant qu'administrateur, on peut modifier les pages HTML mais on n'a pas accès "aux dossiers du site" qui sont hébergées par les sites mentionnés ci-dessus je suppose, donc je ne peux pas coller le dossier du slider et ainsi, si je crée une nouvelle page HTML en collant le code de l'index du Slider, tous les répertoires mentionnés ne marchent plus et donc le slider n'est pas fonctionnel. Il faut ainsi que je définisse des nouvelles adresse d'accès disponible en ré-hébergeant chaque fichier du slider, ce qui est franchement long.

Il s'agit donc d'un hébergement mutualisé et l'inconvénient est le fait de ne pas pouvoir installer ce que je veux sur le serveur.

Sauf erreur, j'ai hébergé un site sur "one and one" et nous avions un accès SSH pour pouvoir administrer nos données.
Sans ces connexions, la maintenance et l'évolution de ton site sera particulièrement complexe ....