Devenez distributeur
 
 
Retour
Partager sur Facebook Partager sur Twitter

Comment intégrer un slide sur son Webagoo ?

Comment intégrer un slide sur son Webagoo ?

 

Un site web, c'est comme une maison. Ca s'entretient, ça s'améliore, et dans les travaux de finitions qui ajoutent un certain charme à l'ensemble, je trouve que le slide est un bon élément !

 

Un slide c'est quoi ? Ce terme anglophone désigne plus simplement une animation sur laquelle vous choisissez de mettre en avant les informations importantes sur la page d'accueil de votre site web. Vous pouvez par exemple faire défiler vos dernières actualités. Seulement voilà, pour en intégrer un, il faut souvent avoir des connaissances (même minimes) en code, savoir modifier une feuille de style et un template HTML, le genre de travail que ferai un pro ou un amateur expérimenté dans la création de sites internet.

 

Chez Webagoo, comme on aime démocratiser les usages du web, nous avons également pensé mettre à votre disposition ce savoir qui peut vous permettre de rendre votre site encore plus attrayants aux yeux du visiteur.

 

Voici donc un petit tutoriel, qui, si vous le suivez sérieusement, vous permettra de réaliser le slide ci-dessous. La connaissance du CSS et de l'HTML sont des plus mais ne sont pas nécessaires, nous allons bien détailler chaque étapes et vous verrez ça ira tout seul !

Votre txte ici
Votre texte ici
Votre texte ici
Votre texte ici

Le slide que nous allons réaliser comporte une zone réalisant un défilement de 4 images et une zone de navigation permettant au visiteur de stoper, réactiver ou bien encore accéder directement à une image précise grâce aux numéros.

 

 

Etape 1 : télécharger les images

 

Voici les images nécessaires pour ce tuto, faites un clique droit>enregistrez sous sur chacune des images pour les télécharger et grâce à la manipulation suivante envoyez les à votre bibliothèque :

Depuis le module Bibliothèques de documents > Voir mes fichiers, interface, images, puis cliquez sur envoyez une/des images.

 







 


Pour les images présentent dans le slide vous utiliserez vos propres images donc rendez vous donc sur le module Bibliothèques de documents > Voir mes images, puis envoyez une/des images.

 

 

Blbliothèque d'images

 

 

A partir d'ici, le tutoriel se divise en deux parties, la première concerne les utilisateurs dont le style de leur Webagoo est celui par defaut, la seconde est dirigée aux possesseurs d'un Webagoo dont le style à été personnalisé :

Pour vérifier laquelle de ces parties vous concerne, rendez vous au module "Aspect de mon site" , si "Style par défaut" est selectionné vous êtes concerné par la Partie 1 !

 

 

 

 

 

Partie 1 concernant les Webagoo dont le style n'a pas été paramétré via le module Aspect de mon site

Vous êtes donc le possesseur d'un Webagoo dont le style n'a pas été paramétré via le module "Aspect de mon site"

 

Etape 1 : Ajouter des balises script dans le template principal

 

Comme vous l'avez sans doute deviné, ce slide n'est pas developpé en flash mais en javascript, afin de le mettre en route nous allons relier notre page web au fichier javascript détenant toutes les fonctions nécessaires au bon déroulement de notre slide.

 

Pour se faire, rendez vous depuis votre Tableau de bord dans le module Bibliothèque de documents, cliquez sur Voir mes fichiers, puis sur templates, cochez le fichier ID_de_votre_Webagoo.mxt , puis cliquez sur modifier.

 

Une fois le fichier ouvert, repérez la balise ouvrante <head> ainsi que sa balise fermante </head>. Il est très important de placer la ligne de code HTML suivante(en vert) juste au dessus de la balise fermante </head>, comme suit:

 

il est important de modifier l'ID Webagoo, ici 41399 (en rouge) par l'ID de votre Webagoo


 

<head>
...
<script type="text/javascript" src="http://www.webagoo.eu/bibliotheques/41399/templates/javascript/slide.js"></script>
</head>

 

 

Une fois ces balises script ajoutées nous allons pouvoir ajouter le fichier slide.js à votre bibliothèque.

 

 

 

Etape 2 : upload du fichier slide.js

 

Tout d'abord il vous faut télécharger slide.js, cliquez ici.

 

