Partage

[jQuery UI] un genre de slide photo

problème pour faire apparaitre 2 divs

Sujet résolu

21 avril 2010 à 17:58:53

Bonjour a tous,

Je dois faire, dans le cadre d'un projet de groupe, un slide photo de se style:
Image utilisateur

Le problème est que je n'arrive pas a faire apparaitre le texte en dessous quand l'image correspondant est affiché en grand.

Voila le code:

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
		$("#petites-images > ul").tabs({
			fx:{
				opacity: "toggle", 
				duration:'fast'
			}, event: 'mouseover'
		}).tabs("rotate", 5000, false);
		
		$("#petites-images > ul").mouseover(function() {
			$("#petites-images > ul").tabs("rotate", 0, false);
		});
		
		$("#petites-images > ul").mouseout(function() {
			$("#petites-images > ul").tabs("rotate", 5000, false);
		});
});
</script>
<div id="center">
<div id="slider">
<div id="grande-image">
<?php
	$tailletmp;
	$margintop;
	for($i=0;$i<count($nomImage);$i++){
		$tailletmp = dimImg('./photo-une/'.$nomImage[$i],292,360);
		$margintop = calculTop($tailletmp['h'],360);
		echo '
		<div id="fragment-'.($i+1).'" class="ui-tabs-panel" style="">
			<img alt="'.$nomImage[$i].'" src="photo-une/'.$nomImage[$i].'"  style="width:'.$tailletmp['l'].'px; 
			height:'.$tailletmp['h'].'px; margin:'.$margintop.'px 0 0 0;" alt="" />
		</div>
		';
	}
?>
</div>
<div id="petites-images">
<ul class="ui-tabs-nav">
	<?php
	for($i=0;$i<count($nomImage);$i++){
		echo '
		<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-'.($i+1).'">
		<a href="#fragment-'.($i+1).'">
			<img src="photo-une/'.$nomImage[$i].'" width="151" height="72" border="0" alt="" />
		</a>
		</li>
		';
	}
	?>
  </ul>
</div>
</div>
<div id="introSlide">
	<a href="#" id="id-1">ezjoijfoiezjfoi</a>
	<a href="#" id="id-2">kljgvkjszx;zkojgf</a>
	<a href="#" id="id-3">ezqxkjezij,cz64</a>
</div>
</div>

$2b||!$2b

Golmote

22 avril 2010 à 17:58:16

skuti, tu n'es toujours pas au courant que le PHP ne nous sert strictement à rien pour débugguer du JS ? Donne le code HTML généré.

skuti

23 avril 2010 à 1:34:46

Autant pour moi

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
		$("#petites-images > ul").tabs({
			fx:{
				opacity: "toggle", 
				duration:'fast'
			}, event: 'mouseover'
		}).tabs("rotate", 5000, false);
		
		$("#petites-images > ul").mouseover(function() {
			$("#petites-images > ul").tabs("rotate", 0, false);
		});
		
		$("#petites-images > ul").mouseout(function() {
			$("#petites-images > ul").tabs("rotate", 5000, false);
		});
});
</script>
<div id="center">
<div id="slider">
<div id="grande-image">
                <div id="fragment-1" class="ui-tabs-panel" style="">
			<img alt="image1.jpg" src="photo-une/image1.jpg"  style="width:352px; 
			height:450px; margin:2px 0 0 0;" alt="" />
		</div>
                <div id="fragment-2" class="ui-tabs-panel" style="">
			<img alt="image2.jpg" src="photo-une/image2.jpg"  style="width:352px; 
			height:450px; margin:2px 0 0 0;" alt="" />
		</div>
                <div id="fragment-3" class="ui-tabs-panel" style="">
			<img alt="image3.jpg" src="photo-une/image3.jpg"  style="width:352px; 
			height:450px; margin:2px 0 0 0;" alt="" />
		</div>
</div>
<div id="petites-images">
<ul class="ui-tabs-nav">
        <a href="#fragment-1">
               <img src="photo-une/image1.jpg" width="151" height="72" border="0" alt="" />
        </a>
        <a href="#fragment-2">
               <img src="photo-une/image2.jpg" width="151" height="72" border="0" alt="" />
        </a>
        <a href="#fragment-3">
               <img src="photo-une/image3.jpg" width="151" height="72" border="0" alt="" />
        </a>
  </ul>
</div>
</div>
<div id="introSlide">
	<a href="#" id="id-1">ezjoijfoiezjfoi</a>
	<a href="#" id="id-2">kljgvkjszx;zkojgf</a>
	<a href="#" id="id-3">ezqxkjezij,cz64</a>
</div>
</div>

$2b||!$2b

Golmote

23 avril 2010 à 10:27:07

Pourquoi dans ton HTML généré, y'a pas de <li> dans ton <ul> ?

Quelle partie de ton code est censée afficher le texte de la photo ?

