Please help me convert this script to a simple image slider

Question

Can some please, PLEASE! help me with this problem. Okay so I have a code that at first I thought worked well but I forgot that when the default <img src="test-img-1.jpg" class="actual-img"> content is loaded the first of the three buttons below the image should take the active css state that I've specified for the active buttons to take. Now what I want is for this little code to behave like a normal slider by loading in the css hidden contents into the ".image-area" div and it works when I click on the buttons. Problems only surface when I am I trying to give the first loaded content an active state. One way I believe can fix this (I can't implement it) is to let the first immediate default content be this inline hidden div: ( <div id="image-area2"> <div class="img-area-wrapper"> <img src="test-img-2.jpg" class="actual-img"> </div> </div> ) while somehow letting the first button be set to active. I should also mention that I'm not the best with jquery. Please help me fix this someone!

Here is a fiddle to get a better understanding: http://jsfiddle.net/pyrot/84sU4/

If my way of going about this is totally absurd please let me know.

this is my code:

  <script type="text/javascript">

  $(document).ready(function() {

    //loads default content
    //$('#image-area').load($('.menu_top a:first-child').attr('href'));

    $('.o-links').click(function() {

      // href has to be the id of the hidden content element
      var href = $(this).attr('href');
        $('#image-area').fadeOut(1000, function() {
            $(this).html($('#' + href).html()).fadeIn(1000);
        });
      return false;
    });

  });

  $(function() {
      $('.o-links').click(function(e) {

          //e.preventDefault();

          $('.o-links').not(this).removeClass('O_Nav_Current');
          $(this).addClass('O_Nav_Current');
      });
  });
  </script>

this is my html:

<section id="image-slider-container">
  <div class="image-slider-inner">

    <div id="image-area">
      <div class="img-area-wrapper">
        <!--currently this is the default I want to change-->
        <img src="test-img-1.jpg" class="actual-img">
      </div>
    </div>

    <div id="image-area2">
      <div class="img-area-wrapper">
        <!--I would like this to be the default content that when
        seen the first button is set to active-->
        <img src="test-img-2.jpg" class="actual-img">
      </div>
    </div>

    <div id="image-area3">
      <div class="img-area-wrapper">
        <img src="test-img-3.jpg" class="actual-img">
      </div>
    </div>

    <div class="slider-buttons">
      <div class="slider-buttons-container">
        <a href="image-area" class="o-links">&nbsp;</a>
        <a href="image-area2" class="o-links">&nbsp;</a>
        <a href="image-area3" class="o-links">&nbsp;</a>
      </div>
    </div>

  </div>
</section>

and this is my css:

#image-slider-container {

  width: 100%;
  height: auto;
  background-color: #ffffff;
  padding: 5% 0px 0% 0px;

}

.image-slider-inner {

  width: 100%;
  height: auto;     
  max-width: 1040px;
  margin: 0px auto;
  padding: 0px 20px 0px 20px;

}

#image-area2,
#image-area3 {

  width: 100%;
  height: auto;
  display: none;

}

#image-area {

  width: 100%;
  height: auto;

}

#image-area .img-area-wrapper {

  width: 80%;
  height: auto;     
  max-width: 1140px;
  margin: 0px auto;

}

.actual-img {

  width: 100%;
  height: 100%;

}

.slider-buttons {

  width: 100%;
  height: auto;
  max-width: 1140px;
  margin-top: 0px;

}

.slider-buttons-container {

  width: 100%;
  height: auto;
  max-width: 1140px;
  margin: 10px auto 0px auto;
  text-align: center;

}

.slider-buttons-container a {

  border-radius: 360px;
  border: 1px #C5C5C5 solid;
  padding: 0px 5px 0px 5px;
  margin: 0px 5px 0px 5px;
  background-color: #efefef;
  outline: 0px;
  text-decoration: none;
  font-size: 12px;
  box-shadow: -2px 1px 2px 0px #ADADAD;

  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;

}


.slider-buttons-container a:hover {

  border: 1px #C5C5C5 solid;
  padding: 0px 5px 0px 5px;
  background-color: #DAD8D8

}

.slider-buttons-container a:active {

  position: relative;
  top: 2px;

}

.O_Nav_Current {

  border: 1px #999999 solid !important;
  background-color: #DAD8D8 !important;

}

Answer 1

Problems only surface when I am I trying to give the first loaded content an active state

Does this mean that you want to add a class to the first button?

$('.o-links').click(function(e) {
  // ...
}).first().addClass('O_Nav_Current');

instead of using IDs for the slider's items and resetting html contents you can use classes and indexes:

CSS:

.image-area {
    width: 100%;
    height: auto;
    display: none;
}

.image-area:first-of-type {
    display: block;
}

JavaScript:

var $slides = $('.image-area'),
    $btns = $('a.o-links');

$btns.on('click', function (e) {
    var i = $btns.removeClass('O_Nav_Current').index(this);
    $(this).addClass('O_Nav_Current');

    $slides.filter(':visible').fadeOut(1000, function () {
        $slides.eq(i).fadeIn(1000);
    });

    e.preventDefault();

}).first().addClass('O_Nav_Current');

http://jsfiddle.net/RmF57/