Une fois ce fichier téléchargé, il va falloir l'uploader dans votre bibliothèque, pour cela rien de plus simple :

direction votre Tableau de bord, dans le module Bibliothèque de documents, cliquez sur Voir mes fichiers, puis sur le dossier templates.

 

Vous vous trouvez donc dans le répertoire templates, pour une meilleur structuration de votre Webagoo et une compatibilité avec les scripts, je vous conseil de créer un nouveau dossier que vous appelerez javascript. Après cela, rentrez dans votre nouveau répertoire javascript et uploadez y votre fichier slide.js .

 

Ne fermez pas votre bibliothèque mais passez à l'étape suivante !

 

 

Etape 3 : modification de slide.js

 

Si vous avez bien suivis toutes les démarches jusqu'ici vous devriez vous retrouvez avec un fichier slide.js dans votre bibliothèque. Ouvrez donc ce fichier car on doit y ajouter l'ID de votre webagoo.

 

Le début de votre fichier doit se présenter ainsi :

 

 

 

document.observe("dom:loaded", function() {
  slideshow();
});

var sldshwState = "play";
var dureeVue = 5000;
var largeur = 550;
var idWebagoo = 41399;
var interval;
var activePanel;
var positionEnd;
var num;

...

 

 

Les valeurs qui nous intéressent sont en rouges:

 

var largeur = la largeur désirée de votre slide en px elle doit correpondre aux valeurs présente dans l'étape 4

var idWebagoo = l'ID de votre webagoo

 

modifiez donc 41399 par l'ID de votre webagoo et enregistrez votre fichier.

 

vous pouvez quitter la bibliothèque !

 

 

 

Etape 4 : Modifier votre fichier CSS


Ce fichier permet d'ajouter du style à vos pages, pour le modifier il faut se rendre sur votre Tableau de bord, dans le module Bibliothèque de documents, cliquez sur Voir mes fichiers, puis sur CSS, cochez le fichier ID_de_votre_Webagoo.css, puis cliquez sur modifier.

Il est très important d'insérer à la fin du fichier, le texte compris entre ces lignes :

 

Pour modifier la largeur de votre slide il suffit de modifier les valeurs écrites en rouge, attention la taille doit etre la même que celle ajoutée dans l'étape 3

 


.slideshow {
	margin: 0 1px;
	position: relative; 

        overflow: hidden;

        width: 550px;

        height: 297px;

        left: 20px;
}
.slideshow .belt {
	position: absolute;

        left: 0;
	top: 0;

}
.slideshow .panel {
	overflow: hidden;
        text-align: center;
	background: #FFF;
	height: 297px;
	width: 550px;

        float: left;
 	position: relative;
}
.slideshow .panel img {
	width:auto;
	height: auto;
}
#nav_slideshow {
	position: relative;
	height: 23px;
	padding-top: 7px;
	margin: 0 auto;
	width: 550px;
	left: 20px;
}
#nav_pp, #nav_g, #nav_m, #nav_d {
	float: left;
	margin: 2px 0;
}
#nav_m {
	position: relative;
}
.nav_mm {
	cursor: pointer;
	float: left;
	width: 17px;
	height: 16px;
	display: block;
	text-align: center;
	line-height: 16px;
}
#nav_m .nav_mm_hover, #nav_m .nav_mm:hover {
	color: #2F1B10;
	background: url(../interface/images/nav_mm.jpg) no-repeat;
}
#fleche {
	background: url(../interface/images/fleche.jpg) no-repeat;
	height: 6px;
	width: 17px;
	position: absolute;
	top: -10px;
	left: 0;
}
#nav_pp {
	background: url(../interface/images/btn-pause.png) no-repeat;
	width: 14px;
	height: 16px;
	margin-right: 2px;
	cursor: pointer;
}

 

Une fois le code collé vous pouvez sauvegarder votre fichier et quitter la bibliothèque

 

 


Etape 5 : Insertion du slide dans votre page

 

Le code qui suit est la zone dans laquelle se trouvera votre slide, nous allons voir comment l'inserer dans une page statique, c'est à dire une page générée via le module Ajouter / Modifier des pages.

Pour cela rendez vous dans ce module, créez une nouvelle page, remplissez le nom de la page puis rendez vous à l'éditeur de texte, cliquez sur le bouton html.

