CODEWITHSUNDEEP
jquery
loriensleafs
loriensleafs

Reputation: 2255

jquery coding previous and next buttons for photo gallery

I'm trying to make a photo gallery. The large photo container starts empty, when you click a thumbnail it uses the ID to load the full-sized photo into the container and a fadein function makes sure it's loaded before fading. This part of the gallery works fine, but it's the previous and next buttons that aren't quite there.

I'm having trouble getting the previous and next buttons to work. I'd like to have it so it loads the next photo into the container, again waits till it's loaded and then fades in. Here's what I have so far, and here is a demo in jsbin http://jsbin.com/esiduz/10/edit

JS

function fadeIn(obj) {
    $(obj).fadeIn(1000);
}

$(".photo").click(function() {
    var id = $(this).attr('id');
    $('#preload').prop('src',   
    'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

    fadeIn('#' + id);

$("#next").click(function() {  
  var id_a = $(id).next().attr('id');

  $('#preload').prop('src', 'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

  fadeIn('#' + id);
  });



  $("#prev").click(function() {  
  var id_b = $(id).prev().attr('id');

  $('#preload').prop('src', 'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

  fadeIn('#' + id);

});

});

CSS

ul {
  list-style-type: none;
}

.UNH_album li{
  float:left;
  padding:10px;
}

#prev {
  width:50px;
  height:50px;
  background:green;
  float:left;
}

#next {
  width:50px;
  height:50px;
  background:blue;
  float:left;
}

HTML

<div id="loading_box_container">
   <div id="loading_box">
        <img id="preload" onload="fadeIn(this)" src="#" style="display:none;"/>
</div>

<div id="nav">
  <div id="prev"></div>
  <div id="next"></div>
  <br style="clear:both;">
</div>

</div>  


<ul class="UNH_album">
  <li id="DanteBalboni_1918" class="photo">
    <img src="http://www.klossal.com/klossviolins/instruments/violins/DanteBalboni_1918.jpg">
</li>
<li id="KarlWurm_1978" class="photo">
    <img src="http://www.klossal.com/klossviolins/instruments/violins/KarlWurm_1978.jpg">
</li>
<li id="KarlGramm_1923" class="photo">
    <img src="http://www.klossal.com/klossviolins/instruments/violins/KarlGramm_1923.jpg">
</li>
</ul>

Upvotes: 1

Views: 295

Answers (1)

loriensleafs
loriensleafs

Reputation: 2255

the problem I was having was with variable definitions, I needed to use a global variable, it ended up looking like this:'

the answer is global variables, so it ended up being like this:

$(".photo").click(function() {
    id = $(this).attr('id');
});

$("#next").click(function() {  
      var id_a = $('#' + id).next().attr('id');
      id = id_a;
});

$("#prev").click(function() {  
      var id_b = $('#' + id).prev().attr('id');
      id = id_b;
});

Upvotes: 1

Related Questions