Question

I would like to have a div which changes its content on the page when navigation links are clicked with a fade transition effect. I have about 75 thumbnail in the div, and only 15 displaying at once, the rest are shown through clicking on the other links. I found this jquery content switcher which has both the navigation and content changing through a fade transition:

http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html#two

But it uses a list for the content…I tried adding my content anyway, It works, but this is probably not a good idea in terms of proper mark-up..? :S

example:

<ul id="content-slider-inside">
<li id="one">
<div class="profilethumbwrap"><a href="student.php?p=1"><img src="images/img1.jpg" width="100" height="130" class="rollover teaserimage" /></a><br \><p>Image caption</p></div>
</li>
<li id="two">
<div class="profilethumbwrap"><a href="student.php?p=1"><img src="images/img2.jpg" width="100" height="130" class="rollover teaserimage" /></a><br \><p>Image caption2</p>
</div>
</li>
</ul>
<div id="pgnav"> 
<ul>
<li><a href="#one" class="selected">1</a></li>
<li><a href="#two">2</a></li>

Is using a div inside an li a good idea in this circumstance? Or does anyone know of any plugin that is similar to the above link, but doesn’t use a list for the content? I just want to change the content displayed in a div through some links, have the links point to the anchors so I can direct link to each “page”, and have a nice fading transition… ^^;

Answer 1

maybe something like this:

<ul id="navigation">
<li><a href="#" data-id="one">1</a></li>
<li><a href="#" data-id="two">2</a></li>
</ul>
<div id="one" class="page">
 Put content here...
</div>
<div id="two" class="page">
 Put content here...
</div>

<script>

$(function(){
  $("#navigation").find("a").click(function(e){
    e.preventDefault();
    var id = $(this).attr("data-id"); //get id for the page you wanna show
    $(".page").hide(); //hide all pages with content could use fadeOut or something 
    $("#" + id).fadeIn();  //fade in the page you wanna show

   });
});

</script>

I haven´t tested but I think it will work (requires jquery lib)