cloud caroussel + attribut title

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

J'ai intégré le formidable caroussel"cloud caroussel"
et je souhaite juste modifier l'affichage du texte de chaque image.
via l'attribut title de la balise <img.../>
Savez-vous comment afficher cette description dans un bloc "div" pour chaque image ?

La solution est autour de la ligne 142 du fichier .js mais je n'emploi pas la bonne méthode pour "appeler" ma "div" à la place de l'attribut title :

Code:

$(options.titleBox).html(($(event.target).attr('title') ));

Merci bcp pour votre aide.
Ps: fichier js joint

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
49
50
 
<html>
<head>
 
<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-carousel.1.0.0.js"></script>
 
<script>
$(document).ready(function(){
 
	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(		
		{			
			xPos: 128,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")
		}
	);
});
 
</script>
 
</head>
    <body>
    	<!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">            
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <img class = "cloudcarousel" src="/images/carousel/flags/flag1.png" alt="Flag 1 Description" title="Flag 1 Title" /><div id="description1"></div>
            <img class = "cloudcarousel" src="/images/carousel/flags/flag2.png" alt="Flag 2 Description" title="Flag 2 Title" />
            <img class = "cloudcarousel" src="/images/carousel/flags/flag3.png" alt="Flag 3 Description" title="Flag 3 Title" />
            <img class = "cloudcarousel" src="/images/carousel/flags/flag4.png" alt="Flag 4 Description" title="Flag 4 Title" />
        </div>
 
        <!-- Define left and right buttons. -->
        <input id="left-but"  type="button" value="Left" />
        <input id="right-but" type="button" value="Right" />
 
        <!-- Define elements to accept the alt and title text from the images. -->
        <p id="title-text"></p>
        <p id="alt-text"></p>
    </body>
</html>

13/12/2012, 18h59
SylvainPV

bonjour,

Je pense que tu as mal compris le fonctionnement. Tu stockes l'information dans title, et le script l'affiche dans ton sélecteur titleBox quand tu passes ton curseur sur l'élément du carousel.

Il te suffit donc de faire un <div id="title-text"> ou de changer le sélecteur titleBox lors de l'appel du plug-in.

Bonjour,

Merci pour ta réponse.

Je ne souhaite justement pas récupérer l'information dans title mais dans une div qui serait liée à chaque image pour éviter l'affichage du tag au survol de l'image (affichage très lourd comme dans l'exemple ci-dessous).

J'espère que tu pourras m'aider.

Je te remercie, bonne journée.

Code:

1
2
3
4
5
6
7
8
9
 <img class = "cloudcarousel" src="http://www.energies-renouvelables.org/media/photos/portail/couv_jdp8_120.jpg" alt="Systèmes Solaires, le journal du Photovoltaïque"  title="<div class='blocjaune2'><h4 align='center'>Journal du Photovoltaïque</h4>
                                <h4 align='center' style='font-weight: normal;'>Novembre 2012</h4>
                                         <div>
                                                <span>- L'atlas 2013 des grandes centrales solaires en France </span><br />
                                                        <span>- Où en sont les couches minces ?</span><br />
                                        <span>- Une filière française en mode mineur </span><br />
                                    </div>
                                  <p class='plus'><a href='/sommaire_jdp.asp'>Sommaire complet</a></p>
                                  <p class='plus'><a href='/sommaire_jdp.asp'>Acheter ce numéro</a></p></div>" />

D'accord, effectivement là ça te demande un peu de travail sur le plug-in.

Une piste :

Code:

1
2
 
$(options.titleBox).html( $(event.target).next('.image-description').html() );

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<img class="cloudcarousel" src="http://www.energies-renouvelables.org/media/photos/portail/couv_jdp8_120.jpg" alt="Systèmes Solaires, le journal du Photovoltaïque"/>
<div class='blocjaune2 image-description'>
<h4 align='center'>Journal du Photovoltaïque</h4>
<h4 align='center' style='font-weight: normal;'>Novembre 2012</h4>
<div class="image-description">
<span>- L'atlas 2013 des grandes centrales solaires en France </span>
<br />
<span>- Où en sont les couches minces ?</span>
<br />
<span>- Une filière française en mode mineur </span>
<br />
</div>
<p class='plus'><a href='/sommaire_jdp.asp'>Sommaire complet</a></p>
<p class='plus'><a href='/sommaire_jdp.asp'>Acheter ce numéro</a></p>
</div>

Et ne pas oublier de cacher le HTML de description:

Code:

1
2
3
4
 
img.cloudcarousel + .image-description {
   display:none;
}

Tu peux aussi éviter de toucher au code du plug-in en déclarant tes propres évènements mouseover sur les images. A toi de voir