Mini module slider
Hugo Membre non connecté
-
Booster Roquette
- Voir le profil du membre Hugo
- Inscrit le : 13/04/2012
J'aimerai créer un mini module dans lequel des images défile. Je me suis un peu renseigner et il semblerer que phpbst utilise prototype et non jquery j'ai donc trouver ceci:
http://www.protoshow.net/
Pouvez-vous m'aider a l'installer.
Merci d'avance.
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Page traduite
Dis nous si tu bloque à une étape.
ElenWii
Hugo Membre non connecté
-
Booster Roquette
- Voir le profil du membre Hugo
- Inscrit le : 13/04/2012
aiglobulles Membre non connecté
-
Booster Missile
- Voir le profil du membre aiglobulles
- Inscrit le : 15/08/2008
- Groupes :
Ensuite dans le header.tpl tu intègres ton appel de script, puis, tu places ton slide ou tu veux sur ton site en prenant soin de nommer correctement le div qui encadre le slide car c'est le nom du div qui est appelé via le js.
Hugo Membre non connecté
-
Booster Roquette
- Voir le profil du membre Hugo
- Inscrit le : 13/04/2012
Citation :
Étape 1 - Inclure Libaries dépendantes
Pour obtenir ProtoShow travailler dans votre page, vous devez d'abord comprendre à la fois le prototype et script.aculo.us librairies javascript dans votre <head> document: (Traduit par Google Chrome)
Pour obtenir ProtoShow travailler dans votre page, vous devez d'abord comprendre à la fois le prototype et script.aculo.us librairies javascript dans votre <head> document: (Traduit par Google Chrome)
Je dois les inclures ou phpbst les inclus déja ?
Merci d'avance !
Édité par Hugo Le 24/03/2013 à 14h12
aiglobulles Membre non connecté
-
Booster Missile
- Voir le profil du membre aiglobulles
- Inscrit le : 15/08/2008
- Groupes :
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Est-ce que tu as réussi à l'intégrer ?
ElenWii
Hugo Membre non connecté
-
Booster Roquette
- Voir le profil du membre Hugo
- Inscrit le : 13/04/2012
aiglobulles Membre non connecté
-
Booster Missile
- Voir le profil du membre aiglobulles
- Inscrit le : 15/08/2008
- Groupes :
Hugo Membre non connecté
-
Booster Roquette
- Voir le profil du membre Hugo
- Inscrit le : 13/04/2012
aiglobulles Membre non connecté
-
Booster Missile
- Voir le profil du membre aiglobulles
- Inscrit le : 15/08/2008
- Groupes :
protoshow est bien pour des slideshow utilisant les boutons de navigation etc... Mais ds ton cas un simple slide full css devrait faire l'affaire non ?
Hugo Membre non connecté
-
Booster Roquette
- Voir le profil du membre Hugo
- Inscrit le : 13/04/2012
aiglobulles Membre non connecté
-
Booster Missile
- Voir le profil du membre aiglobulles
- Inscrit le : 15/08/2008
- Groupes :
Hugo Membre non connecté
-
Booster Roquette
- Voir le profil du membre Hugo
- Inscrit le : 13/04/2012
aiglobulles Membre non connecté
-
Booster Missile
- Voir le profil du membre aiglobulles
- Inscrit le : 15/08/2008
- Groupes :
dans la partie "head" (header.tpl) tu ajoutes:
appel du css:
Code HTML :
<!-- BEGIN PROTOSHOW CSS --> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/protoshow/css/protoshow.css" type="text/css" media="screen, print, handheld" />
Toujours dans la partie "head" l'appel du script:
Code HTML :
<!-- BEGIN PROTOSHOW SCRIPT -->
<script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/protoshow/protoshow.js"></script>
<script language="javascript">
Event.observe(window, "load", function() {
// reference ID of our show container
new protoShow('myshow', {interval:3000,progressTimer:true,pauseOnHover:true,captions:true,controls:false,navigation:false,transitionType:"slide"});
});
</script>
Ci-desssus, le slide qui sera appelé (car on peut en mettre plusieurs par pages) se nomme "myshow". Tu peux paramétrer les options en false/true selon que tu souhaites les afficher ou non. L'interval est le nombre de milliseconde d'affichage de chaque slide.
Ensuite, dans le corps de ta page (balise "body")
tu crée le div avec le même identifiant que celui appelé dans le script ci dessus:
Code HTML :
le div est crée. Sa class est stylisée dans protoshow.css. Dans chaque entrée de la liste, tu places une image. L'attribut "alt" te permet d'afficher un petit text descriptif comme ICI (désolé pour la pub
)Je te conseille de placer le dernier code et de l'adapter à ton site) dans le menu que tu as crée en l'éditant avec la balise html car le bbcode ne fonctionnera pas.
Voilà, bon courage l'ami
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie