Bug avec un script dans un fichier TPL

[dkbane]

Bonjour,

 

Je vais tâcher de vous exposer clairement mon problème dans l'espoir que quelqu'un puisse m'aider.

 

Tout d'abord, voici le lien vers une fiche produit, c'est ici que j'ai un soucis :

http://cadrespro.com...-ipod-nano.html

 

- Si on ouvre avec chrome, le bug est visible de la manière suivante : il s'agit de la galerie photo du produit, celle-ci est presque non-visible (on voit simplement un ipod bleu). Elle apparait correctement une fois que l'on a cliqué sur "inspecter l'élément".

 

- Si on ouvre avec firefox, la galerie est visible mais on remarque alors une foto en bas à gauche (un ipod jaune, sous l'ipod noir).

 

J'ai tenté de le résoudre avec du CSS mais rien n'y fait. J'ai donc cherché ailleurs et j'ai trouvé le problème, il vient d'un script :

 

				<script type="text/javascript">
					jQuery('.thumbnail-arrow.prev').addClass('disabled');
					jQuery('.zoom-gallery').iosSlider({
					desktopClickDrag: true,
					snapToChildren: true,
					infiniteSlider: false,
					navNextSelector: '.thumbnail-arrow.next',
					navPrevSelector: '.thumbnail-arrow.prev',

					onFirstSlideComplete: function(){
					jQuery('.thumbnail-arrow.prev').addClass('disabled');
				},
				onLastSlideComplete: function(){
				jQuery('.thumbnail-arrow.next').addClass('disabled');
			},
			onSlideChange: function(){
			jQuery('.thumbnail-arrow.prev').removeClass('disabled');
			jQuery('.thumbnail-arrow.next').removeClass('disabled');
		}
	});			  
				</script>

 

Ce script est dans mon fichier product.tpl.

 

Si je le supprime, la galerie s'affiche correctement mais alors celle-ci ne défile plus quand je clique sur les flèches de défilement.

 

Je suppose donc qu'il y a un problème soit dans le script, dans le fichier CSS correspondant au script.

 

Problème : mon niveau en JS est 0 et mon niveau en CSS est très faible, j'ai donc besoin de vous.

 

En vous remerciant par avance =)

 

p.s.1 : voici le thème dans sa version démo avec la galerie qui fonctionne, si ça peut aider :

http://metro.ecommer...oduct&id_lang=1(j'ai bien entendu comparé les deux fichiers TPL qui sont identiques au niveau du JS!)

 

p.s.2 :

Voici une partie du CSS correspondant à un intitulé du script :

.iosSlider {

overflow: hidden;
width: 690px;
height: 344px;
margin:auto 0 0px;
float:left;
}
.iosSlider .slider {
width: 100%;
height: 100%;
}
.iosSlider .slider .slide {
width: 100%;
height: 100%;
padding: 0 0 0 0;
position: relative;
}
.tintButton {  
color:#fff!important;
cursor:pointer;
padding:5px 12px;
font-size:12px;
font-weight: normal;
text-decoration: none;
}

/*
Bullets and thumbnails navigation
*/
.iosSlider .sliderNavi {
position: absolute;
right:15px;
bottom:15px;
}
.iosSlider .sliderNavi .naviItem {

float: left;
 background: none repeat scroll 0 0 #EAE5E4;
cursor: pointer;
display: block;
font-size: 0;
height: 15px;
text-indent: -9999px;
width: 50px;
border:3px solid #fff;
}
/* Current bullet */
.iosSlider .sliderNavi .naviItem.selected {
background:#F15A3B;
}
/* Bullet hover state */
.iosSlider .sliderNavi .naviItem:hover {
background:#F15A3B;
}
.iosSlider:hover .prev,
.iosSlider:hover .next {
display:block;
}
.iosSlider .prev,
.iosSlider .next
{
display:none;

position: absolute;
z-index: 25;
width: 45px;
height: 45px;
top:165px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 � ���� */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}
.iosSlider .next {
width: 40px;
height: 40px;
cursor: pointer;

}
.iosSlider .next:hover,
.iosSlider .next:focus {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE 5.5+*/
-moz-opacity: 1; /* Mozilla 1.6 � ���� */
-khtml-opacity: 1; /* Konqueror 3.1, Safari 1.1 */
opacity: 1; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}
.iosSlider .next:active {


}
.iosSlider .prev {
width: 40px;
height: 40px;
cursor: pointer;

}

.iosSlider .prev:hover,
.iosSlider .prev:focus {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE 5.5+*/
-moz-opacity: 1; /* Mozilla 1.6 � ���� */
-khtml-opacity: 1; /* Konqueror 3.1, Safari 1.1 */
opacity: 1; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}
.iosSlider .prev:active {

}
/* left arrow */
.iosSlider .prev {
left: 15px;
}
/* right arrow */
.iosSlider .next {
right: 15px;
}

Edited August 26, 2013 by benko (see edit history)

[Julien64]

Bonjour,

 

 

En comparant rapidement votre site avec la version de démo du thème je remarque que les tailles des images des vignettes ne sont pas les mêmes: 58x58 pixels chez vous alors que c'est 68x68 pixels sur la démo.

 

Je ne sais pas si ça va résoudre votre problème mais essayez déjà de changer cette taille (medium_default) et de régénérer les miniatures.

[dkbane]

Bonjour,

 

Et merci.

 

C'est formidable, le problème est résolu sur Firefox.

 

Par contre, sur Chrome c'est pire lol

[Julien64]

Ah oui je viens de regarder et en inspectant le code sur Chrome, au chargement de la page l'élément ul dont l'ID est "thumbs_list_frame" a une largeur qui est calculée et qui semble mauvaise et aléatoire: une fois 75px ensuite 99px etc...

 

Il faut s'orienter vers la mais je vais pas pouvoir vous aider plus sur ce thème que je ne connais pas..

[dkbane]

OK, merci.

 

Je dois dire que je sèche également

 

En espérant tomber sur un bon samaritain ^^