adHoc.71site.fr

→ Feature Carousel : un carousel jQuery dans un Iframe.

Ce carousel est une création de Brian Osborne : https://www.bkosborne.com

Il est édité sous la licence GPLv3

Il ne m'a pas été possible, hélas, d'intégrer ce Carousel au coeur de adHoc : en fonction de la version jQuery utilisée, soit le fonctionnement est tout bonnement impossible, soit cela fonctionne, mais le code source produit est ensuite inexploitable... Le plus simple était donc de se limiter à une version dans des Iframes. Je rappelle que j'ai ajouté à ce Carousel l'option réglable de l'opacité des images latérales qui n'existait pas à l'origine. Ce Carousel permet d'afficher des légendes (captions) et des liens dans les légendes, et/ou sur les images...

Le zip contenant les fichiers est téléchargeable ici : FeatureCarousel.zip. Il est constitué d'un dossier FeatureCarousel contenant :
→ un dossier images avec les imagettes de navigation (vous pouvez en ajouter d'autres...)
→ les fichiers jquery-1.8.3.js jquery.featureCarousel.js et feature-carousel.css nécessaires au fonctionnement du Carousel.

Et également les 3 fichiers FeatureCarousel-01.html FeatureCarousel-02.html et FeatureCarousel-03.html du tutoriel.

Ce contenu a été placé dans le dossier images à la racine d'adHoc.

NB : les images des trois exemples ci-dessous sont les mêmes que pour les tutoriels de Waterwheel Carousel des pages précédentes. Cela explique les liens dans les exemples... À vous bien sûr de créer vos propres dossiers d'images, mais pour essayer, vous pouvez les récupérer dans le zip : WaterwheelCarousel.zip.

→ Feature Carousel 1

Ci-dessous le code de l'Iframe qui appelle le fichier FeatureCarousel-01.html.

<iframe scrolling="no" src="images/FeatureCarousel-01.html" style="background:transparent;" width="100%" height="320px" frameborder="0"></iframe>

Ci-dessous le code du fichier FeatureCarousel-01.html.

→ Feature Carousel 2

Ci-dessous le code de l'Iframe qui appelle le fichier FeatureCarousel-02.html.

<iframe scrolling="no" src="images/FeatureCarousel-02.html" style="background:transparent;" width="100%" height="320px" frameborder="0"></iframe>

Ci-dessous le code du fichier FeatureCarousel-03.html.

→ Feature Carousel 3

Ci-dessous le code de l'Iframe qui appelle le fichier FeatureCarousel-03.html.

<iframe scrolling="no" src="images/FeatureCarousel-03.html" style="background:transparent;" width="100%" height="260px" frameborder="0"></iframe>

Ci-dessous le code du fichier FeatureCarousel-03.html.

Pour exploiter, ces fichiers, il vous suffit de les éditer avec notepad++ par exemple, de les enregistrer sous un autre nom et de faire les modifications souhaitées :

→ Donner un titre [title]Mon Titre[/title]

→ Dans les options du script, à l'aide des commentaires, régler le fonctionnement du Carousel, et la présence, ou non des boutons de navigation et des outils de pagination.

→ Dans le style, régler son apparence, les positions des différents éléments...

→ Notez que dans chacun de ces fichiers, une règle @media screen fait passer la largeur du conteneur à 100% pour les mobiles. Ce n'est pas une panacée... mais cela permet toutefois que l'affichage sur mobile ne soit pas trop gênant. Ajuster les valeurs au besoin.

Utilisez sans modération les fichiers .html du zip en téléchargement : FeatureCarousel.zip. Veuillez, s'il vous plaît laisser les références d'origine du procédé et de mon site dans l'en-tête, merci.

Me contacter sur le forum pour toute aide ou information supplémentaire.