JQuery - Cycle - Image de taille différente - Centrage [Résolu]

[Seboubou86]

Bonjour,

J'affiche un fondu d'image enchainé dans un div avec le plugin "Cycle" de jQuery. Le problème c'est que mes images ne sont pas toute de la même taille. Du coup je n'arrive pas à centrer l'image de le div.

Voici mon code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style type="text/css">
 
 
	.slideshow {	
		height: 350px;
		width: 800px;
		top : 20px;
		margin : auto;
		vertical-align : middle;
		text-align : center;	
		background-color : #000000;
		z-index:1;}
 
	.slideshow img {
		margin : auto;
		padding : auto;
		height : 350px;
		vertical-align : middle;
		text-align : center;
		border : 1px solid #000000;
		box-shadow :0 0 5px black;
		}
</style>
 
 
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.slideshow').cycle({fx: 'fade' /*choose your transition type, ex: fade, scrollUp, shuffle, etc...*/});
		$('.slideshow').cycle({timeout: 500});
	});
</script>
 
<div class="slideshow">
	<img src="Images/Home/home1.jpg"/>							
	<img src="Images/Home/home2.jpg"/>
	<img src="Images/Home/home3.jpg"/>
	<img src="Images/Home/home4.jpg"/>
	<img src="Images/Home/home5.jpg"/>
	<img src="Images/Home/home6.jpg"/>
	<img src="Images/Home/home7.jpg"/>
	<img src="Images/Home/home8.jpg"/>
	<img src="Images/Home/home9.jpg"/>
	<img src="Images/Home/home10.jpg"/>
	<img src="Images/Home/home11.jpg"/>
	<img src="Images/Home/home12.jpg"/>
</div>

Quelqu'un a-t-il une idée ?

[NoSmoking]

Bonsoir,
et dans toutes les options disponibles tu n'as pas trouvé ta vie...
jQuery Cycle Plugin - Option Reference

[Seboubou86]

Alors je n'ai rien trouvé qui me permette de corriger mon problème. J'ai pourtant déjà cherché dans la liste que tu me propose. Est-ce qu'une option m'aurait échappé ?

[NoSmoking]

as tu essayé de mettre les width et height sur tes images ?

Code :

<img src="Images/Home/home1.jpg" width="250" height="200" >

[SpaceFrog]

J'aurais tenté de mettre les images dans un conteneur avec un margin auto et de faire le cycle sur les conteneurs ...

[Seboubou86]

Alors à la base je précisais le Width et le Height sur chaque image, mais cela ne change rien au problème. La taille change mais l'image reste alignée à gauche.

J'ai également tenté de placé les images dans un tableau <Table> avec une seule ligne et case, en lui appliquant un alignement centrer.

Style :

Code :

1
2
3
4
5
6
7
8
 
	.slideshow table{
		width : 100%;	
		}
 
	.slideshow td{
		text-align : center;
		}

Html :

Code :

1
2
3
4
 
	<table><tr><td>
		<img src="Images/Home/home4.jpg" width=215 height=350/>
	</td></tr></table>

Avec cette manière de faire, la première image est centrée mais lorsque le cycle revient sur la première photo l'image est à nouveau alignée à gauche.

[SpaceFrog]

en fait il faut regarder le code généré et voir dans quelle balise et avec quelle classe jQuery mets tes images ...
Avec la webdevtool bar de ffx => voir source>voir code source généré

[Seboubou86]

Voilà ce que me génère JQuery comme code Html :

Code :

1
2
3
4
5
<div style="position: relative;" class="slideshow">
 
		<img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0; width: 215px; height: 350px;" src="Images/Home/home4.jpg" height="350/" width="215">
 
</div>

Du coup, je vois pas trop quoi faire. Je suis obligé de retouché les photos et de poser un fond noir derrière celle qui n'ont pas le bon format.... Ou alors je trouve un autre plugin de fondu enchaîné... Soit il y a une solution sous mon nez (c'est surement le cas) que je ne vois pas.

[NoSmoking]

Envoyé par SpaceFrog

J'aurais tenté de mettre les images dans un conteneur avec un margin auto et de faire le cycle sur les conteneurs ...

et dans le vrai...

En encapsulant les images dans une DIV et en y mettant le bon CSS cela le fait

Code html :

1
2
3
4
5
<div class="slideshow">
  <div class="xx"><img src="image1.jpg"></div>
  <div class="xx"><img src="image2.jpg"></div>
  <div class="xx"><img src="image3.jpg"></div>
</div>

pour le CSS

Code css :

1
2
3
4
5
.xx{
  line-height : 300px;
  width : 300px;
  text-align : center;
}

assure le centrage des images à l'intérieur de la DIV, et pour les images un simple

Code css :

1
2
3
.xx img{
  max-width : 100%;
}

pour éviter les débordements

[Seboubou86]

Merci beaucoup pour votre aide sa fonctionne à merveille !

Je ne comprend du coup pas pourquoi ma "magouille" avec le tableau ne fonctionnait pas. Je pensais que c'était à cause du plugin Cycle qui ne trouvait pas les images du fait des balises intermédiaire entre le div slideshow et les différentes images. Mais apparemment le cycle se fait malgré cela.