Accueil
Créer un forumInstallation Wow Slider
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Installation Wow Slider
par Alexlerouche Ven 5 Juin 2015 - 21:01
Détails techniques
Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forumtestfootmania.forumgratuit.be/
Description du problème
Bonjour ,Après quelques jours de prise de tête (c'est peu de le dire) , je ne parviens pas à installer un slide du logiciel Wow Slider. Je sais que c'est normalement faisable car je suis tombé sur 2-3 tutos ici mais même en les suivant , rien à faire , je n'y arrive pas ..
Donc voilà , j'ai commencé par créer mon slide avec le logiciel. Je fais "publish" , le fichier s'ouvre sur mon navigateur chrome. Je prends le code source que j'insère dans une page html. Ensuite j'héberge les images qui doivent être dans le slide ainsi que tous les fichiers css , jquery , script et un autre script wowslider sur ce site http://www.partage-facile.com/ et je finis par remplacer tous les liens du html de base par ceux fraîchement hébergés. Je fais une prévisualisation pour voir ce qu'il en est et mis à part la vision des images hébergées de manière désordonnée (un slide de 3 images avec ses 3 vignettes) il ne se passe rien , pas d'animation , rien ..
Je sais aussi que je dois héberger les images du slide qui sont les boutons "play/pause" , les flèches gauches/droite , une ombre shadow , etc mais celles-là je pense qu'il faut les mettre dans le css mais je n'en suis pas sûr et après analysé le css , jene vois de toutes façons pas très bien où ..
Voici toujours mon code html avec les liens hébergés :
- Code:
<br /><!DOCTYPE html>
<html>
<head>
<title>Image carousel generated by WOWSlider.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Image carousel" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="http://www.partage-facile.com/MT0BSNGWDM/style.css.html" />
<script type="text/javascript" src="http://www.partage-facile.com/D55LZCMFCS/jquery.js.html"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:transparent;margin:auto">
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="http://nsa37.casimages.com/img/2015/06/05//150605075455124501.jpg" alt="Lionel Messi" title="Lionel Messi" id="wows1_0"/>Messi attend la Juventus de pied ferme mais prévient que ce ne sera pas facille !</li>
<li><img src="http://nsa37.casimages.com/img/2015/06/05//150605075455124501.jpg" alt="full screen slider" title="Un Egyptien à Anderlecht?" id="wows1_1"/></a>Le RSCA serait sur le Benzema Egyptien</li>
<li><img src="http://nsa37.casimages.com/img/2015/06/05//150605075455124501.jpg" alt="Roland Duchatelet" title="Roland Duchatelet" id="wows1_2"/>Roland Duchatelet démend des contacts avec Jankovic
</li>
</ul></div>
<div class="ws_thumbs"><div>
<a href="#" title="Lionel Messi"><img src="http://nsa37.casimages.com/img/2015/06/05//150605075455124501.jpg" alt="" /></a>
<a href="#" title="full screen slider"><img src="http://nsa37.casimages.com/img/2015/06/05//150605075455124501.jpg" alt="" /></a>
<a href="#" title="Roland Duchatelet"><img src="http://nsa37.casimages.com/img/2015/06/05//150605075455124501.jpg" alt="" /></a>
</div>
</div>
<span class="wsl"><a href="http://wowslider.com/vu">image carousel</a> by WOWSlider.com v7.4</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="http://www.partage-facile.com/BXX46BKFNX/wowslider.js.html"></script>
<script type="text/javascript" src="http://www.partage-facile.com/U619TDXFZ2/script.js.html"></script>
<!-- End WOWSlider.com BODY section -->
</body>
</html>
Voici aussi le css inchangé :
- Code:
/*
* generated by WOW Slider 7.4
* template Box
*/
@import url(https://fonts.googleapis.com/css?family=Ledger&subset=latin,latin-ext,cyrillic);
#wowslider-container1 {
display: table;
zoom: 1;
position: relative;
width: 100%;
max-width: 830px;
max-height:418px;
margin:0px auto 0px;
z-index:90;
text-align:left; /* reset align=center */
font-size: 10px;
text-shadow: none; /* fix some user styles */
/* reset box-sizing (to boostrap friendly) */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
* html #wowslider-container1{ width:830px }
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%;
height:100%;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{
position: relative;
width:1%;
height:100%;
line-height:0; /*opera*/
overflow: hidden;
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#wowslider-container1 .ws_images{
position: relative;
left:0;
top:0;
height:100%;
max-height:360px;
max-width: 830px;
vertical-align: top;
border:none;
overflow: hidden;
}
#wowslider-container1 .ws_images ul a{
width:100%;
height:100%;
max-height:360px;
display:block;
color:transparent;
}
#wowslider-container1 img{
max-width: none !important;
}
#wowslider-container1 .ws_images .ws_list img,
#wowslider-container1 .ws_images > div > img{
width:100%;
border:none 0;
max-width: none;
padding:0;
margin:0;
}
#wowslider-container1 .ws_images > div > img {
max-height:418px;
}
#wowslider-container1 .ws_images iframe {
position: absolute;
z-index: -1;
}
#wowslider-container1 .ws-title > div {
display: inline-block !important;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container1 .ws_bullets {
float: left;
position:absolute;
z-index:70;
}
#wowslider-container1 .ws_bullets div{
position:relative;
float:left;
font-size: 0px;
}
/* compatibility with Joomla styles */
#wowslider-container1 .ws_bullets a {
line-height: 0;
}
#wowslider-container1 .wsl{
display:none;
}
#wowslider-container1 sound,
#wowslider-container1 object{
position:absolute;
}
/* prevent some of users reset styles */
#wowslider-container1 .ws_effect {
position: static;
width: 100%;
height: 100%;
}
#wowslider-container1 .ws_photoItem {
background: #fff;
}
#wowslider-container1 .ws_photoItem > div {
left: 2em;
right: 2em;
top: 2em;
bottom: 2em;
}
#wowslider-container1.ws_gestures {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABwSURBVEjH7ZJBEsAgCAMT/v/n9NCOSqe2oD2yNx1JggB4BCEFWyFASP2KMQE7ywWhe/tTRGCGogLk02tFctiW/SUgaMyQG4PdPzDn31rQbMb8FiAXgvsEJNax1yVlVGAjA93apP3HFhZTGIqiKH7iADB6HxPlHdNVAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTA3LTA3VDEzOjQ5OjEwKzAyOjAwm7WiFAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wNy0wN1QxMzo0OToxMCswMjowMOroGqgAAAAASUVORK5CYII="), move;
}
#wowslider-container1.ws_gestures.ws_grabbing {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABaSURBVEjH7ZMxCkAhDEOT8u9/5TpJ+xWkFse8IYutJgEB8RCHL1qCc90BEFnT6QH7mwgFHBUf8wJyS1TDLuc3vmighx37LZdIth3E5hKj9n6O0HRh+oJCiFcMxRUUDxR1CTMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDctMDdUMTM6NDk6MzgrMDI6MDDqf+sOAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA3LTA3VDEzOjQ5OjM4KzAyOjAwmyJTsgAAAABJRU5ErkJggg=="), move;
}
/* hide controls when video start play */
#wowslider-container1.ws_video_playing .ws_bullets {
display: none;
}
#wowslider-container1.ws_video_playing:hover .ws_bullets {
display: block;
}
/* IE fix because it don't show controls on hover if frame visible */
#wowslider-container1.ws_video_playing_ie .ws_bullets,
#wowslider-container1.ws_video_playing_ie a.ws_next,
#wowslider-container1.ws_video_playing_ie a.ws_prev {
display: block;
}
/* youtube/vimeo buttons */
#wowslider-container1 .ws_video_btn {
position: absolute;
display: none;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 55;
}
#wowslider-container1 .ws_video_btn.ws_youtube,
#wowslider-container1 .ws_video_btn.ws_vimeo {
display: block;
}
#wowslider-container1 .ws_video_btn div {
position: absolute;
background-image: url(./playvideo.png);
background-size: 200%;
top: 50%;
left: 50%;
width: 7em;
height: 5em;
margin-left: -3.5em;
margin-top: -2.5em;
}
#wowslider-container1 .ws_video_btn.ws_youtube div {
background-position: 0 0;
}
#wowslider-container1 .ws_video_btn.ws_youtube:hover div {
background-position: 100% 0;
}
#wowslider-container1 .ws_video_btn.ws_vimeo div {
background-position: 0 100%;
}
#wowslider-container1 .ws_video_btn.ws_vimeo:hover div {
background-position: 100% 100%;
}
#wowslider-container1 .ws_playpause.ws_hide {
display: none !important;
}
#wowslider-container1 .ws_bullets {
padding: 10px;
}
#wowslider-container1 .ws_bullets a {
margin-left:4px;
width:15px;
height:15px;
background: url(./bullet.png) left top;
float: left;
text-indent: -4000px;
position:relative;
color:transparent;
}
#wowslider-container1 .ws_bullets a.ws_selbull, #wowslider-container1 .ws_bullets a:hover{
background-position: 0 100%;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
background-size: 200%;
position:absolute;
top:50%;
margin-top:-2em;
z-index:60;
width: 3.7em;
height: 4em;
background-image: url(./arrows.png);
}
#wowslider-container1 a.ws_next{
background-position: 100% 0;
right:-2.1em;
}
#wowslider-container1 a.ws_prev {
background-position: 0 0;
left:-2.1em;
}
/*playpause*/
#wowslider-container1 .ws_playpause {
width: 3.3em;
height: 3.3em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1.6em;
margin-top: -1.6em;
z-index: 59;
background-size: 100%;
}
#wowslider-container1 .ws_pause {
background-image: url(./pause.png);
}
#wowslider-container1 .ws_play {
background-image: url(./play.png);
}
#wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover {
background-position: 100% 100% !important;
}/*top right */
#wowslider-container1 .ws_bullets {
top:0;
right: 0;
}
/* separate */
#wowslider-container1 .ws-title{
position: absolute;
bottom:2.5em;
left: 0;
margin-right:0.5em;
z-index: 50;
color: #FFFFFF;
text-transform:none;
font-family: 'Ledger', Georgia, serif;
line-height: 2.6em;
}
#wowslider-container1 .ws-title div,#wowslider-container1 .ws-title span{
display:inline-block;
margin-top:0.5em;
padding:0.6em;
background:#313131;
}
#wowslider-container1 .ws-title div{
display:block;
font-size: 1.6em;
margin-top:0.5em;
padding:0.7em;
line-height: 1.1em;
}
#wowslider-container1 .ws-title span{
font-size: 2.4em;
}#wowslider-container1 .ws_thumbs {
overflow:auto;
z-index:60;
}
#wowslider-container1 .ws_thumbs img{
text-decoration: none;
border: 0;
width: 100%;
}
#wowslider-container1 .ws_thumbs a {
position:relative;
text-indent: -4000px;
color:transparent;
opacity:0.85;
text-decoration: none;
display: inline-block;
border: 0;
margin:0.83%;
text-indent:0;
padding: 0.56%;
width: 30.5533333333333%;
max-width: 110px;
}
#wowslider-container1 .ws_thumbs a:hover{
opacity:1;
}
#wowslider-container1 .ws_thumbs a:hover img{
visibility:visible;
}
#wowslider-container1 .ws_images,
#wowslider-container1 .ws_shadow {
margin-top: 7.3em;
}
#wowslider-container1 .ws_thumbs {
position: absolute;
text-align: left;
top: 0;
left: 0;
width:100%;
height: 7.3em;
}
#wowslider-container1 .ws_thumbs div{
position:relative;
letter-spacing:-4px;
width:40.5em;
height: 100%;
}#wowslider-container1 .ws_thumbs a.ws_selthumb{
background-color: #fff;
}
#wowslider-container1 .ws_thumbs a{
background-color: #000;
}
#wowslider-container1 .ws_images > ul{
animation: wsBasic 24s infinite;
-moz-animation: wsBasic 24s infinite;
-webkit-animation: wsBasic 24s infinite;
}
@keyframes wsBasic{0%{left:-0%} 25%{left:-0%} 33.33%{left:-100%} 58.33%{left:-100%} 66.67%{left:-200%} 91.67%{left:-200%} }
@-moz-keyframes wsBasic{0%{left:-0%} 25%{left:-0%} 33.33%{left:-100%} 58.33%{left:-100%} 66.67%{left:-200%} 91.67%{left:-200%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 25%{left:-0%} 33.33%{left:-100%} 58.33%{left:-100%} 66.67%{left:-200%} 91.67%{left:-200%} }
#wowslider-container1 .ws_shadow{
background: url(./shadow.png) left 100%;
background-repeat: no-repeat;
background-size:100% 100%;
width:100%;
height:9px;
position: absolute;
left:0;
bottom:-9px;
z-index:-1;
}
* html #wowslider-container1 .ws_shadow{/*ie6*/
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine1/shadow.png', sizingMethod='scale');
}
*+html #wowslider-container1 .ws_shadow{/*ie7*/
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine1/shadow.png', sizingMethod='scale');
}
#wowslider-container1 .ws_bullets a img{
text-indent:0;
display:block;
top:16px;
left:-55px;
visibility:hidden;
position:absolute;
border: 2px solid #000000;
max-width:none;
}
#wowslider-container1 .ws_bullets a:hover img{
visibility:visible;
}
#wowslider-container1 .ws_bulframe div div{
height:48px;
overflow:visible;
position:relative;
}
#wowslider-container1 .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:110px;
background-color:#000000;
}
#wowslider-container1 .ws_bullets .ws_bulframe{
display:none;
top:22px;
overflow:visible;
position:absolute;
cursor:pointer;
border: 2px solid #000000;
}
#wowslider-container1 .ws_bulframe span{
display:block;
position:absolute;
top:-9px;
margin-left:-2px;
left:55px;
background:url(./triangle.png);
width:15px;
height:8px;
}#wowslider-container1 .ws_bulframe div div{
height: auto;
}
@media all and (max-width:400px){
#wowslider-container1 .ws_controls,
#wowslider-container1 .ws_bullets,
#wowslider-container1 .ws_thumbs{
display: none
}
}
Voili voilu .. La dernière phase , si j'ai bien compris , si tout fonctionne un jour lol , est de mettre l'adresse de la page html dans une iframe que je collerais dans affichage -> généralité .. C'est bien cela ?
En espérant que vous pourrez m'aider ou du moins m'aiguiller à finaliser ce petit projet que me tient très à coeur ..
En vous remerciant d'avance ,
Alex.
Alexlerouche- ***
-
Messages : 169
Inscrit(e) le : 25/04/2014 -
Re: Installation Wow Slider
par Neptunia Ven 5 Juin 2015 - 21:28
Bonjour ^^
Nul besoin de passer par une iframe pour mettre un slider par exemple dans le message de la page d'accueil.
Pour le CSS :
PA > Affichage > Images et Couleurs > Couleurs > Onglet feuille de style
Il est également possible de placer le style directement dans le code HTML du slider
Pour le JS
Soit on charge les scripts à l'intérieur de la balise <head> du template overall_header, soit on les appelle à l'intérieur d'un javascript actif sur les pages de votre choix.
Pour le HTML :
A placer là où il doit être visible (message, page accueil, description de catégorie ...)
Et surtout :
Pour l'hébergement il faut des liens directs
http://www.partage-facile.com/MT0BSNGWDM/style.css.html ne permettra pas de charger une feuille CSS puisque le document appelé est une page html et non une feuille CSS.
Idem pour le javascript. L'hébergeur doit vous fournir des liens avec l'extension .js ou .css et non un lien vers une page de son interface.
Nul besoin de passer par une iframe pour mettre un slider par exemple dans le message de la page d'accueil.
Pour le CSS :
PA > Affichage > Images et Couleurs > Couleurs > Onglet feuille de styleIl est également possible de placer le style directement dans le code HTML du slider
Pour le JS
Soit on charge les scripts à l'intérieur de la balise <head> du template overall_header, soit on les appelle à l'intérieur d'un javascript actif sur les pages de votre choix.
Pour le HTML :
A placer là où il doit être visible (message, page accueil, description de catégorie ...)
Et surtout :
Pour l'hébergement il faut des liens directs
http://www.partage-facile.com/MT0BSNGWDM/style.css.html ne permettra pas de charger une feuille CSS puisque le document appelé est une page html et non une feuille CSS.
Idem pour le javascript. L'hébergeur doit vous fournir des liens avec l'extension .js ou .css et non un lien vers une page de son interface.
Neptunia- Membre actif
-
Messages : 17853
Inscrit(e) le : 08/08/2010 -
Re: Installation Wow Slider
par Alexlerouche Ven 5 Juin 2015 - 22:37
Hello Neptune ,
Hé bien je suis encore plus perdu .. D'après ce tuto https://forum.forumactif.com/t303848-probleme-diaporama qui concerne également l'installation d'un wow slider , il faut bel et bien changer les liens des scripts en les hébergeant ainsi que le lien css en l'hébergeant aussi ?
Sinon j'ai fait tout ce que tu m'as dit , j'ai collé l'html dans affichage -> généralités , le ccs dans la feuille de style et les scripts dans la gestion des codes javascript .. Voici ce que ça donne : http://forumtestfootmania.forumgratuit.be/
Je suis loin du compte , quoi .. lol
Désolé d'être aussi nul , de plus que je commence à fatiguer avec tout ça ..
Pourrais-tu m'expliquer bien par étapes toutes les procédures ?
Et si je dois héberger les fichiers , quel site me conseillerais-tu ? J'ai bien été sur archive host mais il s'avère qu'il soit payant .. Pas une question de radinerie mais s'il y a moyen de faire cela gratuitement , on va pas s'gêner .. ^^
Alex.
Hé bien je suis encore plus perdu .. D'après ce tuto https://forum.forumactif.com/t303848-probleme-diaporama qui concerne également l'installation d'un wow slider , il faut bel et bien changer les liens des scripts en les hébergeant ainsi que le lien css en l'hébergeant aussi ?
Sinon j'ai fait tout ce que tu m'as dit , j'ai collé l'html dans affichage -> généralités , le ccs dans la feuille de style et les scripts dans la gestion des codes javascript .. Voici ce que ça donne : http://forumtestfootmania.forumgratuit.be/
Je suis loin du compte , quoi .. lol
Désolé d'être aussi nul , de plus que je commence à fatiguer avec tout ça ..
Pourrais-tu m'expliquer bien par étapes toutes les procédures ?
Et si je dois héberger les fichiers , quel site me conseillerais-tu ? J'ai bien été sur archive host mais il s'avère qu'il soit payant .. Pas une question de radinerie mais s'il y a moyen de faire cela gratuitement , on va pas s'gêner .. ^^
Alex.
Alexlerouche- ***
-
Messages : 169
Inscrit(e) le : 25/04/2014 -
Re: Installation Wow Slider
par Alexlerouche Ven 5 Juin 2015 - 23:32
C'est ok Neptune , j'ai su héberger les liens directs et les replacer dans l'html , tout fonctionne .. J'n'ai plus qu'à replacer les quelques images .. 
Merci de m'avoir aiguillé ..
Résolu.
Merci de m'avoir aiguillé ..
Résolu.
Alexlerouche- ***
-
Messages : 169
Inscrit(e) le : 25/04/2014 -
Re: Installation Wow Slider
par MlleAlys Ven 12 Juin 2015 - 12:56
. . | Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton  A bientôt sur ForumActif  |
MlleAlys- Membre actif
- Messages : 5793
Inscrit(e) le : 12/09/2012
Sujets similaires» Problème installation slider
» Problème installation Nivo slider
» JavaScript d'un slider
» Créez un slider
» Centrer un Slider
» Problème installation Nivo slider
» JavaScript d'un slider
» Créez un slider
» Centrer un Slider
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum