How to use jQuery to fade out main div and fade in content from corresponding clicked thumbnail

Question

A little new with jQuery...I'm setting up a portfolio page. I have a main div that displays an image and description of a project, then a list of thumbnail texts (brief titles) for all projects. This is what I'm trying to do:

When a specific thumbnail text is clicked, the main div fades out the currently visible project and fades in the project corresponding to the thumbnail. What's the best way to use href to load target content into the main display?

Can't seem to find a plugin that lets me do this easily. Been trying to use a bit of javascript from http://perishablepress.com/slide-fade-content .

<!--MAIN DISPLAY-->
<div id="main">
<div id="projectA">
<img src="projectA-image.png" />
<div id="projectA">Description of Project A...</div>
</div>

<!--THUMBNAILS-->
<div class="thumb">
<a href="#projectA" class="thumb-text">PROJECT A</a>
</div>

<div class="thumb">
<a href="#projectB" class="thumb-text">PROJECT B</a>
</div>

Here's as far as I've gotten with javascript:

 $('div.thumb-text').click(function () {    
        var href = $(this).attr('href');
        $('div#piece-content').fadeOut("slow", function(){
            $('div#piece-content').load('portfolio.html#' +href);

        });
      });

Answer 1

I see a few issues here. First, your selector is wrong. div.thumb-text will select all div s with a class of thumb-text . You have none of those. This should be either div .thumb-text to find all elements within a div with the class of thumb-text or a.thumb-text to get all a tags with the class of thumb-text .

2nd, $('div#piece-content').load('portfolio.html#' +href); you will end up with two # s in this case since href already has one. And I'm not sure what your intention is here but # is not used to pass things to the backend, you may be intending to use ? , not entirely sure what you were going for here.

And finally, you never fade the element back in. So in your .load you need a callback:

$('div#piece-content').load('portfolio.html#' +href, function(){
   $(this).fadeIn();
});

Answer 2

A few things: you cannot do portfolio.html# (that is a hashtag) but you can do regular jQuery selectors inside the load . If you want to get the div with id of photos then use load('portfolio.html #photos') That is not a hash tag, that is a selector, just to make things clear.

Another thing: a lot of your HTML does not match your jQuery selectors at all. For example, you reference div#piece-content but I don't see that in your DOM . Same with div.thumb-text , it looks like you want $('div.thumb').children('a.thumb-text') instead.

Thirdly: assuming div.piece-content is the main div you were talking about, simply calling a fadeOut from what I understand, will not work. It will simply set its opacity to 0 and then it will load content into it. You should do your fadeOut() , then load the content then call fadeIn()

$('div.thumb-text').click(function() {    
    var href = $(this).attr('href');
        $('div#piece-content').fadeOut("slow", function(){
            $(this).load('portfolio.html #' +href', {}, function() {
                $(this).fadeIn();
            });
    })
});

Answer 3

Actually, I would definitely dig deeper in Google for existing plugins, especially if you are a beginner with jQuery.

Maybe the Nivo Slider could be something?

Answer 4

Thanks all, here's what I ended up with in javascript:

var activeDiv=$('#project-A'); //set activeDiv to the first piece you want to show 

              $('a.thumb-text').click(function () {     

                var href = $(this).attr('href'); //grabs the href from <a class="thumb-text">


                    activeDiv.fadeOut("fast", function() { //fades out the currently showing piece
                        $(href).fadeIn("slow");
                        activeDiv = $(href); //set the active piece to what was clicked on

                    });

              });