Insérer script diaporama sur mon site

canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention   -  
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,


J'aimerai savoir comment insérer un script de diaporama tel que celui que l'on trouve sur www.jacksasylum.eu/ContentFlow/addons.php

Mon site est sur wifeo, je ne parviens pas à insérer ce script. De plus j'aimerai savoir comment faire pour insérer ses propres photos dans ce script? où doit on placer le script photo et où le trouve t-on?

Je vous remercie pour votre aide car je ne comprends pas du tout comment il faut s'y prendre; tout ça me paraît assez compliqué.

En tout cas merci d'avance

Canvas



A voir également:

16 réponses

Réponse 1 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
Si j'ai bien compris, je dois télécharger le fichier correspondant au diaporama dans wifeo seulement je n'y arrive pas!

Quelqu'un pourrait-il me donner une solution?

Merci

canvas
0
Réponse 2 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
Autre question, n'existe t-il pas un script "libre" qui n'a pas besoin d'un dossier spécial et qui permet d'avoir un diaporama de type lightflow?

(je ne sais pas si je suis clair mais c'est très compliqué !)

encore merci

canvas
0
Réponse 3 / 16
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
bonjour canvas,
pour mettre en place le plugin contentflow... et bien c'est tout expliqué sur ton lien, tu vas dans download et tu download, puis tu vas dans documentation tout es expliquer...
pour plus de détail regardes dans ce que tu as téléchargé, le code source de index

--
0
Réponse 4 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour epitale,

Merci pour ta réponse.

Alors j'ai bien téléchargé le fichier.
Ensuite j'ai copié le script que j'ai inséré sur ma page source et modifié les emplacements pour mes photos seulement ça ne fonctionne pas. Je loupe certainement quelque chose.
J'ai lu la documentation, le fichier source... mais je ne vois pas où je fais une erreur. Peux - tu m'expliquer?


Merci

canvas
0
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
je pourrais pas faire grand chose de plus que de recopier des parties de l'index.html,
qu'est ce qui ne marche pas ?
utilise l'extension firebug pour firefox, cela pourra donner des indications sur les erreurs de ton codes
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
Et bien lorsque j'insère le script sur ma page source et que ensuite je le visualise il n'y a que le texte en script qui apparaît.
Je ne comprends pas trop, je suis novis, j'ai essayé de placer mes liens photos mais il n'y a toujours que le script qui apparaît.

Qu'est ce que l'extension firebug?
0
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
tu as bien mi ton text javascript entre <script>et </script> ?
firebug c'est une soret d'icone abeile en haut a droite de firefox, en appuyant dessus une console apparait en bas de l'ecran qui t'informe des erreurs et autres
tapes firebug firefox dans google tu trouvera facilement comment ajouter cette extension
0
Réponse 6 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
après ce que j'ai compris c'est qu'il faudrait télécharger les fichiers contentflow sur wifeo mais ça n'est pas possible .
c'est pourquoi je cherche une solution plus simple.
0
Réponse 7 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
Effectivement je n'avais pas mis le texte entre 'script'. (novis jusqu'au bout)
Alors quand j'ai mis ce script maintenant ma page n'affiche rien de particulier.
Voyant que j'ai fais une erreur aussi bête peux tu me dire où dois insérer le lien pour mes photos? Le script complet est celui-ci:



</script>ContentFlowAddOn_DEFAULT {
}

/* ----- styling of items ----- */
.ContentFlowAddOn_DEFAULT .flow .item.active {
cursor: pointer;
}
.ContentFlowAddOn_DEFAULT .flow .item .caption {
font-size: 100%;
font-weight: bold;
text-align: center;
color: white;
max-height: 30%;
bottom: 10%;
background: url(img/1x1_0.5_black.png);
width: 100%;
}
* html .ContentFlowAddOn_DEFAULT .flow .item .caption {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png');
}
.ContentFlowAddOn_DEFAULT .flow .item .caption a,
.ContentFlowAddOn_DEFAULT .flow .item .caption a:link,
.ContentFlowAddOn_DEFAULT .flow .item .caption a:visited,
.ContentFlowAddOn_DEFAULT .flow .item .caption a:active,
.ContentFlowAddOn_DEFAULT .flow .item .caption a:hover {
text-decoration: none;
color: white;
font-style: italic;
font-size: 0.8em;
}
.ContentFlowAddOn_DEFAULT .flow .item .caption a:hover {
text-decoration: underline;
}
.ContentFlowAddOn_DEFAULT .flow .item.active .caption {
/*display: block;*/ /* uncomment to show caption inside item */
}

