titre avec le plugin Ad-gallery [Résolu]

[TRUNCKS]

Bonjour,

J'essaye de mettre le titre de l'image sur la galerie Ad-galerie à l’extérieur de l'image. ( De base, le titre est à l’intérieur )

Mais c'est en Anglais et je ne comprend pas tout.
Quelqu'un peut il me donner un coup de main, il ne me reste plus que ce soucis pour cette galerie:

http://coffeescripter.com/code/ad-gallery/

J'ai trouvé ceci à remplacer:

Problem for others – Description outside image.

Just recode the code following the call to “_getDescription” to put in your own div instead.

HTML Page I added:

JS File I updated my own div with the desc as shown:

Code :

1
2
3
4
5
6
7
8
9
if(desc) {
if(!this.settings.description_wrapper) {
$('.ad-desc-container').html(desc);
var width = size.width - parseInt(desc.css('padding-left'), 10) - parseInt(desc.css('padding-right'), 10);
desc.css('width', width +'px');
} else {
this.settings.description_wrapper.append(desc);
}
};

Mais je dois faire quoi ensuite, faire une div qui appelle cette fonction ?

[arno15]

Salut,

A mon avis non tu ne dois pas faire de div qui appelle cette fonction. Je pense que la librairie que tu utilise appelle d'elle même cette fonction a chaque fois qu'une image est chargé dans la vue principale. Par contre je pense que si tu veux sortir le titre de l'image de l'image, il faut que tu détermine à quoi correspond settings.description_wrapper car c'est à cet élément qu'est ajouté la description.

[TRUNCKS]

Justement je suis vraiment perdu.
Je n'y connais pas grand chose en Javascript et je n'arrive pas a taper dedans.

Je joins le js de la galerie, si quelqu'un peux y jeter un coup d'oeil et m'aiguiller sur ce que je dois faire, je capte vraiment pas grand chose sur le coup

[arno15]

OK, A mon avis il suffit que tu définisse le paramètre description_wrapper à l'initialisation du script.

Si tu regardes la doc sur la page du plugin il y a :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var galleries = $('.ad-gallery').adGallery({
  loader_image: 'loader.gif',
  width: 600, // Width of the image, set to false and it will read the CSS width
  height: 400, // Height of the image, set to false and it will read the CSS height
  thumb_opacity: 0.7, // Opacity that the thumbs fades to/from, (1 removes fade effect)
                      // Note that this effect combined with other effects might be resource intensive
                      // and make animations lag
  start_at_index: 0, // Which image should be displayed at first? 0 is the first image
  description_wrapper: $('#descriptions'), // Either false or a jQuery object, if you want the image descriptions
                                           // to be placed somewhere else than on top of the image
  animate_first_image: false, // Should first image just be displayed, or animated in?
  animation_speed: 400, // Which ever effect is used to switch images, how long should it take?
  display_next_and_prev: true, // Can you navigate by clicking on the left/right on the image?
  display_back_and_forward: true, // Are you allowed to scroll the thumb list?
  scroll_jump: 0, // If 0, it jumps the width of the container
...

Concrètement, tu définis la div dans laquelle tu veux que la description soit affichée. Par exemple :

Code :

1
2
 
<Div id="description-gallery" > </div>

Et à l'initialisation de la gallerie :

Code :

1
2
3
4
5
6
7
8
9
var galleries = $('.ad-gallery').adGallery({
  loader_image: 'loader.gif',
  width: 600, 
  height: 400,
  thumb_opacity: 0.7,
  start_at_index: 0, 
  description_wrapper: $('#description-gallery'),
  ...

En esperant que ça marche

[TRUNCKS]

Je vais tester ça et je te tiens au courant.

Merci infiniment pour le temps que tu as pris pour m'aider.

[TRUNCKS]

Cela a marché nickel !

Encore un gros gros merci pour ce coup de main !