T'as quoi comme CSS avec ça ?

skuti

23 avril 2010 à 12:32:39

Bien ouej! J'ai oublié de mettre les <li> en effet, quel boulet

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
		$("#petites-images > ul").tabs({
			fx:{
				opacity: "toggle", 
				duration:'fast'
			}, event: 'mouseover'
		}).tabs("rotate", 5000, false);
		
		$("#petites-images > ul").mouseover(function() {
			$("#petites-images > ul").tabs("rotate", 0, false);
		});
		
		$("#petites-images > ul").mouseout(function() {
			$("#petites-images > ul").tabs("rotate", 5000, false);
		});
});
</script>
<div id="center">
<div id="slider">
<div id="grande-image">
                <div id="fragment-1" class="ui-tabs-panel" style="">
			<img alt="image1.jpg" src="photo-une/image1.jpg"  style="width:352px; 
			height:450px; margin:2px 0 0 0;" alt="" />
		</div>
                <div id="fragment-2" class="ui-tabs-panel" style="">
			<img alt="image2.jpg" src="photo-une/image2.jpg"  style="width:352px; 
			height:450px; margin:2px 0 0 0;" alt="" />
		</div>
                <div id="fragment-3" class="ui-tabs-panel" style="">
			<img alt="image3.jpg" src="photo-une/image3.jpg"  style="width:352px; 
			height:450px; margin:2px 0 0 0;" alt="" />
		</div>
</div>
<div id="petites-images">
<ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
            <a href="#fragment-1">
               <img src="photo-une/image1.jpg" width="151" height="72" border="0" alt="" />
            </a>
        </li>
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2">
            <a href="#fragment-2">
               <img src="photo-une/image2.jpg" width="151" height="72" border="0" alt="" />
            </a>
        </li>
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-3">
            <a href="#fragment-3">
               <img src="photo-une/image3.jpg" width="151" height="72" border="0" alt="" />
            </a>
        </li>
  </ul>
</div>
</div>
<div id="introSlide">
	<a href="#" id="id-1">ezjoijfoiezjfoi</a>
	<a href="#" id="id-2">kljgvkjszx;zkojgf</a>
	<a href="#" id="id-3">ezqxkjezij,cz64</a>
</div>
</div>

$2b||!$2b

Golmote

23 avril 2010 à 13:49:36

Euh... j'ai posé trois questions... :-°

Citation : Golmote

Quelle partie de ton code est censée afficher le texte de la photo ?

T'as quoi comme CSS avec ça ?

skuti

23 avril 2010 à 14:05:30

C'est pas possible je vais y arriver

La partie qui affiche le texte de chaque photo c'est la div introSlide.Chaque <a> a l'interieur est censé représenter le texte de chaque photo, d'où les id-1, id-2 et id-3. C'est donc ces textes qu'il faut que j'affiche en fonction de l'image.

Et puis le css que j'ai n'est pas trés important, il y a juste la taille de la grande div qui contient la grande photo puis la taille du div qui contient les petites photos sur la droite et puis la taille du div qui contient le texte en dessous. Classique quoi!

/*************** Slider photo au centre ******************/

#center{
	width:472px;
	height:470px;
	position:relative;
	float:left;
}

#slider{
	width:448px;
	height:362px;
	float:left;
	margin:61px 0 0 23px;
}

#introSlide{
	width:425px;
	height:100px;
	float:left;
	margin:0 0 0 23px;
}

#grande-image{
	width:292px;
	height:360px;
	background-color:#171717;
	float:left;
}

#petites-images{
	width:151px;
	height:360px;
	float:left;
}

/* Autre fichier css */
#grande-image  .ui-tabs-hide{
	display:none;
}

#petites-images ul{
	list-style:none;
	margin:0;
	padding:0;
}

#petites-images ul li{
	margin:0;
	padding:0;
	opacity:0.5;
}

.ui-tabs-panel{
	text-align:center;
}

#petites-images ul li:hover{
	margin:0;
	padding:0;
	opacity:1;
}

#petites-images ul li a{
	margin:0;
	padding:0;
	border:0;
	text-decoration:none;
	display:block;
}

$2b||!$2b

Golmote

23 avril 2010 à 15:42:34

J'arrive pas à obtenir un truc potable >_<

T'aurais pas la page online ?

Sinon pour le problème en lui-même, je comprends pas bien ce qui te bloque... Il te suffit de détecter l'image active et de modifier le display des liens en fonction.

skuti

23 avril 2010 à 19:55:18

J'ai testé avec un truc comme sa:

var img = document.getElementById('fragment-1');
if(img.style.display == "block")
    /* afficher le texte qui va avec l'image */

Mais sa n'a pas marcher

Et puis je suis desolé j'ai pas ftp pour pouvoir le mettre en ligne

$2b||!$2b

Golmote