Une nouvelle zone de texte devrait s'afficher, vous n'avez plus qu'à coller ce bout de code ci dessous :

 

N'oubliez pas de changer l'ID de votre webagoo (en rouge) et le nom des images (en verts) avec ceux de vos prores images !

 

 

 


<div id="mygallery" class="slideshow"> <div class="belt"> <div class="panel">
<img src="http://www.webagoo.eu/bibliotheques/41399/interface/images/3.jpg" title="titre image" alt="Votre txte ici" />
</div>
<div class="panel">
<img src="http://www.webagoo.eu/bibliotheques/41399/interface/images/2.jpg" title="titre image" alt="Votre texte ici" />
</div>
<div class="panel">
<img src="http://www.webagoo.eu/bibliotheques/41399/interface/images/1.jpg" title="titre image" alt="Votre texte ici" />
</div>
<div class="panel">
<img src="http://www.webagoo.eu/bibliotheques/41399/interface/images/0.jpg" title="titre image" alt="Votre texte ici" />
</div>
</div>
</div>
<div id="nav_slideshow">
<div id="nav_pp" onclick="nav_pp();">&nbsp;</div>
<div id="nav_g" onclick="nav_g();">&nbsp;</div>
<div id="nav_m">
<div id="fleche">&nbsp;</div>
</div>
<div id="nav_d" onclick="nav_d();">&nbsp;</div>
</div>

 

Une fois ce code collé et le nom des images modifié, vous pouvez enregistrer votre fichier ce qui permettra de retourner sur votre éditeur de texte.

 

Une façon simple de voir si vous avez bien réalisé cette étape est l'affichage dans votre éditeur de texte d'une de vos image, si rien n'est affiché, recliquez sur le bouton html et vérifiez bien que l'ID de votre webagoo est le bon et de même pour le nom de vos images !

 

Bien, une fois que vous avez fait cela, il n'y a plus rien d'autre à faire. Enregistrez votre page et allez voir votre site ! ;)

 

 

 

Partie 2 concernant les Webagoo dont le style a été paramétré via le module Aspect de mon site

Vous êtes donc possesseur d'un Webagoo dont le style n'est pas celui par defaut et a donc été paramétré via le module "Aspect de mon site"

 

Etape 1 : Ajouter le CSS et les balises script dans le style de votre Webagoo

 

Comme vous l'avez sans doute deviné, ce slide n'est pas developpé en flash mais en javascript, afin de le mettre en route nous allons relier notre page web au fichier javascript détenant toutes les fonctions nécessaires au bon déroulement de notre slide.

 

Pour se faire, rendez vous depuis votre Tableau de bord dans le module Aspect de mon site, repérez le style actif puis cliquez sur l'icône modifier , rendez vous ensuite sur la page qui permet de sauvegarder vte style, cochez "Je veux éditer moi-même les fichiers générés (utilisateurs avancés)".

 

Dans la zone de text "Code supplémentaire", à la fin de son contenu, il vous faut ajouter ces quelques lignes en vert :

 

Pour modifier la largeur de votre slide il suffit de modifier les valeurs écrites en rouge, attention la taille doit etre la même que celle ajoutée dans l'étape 3

 


.slideshow {
	margin: 0 1px;
	position: relative; 

        overflow: hidden;

        width: 550px;

        height: 297px;

        left: 20px;
}
.slideshow .belt {
	position: absolute;

        left: 0;
	top: 0;

}
.slideshow .panel {
	overflow: hidden;
        text-align: center;
	background: #FFF;
	height: 297px;
	width: 550px;

        float: left;
 	position: relative;
}
.slideshow .panel img {
	width:auto;
	height: auto;
}
#nav_slideshow {
	position: relative;
	height: 23px;
	padding-top: 7px;
	margin: 0 auto;
	width: 550px;
	left: 20px;
}
#nav_pp, #nav_g, #nav_m, #nav_d {
	float: left;
	margin: 2px 0;
}
#nav_m {
	position: relative;
}
.nav_mm {
	cursor: pointer;
	float: left;
	width: 17px;
	height: 16px;
	display: block;
	text-align: center;
	line-height: 16px;
}
#nav_m .nav_mm_hover, #nav_m .nav_mm:hover {
	color: #2F1B10;
	background: url(../interface/images/nav_mm.jpg) no-repeat;
}
#fleche {
	background: url(../interface/images/fleche.jpg) no-repeat;
	height: 6px;
	width: 17px;
	position: absolute;
	top: -10px;
	left: 0;
}
#nav_pp {
	background: url(../interface/images/btn-pause.png) no-repeat;
	width: 14px;
	height: 16px;
	margin-right: 2px;
	cursor: pointer;
}

 

