JQuery Content Fader with Thumbnails and auto-fade

Question

Hey there,

I'm searching for a special content fader with thumbnails and automatic-fade. By searching the web I found many things, but not that what I am looking for. Most times you can slide the content but not fade, if you can fade, you can only fade pictures. I try it with the easing-Plugin, but this can't fade, only slide. Then I try the "Galleria", here you can't fade text or something, only images.

That's it: I have some divs with some text (h,p,button etc.) I want to fade. I want to fade by click on thumbnails but also the content fade automaticaly.

Thx for your answers!

Andreas

Answer 1

This is the quick and dirty way to make it work with what you have:

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

It required some way to relate your thumbnails to your DIVs, so I had to add a TITLE attribute to the thumbnails as follows:

<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>

If your thumbnails and DIVs are always going to be in direct relation to eachother, meaning if your first <li> is always going to be 'linked' to the first <div> under #mainteaser, you can forgo the title attributes and use the following code:

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

Answer 2

This is the code of my div

This is the 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>

The divs with the id "teaser1" etc. I want to fade by click on the thumbnails in the div "teaser-thumbs". But additionally the "teaser"s have to fade automatically.