Sliders, code, et images... et prévisualisation en local ?

BoNjour Ellade !

Je vous contacte car je suis un peu perdu...

Mes connaissances succinctes en langage de programmation m'empêchent de réaliser un slider en fond de page pour mon site. Je ne sais pas trop si l'ouverture d'un nouveau sujet est nécessaire, car les tutos sont très complets.

J'ai testé la solution WOW Slider, mais ai vu ensuite que l'on pouvait programmer le carroussel grâce à un code qui me semble similaire à celui de WowSlider (et donc pas de pubs sur mes images).

J'essaye donc de suivre ce tuto: https://ellade.forumperso.com/t328-tuto-slider-bootstrap-personalise-dans-warc-webacappella-responsive

mais je ne sais pas comment gérer les fichiers images :
la fonction 'src' recherche l'image à un endroit précis et j'imagine qu'il me faut stocker mes images dans un répertoire précis ? J'essaye donc de copier coller le chemin vers le fichier dans mon ordinateur C:\dossiers...\img.jpg mais sans succès. Comment faire pour que le code aille chercher les fichiers ?

Ensuite, y a-t-il une possibilité pour voir le carroussel en local ? (la version non responsive est toujours en ligne... et je ne désire pas la déstocker tant que la version WARC ne sera pas terminée). J'ai créé un répertoire de publication en local dans les paramètres de publication, j'ai publié, mais rien n’apparaît. J'ai pourtant bien suivi les étapes du tuto, seulement je ne vois pas comment 'exploiter' mes images.

Voilà, cela fait beaucoup de lignes pour certainement peu de choses, et je vous remercie d'avoir pris les temps de les lire, et de bien vouloir m'éclairer un peu plus Wink

Je vous souhaite une excellente journée !

LBT

Bonsoir LTP
Je vois que tu as posté dans la catégorie WAFx, j'en conclue que tu utilises WAFx.
Le slider Bootstrap ne fonctionne pas sur WAFx mais seulement sur WAGrid qui est une conception Bootstrap.

Oups ! Je me suis trompé de sous forum... J'utilise GRID
Y a-t-il une possibilité de faire 'glisser' ce tuto dans la partie GRID ou bien dois-je reposter là-bas ?
Désolé !

Voilà c'est fait j'ai modifié, j'ai mis dans le bon forum.

Pour l'adresse avec le disque c et les entislash c'est normal que ça ne fonctionne pas aucun navigateur n'est fait pour reconnaitre un disque C ce type d'adresse n'est pas pour les navigateurs, il faut utiliser soit une adresse relative par rapport au fichier qui appel d'autres fichiers soit une adresse absolue (adresse des fichiers et images envoyés sur le serveur, adresse http ou https)
Comme tout est sur le pc ce sera dons une adresse relative.
Mettre les images dans un répertoire "images" que tu placeras à la racine du site que tu as publié en local avec dans ce répertoires toutes les images.
et pour adresse relative des images tu mettras /images/monimage.jpg

Bonjour Ellade,
J'ai suivi les méthodes, mais le slider ne s'affiche pas... Je ne vois pas trop d'où vient l'erreur. Le code est celui du tuto et les adresses relatives sont correctes. Je n'ai pas oublié de créer le répertoire images à la racine comme tu l'as précisé...
J'ai activé la prévisualisation de l'éditeur, et je ne vois dans mon objet HTML que les textes du code (1. 2. 3.... Page 1 image à 100% de la largeur etc...) tels qu'ils sont définis. Mais aucune image... Lorsque je publie (en local) puis je teste, sur mon explorateur, je ne vois que les flèches de navigation, même le texte n'apparaît pas.

J'ai testé plusieurs choses (renommer les fichiers, écrire la classe CSS en bas dans les classes personnalisées de l'objet HTML, écrire la calsse CSS dans la ligne qui contient l'objet, une ligne apparaît alors entre les flèches de navigation...) mais sans résultat.

Voici le code de la balise HEAD dans les propriétés de la page :

Code:

<style>
.ombre {
box-shadow: 3px 2px 12px 0 black;
box-sizing: border-box;
}
.carousel-page
 {
 width:100%;
 max-height:500px;
 background-color:#5f666d;
 color:white;
 }
</style>


et celui de l'objet HTML :

Code:

<div id="my_carousel" class="carousel slide" data-ride="carousel">
 <!-- Bulles -->
 <ol class="carousel-indicators">
 <li data-target="#my_carousel" data-slide-to="0" class="active"></li>
 <li data-target="#my_carousel" data-slide-to="1"></li>
 <li data-target="#my_carousel" data-slide-to="2"></li>
 <li data-target="#my_carousel" data-slide-to="3"></li>
 </ol>
 <!-- Slides -->
 <div class="carousel-inner">
 <!-- Page 1 -->
 <div class="item active"> 
 <div class="carousel-page">
 <img src="/images/image1.jpg" alt=""  class="img-responsive" style="margin:0px auto;" />
 </div>
 <div class="carousel-caption">Page 1 Image à 100% de la largeur elle remplie le fond</div>
 </div> 
 <!-- Page 2 -->
 <div class="item">
 <div class="carousel-page">
 <img src="/images/image2.jpg" alt=""  class="img-responsive img-rounded" style="margin:0px auto;max-height:100%;"  />
 </div>
 <div class="carousel-caption">Page 2 Image à 100% de la hauteur, elle ne remplit pas le fond </div>
 </div> 
 <!-- Page 3 -->
 <div class="item"> 
 <div class="carousel-page">
 <img src="/images/image3.jpg" alt="" class="img-responsive" style="margin:0px auto;"  />
 </div> 
 <div class="carousel-caption">Page 3 de présentation</div>
 </div>   
 <!-- Page 4 -->
 <div class="item"> 
 <div class="carousel-page">
 <img src="/images/image4.jpg" alt="" class="img-responsive" style="margin:0px auto;"  />
 </div> 
 <div class="carousel-caption">Page 4 de présentation</div>
 </div>   
 </div>
 <!-- Contrôles -->
 <a class="left carousel-control" href="#my_carousel" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#my_carousel" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
 </div>

Je suis un vrai noob

Merci de votre aide !

LBT

Impossible pour moi de savoir ce qui ne va pas, peut-être des bibliothèques manquantes ou erreur de lien mais ton site est en local donc impossible pour moi de savoir d'où peut venir l'erreur.
C'est un peu comme si tu demandais à ton garagiste de réparer ta voiture sans ouvrir le capot  
Il est indispensable d'avoir une publication en ligne pour capter le problème, d'ailleurs c'est peut-être là le problème, certains appels de fichiers externes ne fonctionnent qu'en ligne.
Tu peux publier dans un sous-répertoire pour ne pas écraser le site actuel.

Bonjour Ellade,

En publiant sur FTP dans un sous-répertoire, cela fonctionne !

Merci pour l'aide et l'idée, que je n'aurai probablement pas trouvé tout seul

Prends soin de toi et à la prochaine !!

LBT

EDIT : lors de ma publication sur le web dans le sous-répertoire, je n'ai rien changé du code. J'ai juste configuré dans WAGrid les paramètres de la nouvelle publication, et ajouté le répertoire 'images' dans la racine de la nouvelle publication (dans le sous-répertoire). Voilà j'espère que cela aidera pour les suivants !