Une fois ces ligne ajouter, descendez dans la zone de text "aide Template".

Parcourez son contenu et repérez la balise ouvrante <head> ainsi que sa balise fermante </head>. Il est très important de placer la ligne de code HTML suivante(en vert) juste au dessus de la balise fermante </head>, comme suit:

 

il est important de modifier l'ID Webagoo, ici 41399 (en rouge) par l'ID de votre Webagoo


 

<head>
...
<script type="text/javascript" src="http://www.webagoo.eu/bibliotheques/41399/templates/javascript/slide.js"></script>
</head>

 

 

Une fois ces balises script ajoutées vous pouvez sauvegarder votre style.

 

 

 

Etape 2 : upload du fichier slide.js

 

Tout d'abord il vous faut télécharger slide.js, cliquez ici.

 

Une fois ce fichier téléchargé, il va falloir l'uploader dans votre bibliothèque, pour cela rien de plus simple :

direction votre Tableau de bord, dans le module Bibliothèque de documents, cliquez sur Voir mes fichiers, puis sur le dossier templates.

 

Vous vous trouvez donc dans le répertoire templates, pour une meilleur structuration de votre Webagoo et une compatibilité avec les scripts, je vous conseil de créer un nouveau dossier que vous appelerez javascript. Après cela, rentrez dans votre nouveau répertoire javascript et uploadez y votre fichier slide.js .

 

Ne fermez pas votre bibliothèque mais passez à l'étape suivante !

 

 

Etape 3 : modification de slide.js

 

Si vous avez bien suivis toutes les démarches jusqu'ici vous devriez vous retrouvez avec un fichier slide.js dans votre bibliothèque. Ouvrez donc ce fichier car on doit y ajouter l'ID de votre webagoo.

 

Le début de votre fichier doit se présenter ainsi :

 

 

 

document.observe("dom:loaded", function() {
  slideshow();
});

var sldshwState = "play";
var dureeVue = 5000;
var largeur = 550;
var idWebagoo = 41399;
var interval;
var activePanel;
var positionEnd;
var num;

...

 

 

Les valeurs qui nous intéressent sont en rouges:

 

var largeur = la largeur désirée de votre slide en px elle doit correpondre aux valeurs présente dans l'étape 4

var idWebagoo = l'ID de votre webagoo

 

modifiez donc 41399 par l'ID de votre webagoo et enregistrez votre fichier.

 

vous pouvez quitter la bibliothèque !

 

 


Etape 4 : Insertion du slide dans votre page

 

Le code qui suit est la zone dans laquelle se trouvera votre slide, nous allons voir comment l'inserer dans une page statique, c'est à dire une page générée via le module Ajouter / Modifier des pages.

Pour cela rendez vous dans ce module, créez une nouvelle page, remplissez le nom de la page puis rendez vous à l'éditeur de texte, cliquez sur le bouton html.

Une nouvelle zone de texte devrait s'afficher, vous n'avez plus qu'à coller ce bout de code ci dessous :

 

N'oubliez pas de changer l'ID de votre webagoo (en rouge) et le nom des images (en verts) avec ceux de vos prores images !

 

 

 


<div id="mygallery" class="slideshow"> <div class="belt"> <div class="panel">
<img src="http://www.webagoo.eu/bibliotheques/41399/interface/images/3.jpg" title="titre image" alt="Votre txte ici" />
</div>
<div class="panel">
<img src="http://www.webagoo.eu/bibliotheques/41399/interface/images/2.jpg" title="titre image" alt="Votre texte ici" />
</div>
<div class="panel">
<img src="http://www.webagoo.eu/bibliotheques/41399/interface/images/1.jpg" title="titre image" alt="Votre texte ici" />
</div>
<div class="panel">
<img src="http://www.webagoo.eu/bibliotheques/41399/interface/images/0.jpg" title="titre image" alt="Votre texte ici" />
</div>
</div>
</div>
<div id="nav_slideshow">
<div id="nav_pp" onclick="nav_pp();">&nbsp;</div>
<div id="nav_g" onclick="nav_g();">&nbsp;</div>
<div id="nav_m">
<div id="fleche">&nbsp;</div>
</div>
<div id="nav_d" onclick="nav_d();">&nbsp;</div>
</div>

 

