Question

I’ve got a massive problem, and i have no idea how to do this, i have found similar solutions but not the exact solution, and hope there is someone out there how can help me, Please.

First and foremost i would like to create a work page, and just display thumbnails in a column of four which is easy enough…
what i need to happen is when the thumbnail is clicked the complete content dissappears and is replaced with full details on the specific thumbnail clicked (i.e thumbnail1 when clicked will bring up thumbnail1 content div)….with a back link, taking the user back to the thumbnails….

My task is not to goto a different page, but stay on the page…hence why im asking for help, as this would have been easier option…

im really looking to achieve the following http://www.charliegentle.co.uk/ if you click on web design and then click on the thumbnails, you can see the effect im after..

the closest example i have found is below, the only problem is that i dont want the menu bar system, and even if i did change the menu bar to thumbnails, the thumbnails will still stay on screen, and thats not what i want…

Please help…here is code that can be used http://jsfiddle.net/buScL/21/

HTML

<div id="wrapper">
  <ul id="controlls">  
      <li><a href="#" id="one" class="dealer">Dealer</a></li>
      <li><a href="#" id="two" class="advertise">Advertise</a></li>
      <li><a href="#" id="three" class="social">Social Media</a></li>
      <li><a href="#" id="four" class="need">Need</a></li>
  </ul>


    <div id="slider">  

        <div id="dealer">
            <p>If you click on this paragraph
              you'll see it just fade away.
            </p>
        </div>
        <div id="advertise">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="social">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="need">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
    </div>
</div>

and

Javascript

$("#controlls li a").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('class');
    $('#slider div:visible').fadeOut(500, function() {
        $('div#' + id).fadeIn();
    })
});

and css

p { font-size:150%; cursor:pointer; }

  #wrapper{
      width: 700px;
      height: 400px;
      background: #a5a5a5;
      margin: 100px auto 0 auto;
  }

  #slider{
      width: 450px;
      overflow: hidden;
  }

  #dealer{
  float: left;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: pink;
  }

  #advertise{
    float: left;

  display: none;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: lime;
  }
  #social{
    float: left;

    display: none;  
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: purple;
  }
  #need{
    float: left;

    display: none;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: yellow;
  }




  ul#controlls{
  padding: 10px 0;
  height: 60px;
  }

  ul#controlls li{
      display: inline;
      padding: 5px 10px;
  }

Answer 1

Try this

http://jsfiddle.net/buScL/32/

 p { font-size:150%; cursor:pointer; }

  #wrapper{
      width: 700px;
      height: 400px;
      background: #a5a5a5;
      margin: 100px auto 0 auto;
  }

  #slider{
      width: 450px;
      overflow: hidden;
  }
  #slider > div {
   display:none;
}
#back {
   display:none;            
}
  #dealer{
  float: left;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: pink;
  }

  #advertise{
    float: left;

  display: none;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: lime;
  }
  #social{
    float: left;

    display: none;  
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: purple;
  }
  #need{
    float: left;

    display: none;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: yellow;
  }




  ul#controlls{
  padding: 10px 0;
  height: 60px;
  }

  ul#controlls li{
      display: inline;
      padding: 5px 10px;
  }
​

<div id="wrapper">
  <ul id="controlls">  
      <li><a href="#dealer" id="one" class="">Dealer</a></li>
      <li><a href="#advertise" id="two" class="">Advertise</a></li>
      <li><a href="#social" id="three" class="">Social Media</a></li>
      <li><a href="#need" id="four" class="">Need</a></li>
  </ul>
    <div id="back"><a href="#">Back</a></div>

    <div id="slider">  

        <div id="dealer">
            <p>If you click on this paragraph
              you'll see it just fade away.
            </p>
        </div>
        <div id="advertise">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="social">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="need">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
    </div>
</div>
​

$("#controlls li a").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');
        $(id).fadeIn();
        $('#back').show();
        $('#controlls').hide();
});

    $('#back a').click(function() {
        $('#slider div:visible').fadeOut(function () {
            $('#controlls').fadeIn();
            $('#back').hide();
        });
    });

​