Fader de contenu JQuery avec miniatures et auto-fader

Question

Je recherche un fader de contenu spécial avec des vignettes et un fondu automatique. En cherchant sur le web j'ai trouvé beaucoup de choses, mais pas ce que je cherche. La plupart du temps, vous pouvez faire glisser le contenu, mais pas fondu, si vous pouvez fondre, vous ne pouvez que faire fondre les images. Je l'essaie avec le plugin easing-plugin, mais cela ne peut pas disparaître, seulement glisser. Ensuite, j'essaie la "Galleria", ici vous ne pouvez pas effacer le texte ou quelque chose, seulement des images.

Voilà: j'ai quelques divs avec du texte (h, p, bouton, etc.) que je veux fondre. Je veux fondre en cliquant sur les vignettes mais aussi sur le fondu de contenu automatiquement.

Merci pour vos réponses!

Andreas

Answer 1

Ceci est la façon rapide et sale pour le faire fonctionner avec ce que vous avez:

$('#teaser-thumbs li').click(function(){ 
    var teaserDiv = '#' + $(this).children('a img').children('img').attr('title'); 
    $(this).fadeOut('slow'); 
    $(teaserDiv).fadeOut('slow'); 
}); 

Il a fallu une certaine façon de relier vos vignettes à vos DIVs, donc je devais ajouter un attribut TITLE aux vignettes comme suit:

<div id="teaser-thumbs"> 
    <ul> 
     <li><a><img src="teaser1_thumb.jpg" alt="" title="teaser1" /></a></li> 
     <li><a><img src="teaser2_thumb.jpg" alt="" title="teaser2" /></a></li> 
     <li><a><img src="teaser3_thumb.jpg" alt="" title="teaser3" /></a></li> 
    </ul> 
</div> 

Si vos vignettes et DIVs vont toujours être en relation directe avec eachother, ce qui signifie si votre premier <li> va toujours être « lié » à la première <div> sous #mainteaser, vous pouvez renoncer aux attributs de titre et utilisez le code suivant:

$('#teaser-thumbs li').click(function(){ 
    var teaserDiv = $(this).index(); 
    $(this).fadeOut('slow'); 
    $('#mainteaser div:eq('+teaserDiv+')').fadeOut('slow'); 
}); 

Answer 2

Voici le code de ma div

C'est le HTML :

<div id="mainteaser"> 
    <div id="teaser1"> 
     <h2>Loremipsum 1</h2> 
     <p>Nam liber tempor cum soluta nobis eleifend option congue 
     nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cumsoluta nobis eleifend option congue nihil imperdiet doming id quod</p> 
     <div class="button"><a href="#">more ...</a></div> 
    </div> 
    <div id="teaser2"> 
    <h2>Loremipsum 2</h2> 
    <p>Nam liber tempor cum soluta nobis eleifend option congue 
    nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cum soluta nobis eleifend option congue nihil imperdiet doming id quod</p> 
    <div class="button"><a href="#">more ...</a></div> 
    </div> 
    <div id="teaser3"> 
    <h2>Loremipsum 3</h2> 
    <p>Nam liber tempor cum soluta nobis eleifend option congue 
    nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cum soluta nobis eleifend option congue nihil imperdiet doming id quod</p> 
     <div class="button"><a href="#">more ...</a></div> 
    </div> 
</div> 

<div id="teaser-thumbs"> 
    <ul> 
    <li><a href="#"><img src="teaser1_thumb.jpg" alt="" /></a></li> 
    <li><a href="#"><img src="teaser2_thumb.jpg" alt="" /></a></li> 
    <li><a href="#"><img src="teaser3_thumb.jpg" alt="" /></a></li> 
    </ul> 
</div> 

le divs avec l'id "teaser1" etc. Je veux disparaître en cliquant sur les vignettes dans les div "teaser-pouces". Mais en plus, les "teaser" doivent disparaître automatiquement.