Une fois ce code collé et le nom des images modifié, vous pouvez enregistrer votre fichier ce qui permettra de retourner sur votre éditeur de texte.

 

Une façon simple de voir si vous avez bien réalisé cette étape est l'affichage dans votre éditeur de texte d'une de vos image, si rien n'est affiché, recliquez sur le bouton html et vérifiez bien que l'ID de votre webagoo est le bon et de même pour le nom de vos images !

 

Bien, une fois que vous avez fait cela, il n'y a plus rien d'autre à faire. Enregistrez votre page et allez voir votre site ! ;)

 

 

 

En cas d'échec...

 

Si vous ne parvenez pas la première fois au résultat esconté, reprenez depuis le début en vérifiant bien là ou vous avez placez votre code, que l'ID de votre Wbagoo soit bien le bon et enfin, que le nom de vos images correspondent avec le code de la dernière partie !

Si vous  avez malgré tout un problème, n'hésitez pas à poster un commentaire, nous vous aiderons ! ;)

 

Merci d'avoir suivi ce petit tuto, si nous avons des retours positifs nous tâcherons d'en publier d'autres...

 

Alors, à vos Webagoo et bon code!

 

1 vote(s) - voter

Publié dans Blog par Michael Bechler


 


Commentaires


claire le 24/09/2010 à 09:08:09
claireTrès intéréssant. Une question : Est-il possible de lier les images du slide à un élément. Par exemple, j'ai une carte géographique cliquable sur ma page comportant 12 liens vers 12 pages. Puis-je remplacer mes 12 pages par un slide à 12 images. Lorsque je clique sur un des liens de ma carte, puis-je faire apparaître l'image du slide recherchée. Merci et super le tuto

DiffuCom le 15/10/2011 à 02:04:09
DiffuComBonjour J'ai intégré un slide dans mon site. Il me semble que les boutons btn_play.png et btn_pause.png sont absents. Est-ce exact ? Si oui, pouvez-vous m'envoyer ces fichiers Merci Slts


Ajouter un commentaire



  •
  •
  •

 

Nos conférences gratuites

Nous aimons échanger sur de nombreux thèmes touchant Internet et le monde des artisans, commerçants et TPE. Webagoo propose des conférences en ligne et gratuites, ouvertes au public et parfois réservées à ses distributeurs.



Découvrez notre programme

A la une



Découvrez WebagooStore !

Devenez distributeur

Intégrez Webagoo dans votre offre dédiée à la petite entreprise. Pour en savoir plus, inscrivez-vous à une présentation en ligne et gratuite.

 

Découvrez Webagoo

Prestataires ou porteurs de projet, créez un site de démonstration et testez Webagoo gratuitement pendant 30 jours.

 

Contactez-nous

Artisans, commerçants, TPE, vous souhaitez créer votre site Internet ? Contactez-nous et discutons de votre projet.

 

Un CMS en saas, quésako ?
Webagoo est un outil en ligne permettant de créer et gérer son site internet sans aucune installation.		 Un site pour les TPE-PME
Webagoo offre une approche innovante pour les TPE/PME en répondant à leurs besoins, et pour les distributeurs à la recherche d'une réelle opportunité professionnelle.		 Gérer son site simplement
Webagoo permet de créer et gérer son site internet facilement et efficacement, tout en augmentant sa visibilité sur les moteurs de recherche.		 La Web-TV de la petite entreprise
La WebTV des indépendants, TPE et PME. Cours gratuits, conférences, témoignages, tutoriels, buzz... Pour que le net soit accessible à tous !


Webagoo au service de l'Association des Commercants de Ribeauvillé : un article dans les DNA

Dans les Dernières Nouvelles d'Alsace du dimanche 15 avril 2012, rubrique Colmar et sa [...]
Tél. 0892 23 43 03
(0,34€/min)
Blog - Presse - Infos légales - FAQ - Contact 		© - Webagoo - Tous droits réservés
www.ac89.com
Tweet