23 avril 2010 à 21:24:14

Non mais c'pas possible quoi. Tu traînes sur le forum depuis un bail et tu sais toujours pas faire du JS ? o_O

Déjà, tu charges la librairie jQuery, alors utilise-la ! Abuses-en même. Maintenant qu'elle est là, faut rentabiliser.

Donc fini les gEBI, bonjour les sélecteurs CSS de Sizzle directement dans $().

skuti

24 avril 2010 à 0:51:04

Lol

Non mais en faite j'utilise que très peu jQuery donc c'est pas mon fort, mais en faite ce truc la c'est pas moi qui est fais ce code je l'ai juste intégré. Vue qu'on est censé travaillé a deux. Et je connais pas du tout son truc et impossible de le joindre donc je demande de l'aide. Et puis si tu regarde bien sa faisait très longtemps que j'avais pas posté pour du JS

Quand au selecteur jQuery je sais pas trop comment on fait.
C'est pas un truc du genre:

if($('#fragment-1').is(":visible"))

$2b||!$2b

Golmote

24 avril 2010 à 12:22:26

Oui, je commençais à soupçonner que le code n'était pas de toi... :-°

Le problème, c'est que tu reprends un code que tu ne comprends pas... en fait... Et ça c'est pas possible.

Sinon, ta condition semble correcte oui. Elle test si l'élément ayant pour id fragment-1 est visible.

skuti

24 avril 2010 à 12:34:08

Ok je vais tester et je te dis si sa fonctionne.

Et puis je sais que c'est pas de moi mais il fallait bien qu'il fasse quelque chose puisque j'ai fais tout le reste. Mis à part ça j'ai quand même réussi a faire le reste

Et puis ne t'inquiete pas je vais bientôt m'améliorer de façon considérable en js puisque je vais travaillé avec un mec qui utilise toutes (et je dis bien toutes) les fonctionnalités de javascript.

EDIT:
Bon alors j'ai utilisé sa:

$('#id-1').hide();
$('#id-2').hide();
$('#id-3').hide();
changeOp();
var Timeur;
function changeOp(){
	if($('#fragment-1').is(':visible')){
		$('#id-2').hide();
		$('#id-3').hide();
		$('#id-1').show();
		Timeur = setTimeout('changeOp',200);
	}else if($('#fragment-2').is(':visible')){
		$('#id-1').hide();
		$('#id-3').hide();
                $('#id-2').show();
		Timeur = setTimeout('changeOp',200);
	}else if($('#fragment-3').is(':visible')){
		$('#id-1').hide();
		$('#id-2').hide();
		$('#id-3').show();
		Timeur = setTimeout('changeOp',200);
	}
}

Mais sa marche pas, il n'y a que le premier texte qui s'affiche et il reste affiché.

$2b||!$2b

Ptt-homme

24 avril 2010 à 13:28:03

C'est normal que cela ne marche pas, réfléchi un peu et poses toi les bonnes questions sur ce code! Qui fait quoi et pourquoi?

Golmote

24 avril 2010 à 14:44:39

Les setTimeout ne fonctionneront pas comme ça de toutes façons... :-°

Bonnes pratiques JavaScript

skuti

24 avril 2010 à 15:34:43

J'avais oublier d'enlever les guillemets. Encore une boulette -_-*
Sa commence a faire beaucoup. C'est sur que si j'appelle une chaine de caractère ca va pas marché

Merci beaucoup, ca fonctionne now

EDIT: Encore une derniere question. Comment on peut selectionner toutes les <a> dans un div avec jQuery et compté le nombre.

$2b||!$2b

Golmote

24 avril 2010 à 15:59:26

Bah...

$("#id_du_div a").length

skuti

24 avril 2010 à 16:32:16

Escuse moi je me suis trompé de question, je voulais savoir comment selectionner le deuxieme <a> ou le troisieme dans un div?

$2b||!$2b

Golmote

24 avril 2010 à 16:36:18

$("#id_du_div a").eq(0); // premier
$("#id_du_div a").eq(1); // deuxième
$("#id_du_div a").eq(2); // troisième

skuti

24 avril 2010 à 17:12:04

C'est magique

Encore une fois super Golmote a la rescousse

Mille merci

$2b||!$2b

Golmote

24 avril 2010 à 17:23:01

Puis-je me permettre de faire remarquer que jQuery a une doc... et que tout y est marqué :-°

http://docs.jquery.com/Main_Page

Mais de rien

skuti

24 avril 2010 à 19:08:22

En effet mais c'est tellement plus simple quand tu explique

Je lèche le cul de personne hein

$2b||!$2b

Anonyme

14 décembre 2010 à 16:49:51

Bonjour, je viens de découvrir le sujet, et je débute pas mal en programmation de site.
Et, je voulais savoir si le code final étais sur la page. Car ça m'intéresse.
Merci d'avance.