/* ----- scrollbar ----- */
.ContentFlowAddOn_DEFAULT .scrollbar {
width: 50%;
margin: 0px auto;
height: 16px;
background: url(img/scrollbar_white.png) left center repeat-x;
position: relative;
}

.ContentFlowAddOn_DEFAULT .scrollbar .slider {
width: 16px;
height: 16px;
background: url(img/slider_white.png) center center no-repeat;
}

/* only for IE <= 6 and a alphatransparent slider image */
* html .ContentFlow .scrollbar .slider { background-image: none; }
* html .ContentFlow .scrollbar .slider .virtualSlider {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png');
}

.ContentFlowAddOn_DEFAULT .scrollbar .slider .position {
top: 120%;
font-size: 16px;
font-weight: bold;
color: silver
}

/* ----- global caption ----- */
.ContentFlowAddOn_DEFAULT .globalCaption {
text-align: center;
font-weight: bold;
color: white;
font-size: 14px;
height: 20px;
margin: 2em auto;
}
.ContentFlowAddOn_DEFAULT .globalCaption .caption {
}
.ContentFlowAddOn_DEFAULT .globalCaption .caption a,
.ContentFlowAddOn_DEFAULT .globalCaption .caption a:link,
.ContentFlowAddOn_DEFAULT .globalCaption .caption a:visited,
.ContentFlowAddOn_DEFAULT .globalCaption .caption a:active,
.ContentFlowAddOn_DEFAULT .globalCaption .caption a:hover {
text-decoration: none;
color: white;
font-style: italic;
font-size: 0.8em;
}

.ContentFlowAddOn_DEFAULT .globalCaption .caption a:hover {
text-decoration: underline;
}

/* ----- load indicator ----- */
.ContentFlowAddOn_DEFAULT .loadIndicator {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: url(img/1x1_0.5_black.png);
}
* html .ContentFlowAddOn_DEFAULT .loadIndicator {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png');
}
.ContentFlowAddOn_DEFAULT .loadIndicator .indicator {
background: url(img/loader.gif) center center no-repeat;
width: 100%;
height: 100%;
}

/* ================================= */</script>
0
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
c'est quoi ce fichier ?
le fichier .js, de ce que tu as télécharger faut pas y toucher,
dans ton fichier de travail, genre index.html il faut faire un lien vers ce .js,

