UnitedColors : ajout d'un slide JS [Réglé]
intégration du JS Aroud The World dans United Colors
Créations de Thèmes
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Je tente d'intégrer le slide du joli thème de Babsolune Around the World (PBT 4.0) dans son aussi joli thème UnitedColors (PBT4.1.2).
Oups : Around the World est créé par Grenouille, désolé
j'ai copié le dossier JS dans le thème et mis dans le frame.tpl le script JS :
insertion du script type juste avant le </head>
insertion de la div slide-show juste après l'ouverture du <body...
voir le résultat sur mairie-braslou.olympe.in/412 (c'est pas beau hein ?)
quelqu'un peut-il m'aider ?
Code :
<!DOCTYPE html>
<html lang="{L_XML_LANGUAGE}">
<head>
<title>{TITLE}</title>
<meta charset="iso-8859-1" />
# IF C_DESCRIPTION #<meta name="description" content="{SITE_DESCRIPTION}" /># ENDIF #
<meta name="keywords" content="{SITE_KEYWORD}" />
<meta name="generator" content="PHPBoost {PHPBOOST_VERSION}" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
# IF C_CANONICAL_URL #<link rel="canonical" href="{U_CANONICAL}"/># ENDIF #
<!-- Theme CSS -->
# IF C_CSS_CACHE_ENABLED #
<link rel="stylesheet" href="${CSSCacheManager::get_css_path('/templates/default/theme/default.css;/kernel/lib/css/font-awesome/css/font-awesome.css;/templates/{THEME}/theme/design.css;/templates/{THEME}/theme/global.css;/templates/{THEME}/theme/content.css')}" type="text/css" media="screen, print, handheld" />
# ELSE #
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print, handheld" />
# ENDIF #
<!-- Modules CSS -->
{MODULES_CSS}
# IF C_FAVICON #
<link rel="shortcut icon" href="{FAVICON}" type="{FAVICON_TYPE}" />
# ENDIF #
# INCLUDE JS_TOP #
<script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/js/simple-slide-show.js"></script>
</head>
<body class="color-main" itemscope="itemscope" itemtype="http://schema.org/WebPage">
<div id="slide-show">
<ul id="slide-images">
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/fontaine.png" alt="fontaine" title="fontaine" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/braslou1.png" alt="entree de Braslou" title="entree de Braslou" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/braslou2.png" alt="entree de Braslou" title="entree de Braslou" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/braslou3.png" alt="entree de Braslou" title="entree de Braslou" /></li>
</ul>
</div>
# INCLUDE BODY #
# INCLUDE JS_BOTTOM #
</body>
</html>Édité par olivierb Le 29/10/2014 à 22h05
Olivier
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
J'ai tenté d'intégrer le script d'ElenWii de son super thème JustPlayforFun, mais alors là, rien ne se passe...
Olivier
Visiteur
inclus la div dans le body.tpl, et non dans le frame.tpl
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Pour protoshow tu as intégré quoi ?
Il y a tout ca :
- le repertoire protoshow
- le code du frame.tpl
- le code du body.tpl
ElenWii
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Je viens de modifier mais ce n'est pas encore le top !
@ElenWii,
Erreur de débutant
Pour protoshow, je teste en local pour voir ce que cela donne.
En tout cas, merci de l'aide que vous m'apportez
Edit :
concernant protoshow, j'ai exactement le même comportement mais :
- le slide apparaît sous le titre
- sous le slide apparaissent les liens : pause, previous, next et les liens vers les différentes images du slide
Édité par olivierb Le 29/10/2014 à 21h56
Olivier
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
mais merci quand même 
apparemment, il ne te manque plus que le css
(de ce que je vois sur ton sitedans le frame.tpl
à la fin
après # INCLUDE JS_BOTTOM #
Code HTML :
dans le body.tpl
au début
après <header id...
Code HTML :
# INCLUDE MAINTAIN #
<header id="header">
<div id="slide-show">
<ul id="slide-images">
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/1.png" alt="1" title="1" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/2.png" alt="2" title="2" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/3.png" alt="3" title="3" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/4.png" alt="4" title="4" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/5.png" alt="5" title="5" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/6.png" alt="6" title="6" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/7.png" alt="7" title="7" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/8.png" alt="8" title="8" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/9.png" alt="9" title="9" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/10.png" alt="10" title="10" /></li>
</ul>
</div>
<div id="site-infos">et enfin le css
ou tu veux, dans le fichier css que tu veux
, du thème bien surCode CSS :
#slide-show{float: right; margin-right: 80px;} #slide-images{ display:block; height:120px; margin:26px 0 0; overflow:hidden; /*padding-top:30px;*/ position:relative; width:914px; } #slide-images li{ position:absolute; display:block; list-style-type:none; margin:0px; padding:0px; } #slide-images li img{ display:block; width: 100%; }
a toi d'ajuster à ce que tu veux
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
En fait j'avais tout fait comme ça sauf que je n'avais pas mis les scripts au bon endroit et n'avais pas ajouté le code CSS.
Maintenant, je n'ai plus qu'à tester les modifications du CSS pour placer le slide à l'endroit où je veux.
C'est beau le PHP.
Il est content Rosco (enfin moi
)
Olivier
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Je reviens vers ce topic car je me rend compte que les images du slide sont de taille fixe et sur les écrans tels que les smartphones les images sortent du cadre.
J'ai testé aussi le thème JustPalyforFun et j'ai le même type de résultat.
En version PBT 4.0, le thème Around the World qui utilise le même JS, les images s'affichent correctement (voir ici).
Aurais-je fait une erreur de configuration ?
D'avance merci et bon weekend à tous.
Olivier
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
ElenWii
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Je sais copier/coller un code mais mes compétences s'arrêtent là.
Pour la taille variable, doit-on utiliser un width:xx% ou est-ce plus compliqué ?
Sinon, je me contenterais d'en rester là car je suis assez satisfait du résultat
Edit :
Bon, pour l'instant j'ai un 502 Bad Gateway sur mon site hébergé chez Olympe.in
Si j'ai bien lu les forums, je n'ai qu'à attendre.
Bizarre
Edit 2:
Olympe rencontre un problème :
Citation :Bonjour,
Nous rencontrons actuellement des soucis avec notre filer.
De ce fait, l'ensemble de nos services est actuellement indisponible.
Nous travaillons à la remise en service de celui-ci afin de rétablir la situation le plus rapidement possible...
Vous pouvez suivre notre page de statut ( https://www.olympe.in/status ) ainsi que ce topic afin d'en savoir plus sur l'évolution de la situation.
Merci de votre compréhension,
Pour l'équipe Olympe,
Rémi
Édité par olivierb Le 31/10/2014 à 17h16
Olivier
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Une taille variable c'est : width: auto; avec eventuellement un min-width et un max-width pour limiter la taille
Tu utilise quel slider du coup ?
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Ce sera aux gens de la mairie de décider ce qu'ils veulent lors de ma prochaine présentation
Olivier
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie