THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3
  • Index
  • Thelia 1
  • Développement
  • Slider sur la page d'accueil du template de base ... c'est pô facile !

Offline

#1 Slider sur la page d'accueil du template de base ... c'est pô facile !

(18-01-2013 16:08:42)

... Ou j'ai raté quelque chose (ce qui est le cas le plus problable !!!).

Bref j'ai testé différentes solutions (coda, skitter etc ...) et je n'ai réussi à en faire fonctionner aucun.

Si vous voulez bien me suivre voila ce que j'ai fait. Tout d'abord sélectionner un slider plutôt simple (et responsive comme le template) sans trop de fichiers pour limiter les risques. En l'occurence bxslider dont la doc est ici : http://bxslider.com/

Première tentative en mettant tout dans le index.html : échec ! les photos s'affichent les unes au dessous des autres.

Deuxième tentative : passer par la création d'un fichier nommé bxslider.html dont le contenu est :

<ul class="bxslider">
          <li><img src="./template/imgslider/pic1.jpg" /></li>
          <li><img src="./template/imgslider/pic2.jpg" /></li>
          <li><img src="./template/imgslider/pic3.jpg" /></li>
          <li><img src="./template/imgslider/pic4.jpg" /></li>
          <li><img src="./template/imgslider/pic5.jpg" /></li>                 
</ul>

Je crée ensuite deux dossiers BXSLIDER dans les répertoires JS/ et CSS/ place ensuite les fichiers récupérés dans ces dossiers. j'ai donc :

template/css/bxslider/jquery.bxslider.css
template/js/bxslider/jquery.bxslider.js
template/js/bxslider/jquery.bxslider.min.js

et 5 photos nommées pic1.jpg à pic5.jpg placées dans un répertoire template/imgslider

Vous me suivez ? ou déjà j'ai fait une con... ?

On continue donc pour appeler les fichiers java et css  et lancer bxSlider

J'ai placé ça entre les deux balises <HEAD> du fichier index.html sous la forme


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="template/js/bxslider/jquery.bxslider.min.js"></script>
<link href="template/css/bxslider/jquery.bxslider.css" rel="stylesheet" />

<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>

et ensuite rajouté dans le <body>, entre le MENU juste au dessus de contenu :

<div id="bxslider">
#INCLUDE "template/bxslider.html"
</div>

Sous wamp ... c'est waterloo alors j'ai testé sur une installation distance et là c'est ... tout pareil !!!!

Je vais retourner boire un café ... et si d'aventure vous avez de quoi me mettre le nez dans le problème ... parceque moi j'ai les yeux un peu fatigués et je ne vois plus rien !

Offline

#2 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(18-01-2013 16:20:08)

En fait, c'est très simple, et tu as fait exactement ce qu'il faut.

Il suffit d'inclure dans la page le JS et le CSS du slider choisi, de créer le markup avec les boucles Thelia, et d'écrire (si besoin)  le code d'initialisation.

#INCLUDE "template/bxslider.html"

#INCLURE

Si ça ne marche pas (les photos s'affichent les unes au dessous des autres), c'est qu'il y aune erreur javascript qui empêche ton slider de démarrer. Ouvre la console de ton naviagateur, et regarde ce qu'il s'y passe.

Je dirais bien que c'est parce que tu inclus une seconde fois jQuery, déjà inclus par meta.html... A toi de voir.

OpenStudio Toulouse

Offline

#3 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(18-01-2013 16:55:52)

Voila ce que c'est que de travailler sur des trucs en anglais ... Effectivement avec incluRe ça va mieux et d'ailleurs j'avais aussi oublié un élément (class grid). Cela devient donc :

<div id="bxslider" class="grid_6">
#INCLURE "template/bxslider.html"
</div>

et le résultat http://thelia.caseo.fr

Bon il ne fonctionne qu'en mode manuel et non par défilement automatique mais ça devrait pouvoir se régler ...

Par contre, plus gênant, il reste affiché par dessus le menu, rendant celui-ci illisible !!!

MERCI !

Last edited by caseo (18-01-2013 17:15:57)

Offline

#4 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(18-01-2013 17:35:51)

Hum ... le tranfert des fichiers d'appel JQuery dans meta.html ou meta_contenu.html ne change rien ...

Offline

#5 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(18-01-2013 17:46:39)

c'est pas un appel, mais une inclusion. et on n'inclus pas 2 fois jQuery.

OpenStudio Toulouse

Offline

#6 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(18-01-2013 22:59:40)

J'ai donc supprimé l'inclusion JQuery dans index.html !

... et toujours les deux mêmes problèmes !!!

Offline

#7 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(18-01-2013 23:59:46)

Déjà, lis la doc de ton slider, tu vas vite trouver l'option d'initialisation qui lui indique de démarrer automatiquement.

Pour le menu, il te suffit de bidouiller le z-index dans le css, et ça va le faire.

OpenStudio Toulouse

Offline

#8 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(19-01-2013 00:17:12)

Je vais me plonger dans le css.

Les options d'initialisation ne fonctionnant pas j'ai refait une install de FlexSlider ( http://www.woothemes.com/flexslider/ ) histoire de voir ... et cette fois cela fonctionne !! allez savoir pourquoi !!

Merci encore

Offline

#9 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(19-01-2013 01:44:26)

Point de z-index dans le style.css du template. J'en ai rajouté un peu partout dans les #nav, de différentes valeurs et ... rien.

J'ai trouvé une solution toute simple (homologuée ?) en rajoutant un z-index: -1; dans le fichier css de flexslider ...

Pour ceux qui ont raté un épisode je peux vous faire une récap propre avec flexslider.

Offline

#10 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(24-01-2013 15:44:23)

Tant qu'on est dans les sliders, j'ai une question qui concerne la version 1.5.3.4. En fait, j'utilise un slider qui s'appelle easyslider1.7.
Il fonctionne très bien sur un version de Thelia 1.5.1, mais lorsque je l'installe sur une version 1.5.3.4, impossible de faire défiler les images.
Voici ce que j'ai :
- Dans les metas :

<!-- slider -->
	<link href="template/css/screen.css" rel="stylesheet" type="text/css" media="screen" />	
	<script type="text/javascript" src="template/js/easySlider1.7.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				speed:2000,
				pause:5000,
				auto: true, 
				continuous: true,
				numeric: false
			});
		});	
	</script>

le code de mon slider :

	<div id="container">
		<div id="contentslider">
			<div id="slider">
				<ul>				
					<THELIA_CONTENU type="DOSSIER" id="2">
						<THELIA_IMAGE type="IMAGE" dossier="#ID" >
						<li><a href="#" target="_blank"><img src="#IMAGE" alt="#TITRE" title="#TITRE" width="750" height="160"/></a></li>
						</THELIA_IMAGE>
					</THELIA_CONTENU>
				</ul>
			</div>		
		</div>
	</div>

Je dois dire que ma boucle est bonne puisque la première image s'affiche. Mon seul souci est qu'apparemment le js ne fonctionne plus. Il me semble que l'appel est bon, pourtant. Dans la console du navigateur, il ne me signale rien de particulier.
Et n'oublions pas que le même code fonctionne très bien sous un thélia v1.5.1.
D'où ma question, quelque chose manque-t-il dans les métas ? Est-ce que quelque chose a changé avec la nouvelle version ?
J'ai bien sûr essayé de réinstaller, tout propre, mais ça n'a rien changé. Alors si quelqu'un a une idée, je suis preneuse !
Merci,

Al.

v. 1.5.4 - v 2.3.4 - v 2.4.3

Offline

#11 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(25-01-2013 03:16:13)

src="js/jquery.js"

peut etre: src="js/libs/jquery-1.6.2.js

le-bouquiniste.com                                                      tongue  plugin 1.4.x / 1.5   => valeurstock / Mailpaiement / formcontact

Offline

#12 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(25-01-2013 10:06:13)

Bonjour,

Peut-être en mettant le Javascript dans le <body></body> de ta page ( au début ou à la fin, à essayer...)

Offline

#13 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(25-01-2013 11:32:34)

Merci de vos réponses.
J'ai essayé en mettant le js dans le body (au début et à la fin), ça n'a rien changé.
J'ai rajouté dans les metas     <script type="text/javascript" src="template/js/libs/jquery-1.6.2.js"></script> mais, là non plus ça n'a rien changé.
Vous avez des sliders qui marchent, vous, sur une 1.5.3.4 ?
Peut-être que le mien est trop ancien ?
Je vais essayer autre chose, on ne sait jamais.
Al.

v. 1.5.4 - v 2.3.4 - v 2.4.3

Offline

#14 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(25-01-2013 11:42:29)

Regarde un peu plus haut smile j'ai utilisé Flexslider avec succes.

Offline

#15 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(25-01-2013 11:48:12)

Je vais essayer ça. En attendant, j'ai mis un diaporama qui fonctionne parfaitement. Donc, c'est mon code qui doit avoir un pb ou mon easyslider.
Merci à tous,
Al.

v. 1.5.4 - v 2.3.4 - v 2.4.3

Offline

#16 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(25-01-2013 15:27:41)

jquery doit être chargé avant le plugin (attention au chemin):

<script type="text/javascript" src="template/js/jquery.js"></script>
<script type="text/javascript" src="template/js/easySlider1.7.js"></script>

Il y a plusieurs version de jquery installées sur thelia 1.5.3.4, la version que vous semblez tenter de charger ainsi est la version 1.0.4, il est possible qu'elle ne fonctionne pas avec le plugin.
essayez de charger la version 1.3.2 :

<script type="text/javascript" src="template/js/jquery-1.3.2.min.js"></script>

vous pouvez aussi charger la version 1.4.2

<script type="text/javascript" src="lib/jquery/jquery.js"></script>

Il faut savoir également que  les plugins jquery sont en général assez pointus en terme de CSS et il est souvent nécessaire de consulter attentivement la doc.

Last edited by jhr (25-01-2013 15:39:10)

Offline

#17 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(29-01-2014 15:32:21)

Bonjour,
J'ai mis en place le slider nommé Bslider, mais je il ne fonctionne pas avec Firefox 26.0.
Tout fonctionne avec IE, Chrome et Safari, quelqu'un pouvait m'aider ?
Le head

   <!-- Pslider -->
<script src="bxslider/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script type="text/javascript" src="bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="bxslider/jquery.bxslider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.bxslider').bxslider();
  });
</script>

et le html

<!-- PSlider pour image intro-->  
<script type="text/javascript">
$(document).ready(function(){
	$('#pslideshow_2_1 .pslideshow').bxSlider({
		 pager:0,
		 controls:0,
		 pause:4000,
		 speed:400,
		 infiniteLoop:true,
		 auto:true,
		 prevText: '',
		 nextText: '',
		 randomStart:0,
		 mode:'horizontal'
	});	
});
</script>
<style type="text/css">
#pslideshow_2_1 {
	width:530px;
	margin-bottom: 19px;
	margin-right: 19px;
	float: right;
	background-color: #FFFFFF;
	display: block;
	border: ;
	overflow: visible;   }
.pslideshow {
	  }
</style>
<THELIA_RUBRIQUE type="RUBRIQUE" id="21">
<div id="pslideshow_2_1">
<div class="pslideshow">
<THELIA_PRODUIT type="PRODUIT"  rubrique="#ID" deb="0" courant="0" classement="manuel" ><THELIA_IMAGE1 type="IMAGE" largeur="559" hauteur="295" num"1" produit="#ID" >
<img src="#IMAGE" width="559" height="295" title="#TITRE" /></THELIA_IMAGE1></THELIA_PRODUIT>
</div></div>
</THELIA_RUBRIQUE>

Offline

#18 Re: Slider sur la page d'accueil du template de base ... c'est pô facile !

(29-01-2014 18:02:45)

il ne fonctionne pas avec Firefox 26.0

C'est à dire ? Que se passe-t-il exactement ? Il y a des erreurs Javascript ?

OpenStudio Toulouse

  • Index
  • Thelia 1
  • Développement
  • Slider sur la page d'accueil du template de base ... c'est pô facile !