je repete dans le dossier contentflow que tu as téléchargé, regardes le code source de index.html
0
Réponse 8 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
Ça c'est le fichier que j'ai téléchargé sur https://www.realtime.at/gecatcht/ (ContentFlowAddOn_DEFAULT_3.0.zip)
Dans ce fichier zip il y a 3 fichiers: -img (fichier vide)
-ContentFlowAddOn_DEFAULT_(script que je t'ai envoyé)
-ContentFlowAddOn_DEFAULT_(quand je clique dessus un message d'erreur s'affiche: windows script host)
0
Réponse 9 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
J'ai de nouveau téléchargé les fichiers, toujours la même chose.
Y a t-il un moyen d'avoir ce script que je dois intégrer à ma page source?

(Merci de m'aider epitale, je ne connais pas grand chose à l'informatique, tu es d'une grande aide!!)
0
Réponse 10 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
j'ai trouvé ce script sur cette page : http://ebling.library.wisc.edu/scripts/ContentFlow/index.html .
Est-ce bien çà?









<div style="display: none;" class="loadIndicator"><div class="indicator"></div></div>

<div style="height: 324.75px; margin-bottom: -108.25px; visibility: visible;" class="flow">

<div style="display: block; left: 696.459px; top: 162.375px; height: 54.125px; width: 54.125px; z-index: 32765; visibility: visible;" class="item ">
<canvas style="height: 150%; width: 100%; margin-left: 0%; margin-top: 0%;" height="324" width="216" origproportion="1" class="content portray" src="pics/pic0.png"></canvas>
<div class="caption">pic0: some stripes</div>
</div>
<div style="display: none; left: 709.991px; top: 168.306px; height: 48.194px; width: 48.194px; z-index: 32765; visibility: visible;" class="item ">
<canvas style="height: 150%; width: 70.8333%; margin-left: 14.5833%; margin-top: 0%;" height="324" width="153" origproportion="1.411764705882353" class="content portray" src="pics/pic1.png"></canvas>
<div class="caption">pic1: some stripes</div>
</div>
<div style="display: none; left: 111.937px; top: 164.953px; height: 51.5474px; width: 51.5474px; z-index: 32765; visibility: visible;" class="item ">
<canvas style="height: 106.579%; width: 100%; margin-left: 0%; margin-top: 28.9474%;" height="324" width="304" origproportion="0.7105263157894737" class="content landscape" src="pics/pic2.png"></canvas>
<div class="caption">pic2: some stripes</div>
</div>
<div style="display: none; left: 108.601px; top: 167.634px; height: 48.8661px; width: 48.8661px; z-index: 32765; visibility: visible;" class="item ">
<canvas style="height: 150%; width: 70.8333%; margin-left: 14.5833%; margin-top: 0%;" height="324" width="153" origproportion="1.411764705882353" class="content portray" src="pics/pic1.png"></canvas>
<div class="caption">pic1: some stripes</div>
</div>

<div style="display: none; left: 108.932px; top: 167.356px; height: 49.1439px; width: 49.1439px; z-index: 32765; visibility: visible;" class="item ">
<canvas style="height: 150%; width: 100%; margin-left: 0%; margin-top: 0%;" height="324" width="216" origproportion="1" class="content portray" src="pics/pic0.png"></canvas>
<div class="caption">pic0: some stripes</div>
</div>
<div style="display: none; left: 107.775px; top: 168.34px; height: 48.1596px; width: 48.1596px; z-index: 32765; visibility: visible;" class="item ">
<canvas style="height: 150%; width: 70.8333%; margin-left: 14.5833%; margin-top: 0%;" height="324" width="153" origproportion="1.411764705882353" class="content portray" src="pics/pic1.png"></canvas>
<div class="caption">pic1: some stripes</div>
</div>
<div style="display: block; left: 115.416px; top: 162.375px; height: 54.125px; width: 54.125px; z-index: 32765; visibility: visible;" class="item ">
<canvas style="height: 106.579%; width: 100%; margin-left: 0%; margin-top: 28.9474%;" height="324" width="304" origproportion="0.7105263157894737" class="content landscape" src="pics/pic2.png"></canvas>
<div class="caption">pic2: some stripes</div>
</div>
<div style="display: block; left: 144.628px; top: 144.333px; height: 72.1667px; width: 72.1667px; z-index: 32766; visibility: visible;" class="item ">
<canvas style="height: 150%; width: 70.8333%; margin-left: 14.5833%; margin-top: 0%;" height="324" width="153" origproportion="1.411764705882353" class="content portray" src="pics/pic1.png"></canvas>
<div class="caption">pic1: some stripes</div>
</div>

<div style="display: block; left: 207.526px; top: 108.25px; height: 108.25px; width: 108.25px; z-index: 32767; visibility: visible;" class="item ">
<canvas style="height: 150%; width: 100%; margin-left: 0%; margin-top: 0%;" height="324" width="216" origproportion="1" class="content portray" src="pics/pic0.png"></canvas>
<div class="caption">pic0: some stripes</div>
</div>
<div style="display: block; left: 324.75px; top: 0px; height: 216.5px; width: 216.5px; z-index: 32768; visibility: visible;" class="item active">
<canvas style="height: 150%; width: 70.8333%; margin-left: 14.5833%; margin-top: 0%;" height="324" width="153" origproportion="1.411764705882353" class="content portray" src="pics/pic1.png"></canvas>
<div class="caption">pic1: some stripes</div>
</div>
<div style="display: block; left: 550.224px; top: 108.25px; height: 108.25px; width: 108.25px; z-index: 32767; visibility: visible;" class="item ">
<canvas style="height: 106.579%; width: 100%; margin-left: 0%; margin-top: 28.9474%;" height="324" width="304" origproportion="0.7105263157894737" class="content landscape" src="pics/pic2.png"></canvas>
<div class="caption">pic2: some stripes</div>
</div>
<div style="display: block; left: 649.205px; top: 144.333px; height: 72.1667px; width: 72.1667px; z-index: 32766; visibility: visible;" class="item ">
<canvas style="height: 150%; width: 70.8333%; margin-left: 14.5833%; margin-top: 0%;" height="324" width="153" origproportion="1.411764705882353" class="content portray" src="pics/pic1.png"></canvas>
<div class="caption">pic1: some stripes</div>
</div>

</div>
<div class="globalCaption"><div class="caption">pic1: some stripes</div></div>
<div style="margin-top: 0px; visibility: visible;" class="scrollbar">
<div style="left: 275.545px; top: 0px;" class="slider"><div style="left: 424px;" class="position">10</div></div>
</div>

<div class="mouseoverCheckElement"></div></div>
0
Réponse 11 / 16
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
sur ton fichier de travail, entre tes balise <head> et </head>
tu mets :


<link rel="stylesheet" title="Standard" href="styles.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="contentflow.js"></script>
<script tyle="text/javascript">
var cf = new ContentFlow('contentFlow', {reflectionColor: "#000000"});


le fichier contentflow.js fait parti du pakage ContentFlow_1.0.2.zip a télécharger ici https://www.realtime.at/gecatcht/

dans ton body

<div id="contentFlow" class="ContentFlow">
<!-- should be place before flow so that contained images will be loaded first -->
<div class="loadIndicator"><div class="indicator"></div></div>

<div class="flow">

<div class="item">
<img class="content" src="pics/pic0.png"/>
<div class="caption">pic0: some stripes</div>
</div>
<div class="item">
<img class="content" src="pics/pic1.png"/>
<div class="caption">pic1: some stripes</div>
</div>
..... src="vers tes images"

</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider"><div class="position"></div></div>
</div>

</div>



--
0
Réponse 12 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
Lorsque j'ouvre le fichier contentflow.js un message d erreur s'affiche:

Windows script Host

script:
C:\users\appdata\local\temp1_contentflow_1.0.2.zip\contentflow\contentflow.js
ligne:2
caract.:121
erreur:'widow' est indéfini
code: 800a1391
source: erreur d execution microsoft JScript
0
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
tu as pas besoin d'aouvrir contentflow.js, rien a y toucher, juste dans ton fichier ou tu crée ton truc, l'appeler
<script language="JavaScript" type="text/javascript" src="contentflow.js"></script>

src="contentflow.js" suppose que ton fichier de travail et contentflow.js" son dans le meme dossier sinon tu met src="nomdudossieroujemetmesjs/contentflow.js"
0
Réponse 13 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
Bon je récapitule car il y a quelque chose que je ne fais pas correctement:

1: Mettre tous les fichiers, scripts entre <head> et </head>

2: Ajouter : <link rel="stylesheet" title="Standard" href="styles.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="contentflow.js"></script>
<script tyle="text/javascript">
var cf = new ContentFlow('contentFlow', {reflectionColor: "#000000"});

3: Insérer le fichier contentflow.js (je l'ai trouvé , mais comment l'insérer?Faire juste un copier/coller?)

4: Enfin insérer : <div id="contentFlow" class="ContentFlow">
<!-- should be place before flow so that contained images will be loaded first -->
<div class="loadIndicator"><div class="indicator"></div></div>

<div class="flow">

<div class="item">
<img class="content" src="pics/pic0.png"/>
<div class="caption">pic0: some stripes</div>
</div>
<div class="item">
<img class="content" src="pics/pic1.png"/>
<div class="caption">pic1: some stripes</div>
</div>
..... src="vers tes images"

</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider"><div class="position"></div></div>
</div>

</div>



C'est bien ça?
Désolé d'avoir des connaissance en informatique aussi légère!
Merci pour ton aide

Canvas
0
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
arf fit toi a l'index fournit dans le pakage que tu as téléchargé, regarde comment c'est fait dedans
0
Réponse 14 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
comment je galère!!
y a un truc que je comprends pas, c'est pas possible!!

là j'ai essayé : type="text/javascript" language="JavaScript" <script src="PATH/contentflow.js"> </ script>

<div class="ContentFlow">
<div class="loadIndicator"> <div class="indicator"> </ div> </ div>
<div class="flow">
<img class="item" src="someImageFile.jpg" title="Your_Image_Title"/>
<! - Ajouter autant d'articles que vous le souhaitez. ->
</ Div>
<div class="globalCaption"> </ div>
<div class="scrollbar"> <div class="slider"> <div class="position"> </ div> </ div> </ div>
</ Div>


je rajoute mes photos à l'endroit prévu. lorsque j'ouvre ma page, je vois les photos mais pas en contentflow, il n'y a pas de défilement d'image.

question bête sûrement: n'y a-t-il pas un script complet qui permet d'être copié directement sur la page source et où il n'y a plus qu'à mettre les photos?

(merci de ta patience epitale)

canvas
0
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
src="PATH/contentflow.js" as tu remplacé path par le chemin du dossier ou tu a mis contentflow.js sur ton serveur
et apres il faut
<script>
var cf = new ContentFlow('contentFlow', {reflectionColor: "#000000"});
</script>
0
Réponse 15 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
je ne parviens pas télécharger le dossier contentflow.js sur wifeo. ça bloque. le format du fichier n'est pas valide apparemment.
0
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
peut etre sur wifeo il y a un module "widgets" à mettre facilement en place qui pourrait remplacer contentflow
0
Réponse 16 / 16
canvas Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
Non il n'y a que de simples diaporamas, rien d'original.
C'est pourquoi je voulais vraiment mettre un contentflow.
N'y a t il pas d autres solutions?
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses