Revisions to Simple image gallery - Code Review Stack Exchange

added 3 characters in body

Source Link

edited Nov 13, 2014 at 13:52

166
4

Also you can keep path in data structure.

<div class="big_img_wrapper"></div>
<div class="thumbs_img_wrapper"></div>

<script>
  var i, big_image_urls, thumbs_image_urls, gallery_size;

  big_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/5.jpg'
  ];

  thumbs_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/5.jpg'
  ];

  i = 0;
  gallery_size = big_image_urlsthumbs_image_urls.length;

  while (i < gallery_size) {
    $('.big_img_wrapper'thumbs_img_wrapper').append(
      '<img src="' + big_image_urls[i]thumbs_image_urls[i] + '" id="big_img_'id="' + i + '" class="big_img">'class="thumbs_img">'
    );
 
  while (i < gallery_size) {i++;
  }

  $('.thumbs_img_wrapper'big_img_wrapper').append(
      '<img src="' + thumbs_image_urls[i]big_image_urls[0] + '" id="'id="big_img_' + i0 + '" class="thumbs_img">'class="big_img">'
    );
    i++;
  }

  $('.thumbs_img').click(function(){
    var id;
    id = $(this).attr('id');
    $('.big_img')
      .hide()
      .attr('src', big_image_urls[id])
      .fadeIn('slow');
  });
</script>

Also you can keep path in data structure.

<div class="big_img_wrapper"></div>
<div class="thumbs_img_wrapper"></div>

<script>
  var i, big_image_urls, thumbs_image_urls, gallery_size;

  big_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/5.jpg'
  ];

  thumbs_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/5.jpg'
  ];

  i = 0;
  gallery_size = big_image_urls.length;

  $('.big_img_wrapper').append(
    '<img src="' + big_image_urls[i] + '" id="big_img_' + i + '" class="big_img">'
  );
 
  while (i < gallery_size) {
    $('.thumbs_img_wrapper').append(
      '<img src="' + thumbs_image_urls[i] + '" id="' + i + '" class="thumbs_img">'
    );
    i++;
  }

  $('.thumbs_img').click(function(){
    var id;
    id = $(this).attr('id');
    $('.big_img')
      .hide()
      .attr('src', big_image_urls[id])
      .fadeIn('slow');
  });
</script>

Also you can keep path in data structure.

<div class="big_img_wrapper"></div>
<div class="thumbs_img_wrapper"></div>

<script>
  var i, big_image_urls, thumbs_image_urls, gallery_size;

  big_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/5.jpg'
  ];

  thumbs_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/5.jpg'
  ];

  i = 0;
  gallery_size = thumbs_image_urls.length;

  while (i < gallery_size) {
    $('.thumbs_img_wrapper').append(
      '<img src="' + thumbs_image_urls[i] + '" id="' + i + '" class="thumbs_img">'
    );
    i++;
  }

  $('.big_img_wrapper').append(
    '<img src="' + big_image_urls[0] + '" id="big_img_' + 0 + '" class="big_img">'
  );

  $('.thumbs_img').click(function(){
    var id;
    id = $(this).attr('id');
    $('.big_img')
      .hide()
      .attr('src', big_image_urls[id])
      .fadeIn('slow');
  });
</script>

Fix answer

Source Link

edited Nov 13, 2014 at 13:43

Bob Napkin

166
4

Also you can keep path in data structure.

<div class="big_img_wrapper"></div>
<div class="thumbs_img_wrapper"></div>

<script>
  var i, big_image_urls, thumbs_image_urls, gallery_size;

  big_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/5.jpg'
  ];

  thumbs_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/5.jpg'
  ];

  i = 0;
  gallery_size = big_image_urls.length - 1;
length;
  while (i++ < gallery_size) {
    $('.big_img_wrapper').append(
      '<img src="' + big_image_urls[i] + '" id="big_img_' + i + '" class="big_img">'
    ); 

  while (i < gallery_size) {
    $('.thumbs_img_wrapper').append(
      '<img src="' + thumbs_image_urls[i] + '" id="thumbs_img_'id="' + i + '" class="thumbs_img">'
    );
    i++;
  }

  $('.thumbs_img').click(function(){
    var id;
    id = $(this).attr('id');
    $('.big_img')
      .hide();
    id = id.replaceattr("thumbs_img_"'src', "big_img_"big_image_urls[id]);
    $('#' + id).fadeIn('slow');
  });
</script>

Also you can keep path in data structure.

<div class="big_img_wrapper"></div>
<div class="thumbs_img_wrapper"></div>

<script>
  var i, big_image_urls, thumbs_image_urls, gallery_size;

  big_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/5.jpg'
  ];

  thumbs_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/5.jpg'
  ];

  i = 0;
  gallery_size = big_image_urls.length - 1;

  while (i++ < gallery_size) {
    $('.big_img_wrapper').append(
      '<img src="' + big_image_urls[i] + '" id="big_img_' + i + '" class="big_img">'
    );

    $('.thumbs_img_wrapper').append(
      '<img src="' + thumbs_image_urls[i] + '" id="thumbs_img_' + i + '" class="thumbs_img">'
    );
  }

  $('.thumbs_img').click(function(){
    var id;
    id = $(this).attr('id');
    $('.big_img').hide();
    id = id.replace("thumbs_img_", "big_img_");
    $('#' + id).fadeIn('slow');
  });
</script>

Also you can keep path in data structure.

<div class="big_img_wrapper"></div>
<div class="thumbs_img_wrapper"></div>

<script>
  var i, big_image_urls, thumbs_image_urls, gallery_size;

  big_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/5.jpg'
  ];

  thumbs_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/5.jpg'
  ];

  i = 0;
  gallery_size = big_image_urls.length;

  $('.big_img_wrapper').append(
    '<img src="' + big_image_urls[i] + '" id="big_img_' + i + '" class="big_img">'
  ); 

  while (i < gallery_size) {
    $('.thumbs_img_wrapper').append(
      '<img src="' + thumbs_image_urls[i] + '" id="' + i + '" class="thumbs_img">'
    );
    i++;
  }

  $('.thumbs_img').click(function(){
    var id;
    id = $(this).attr('id');
    $('.big_img')
      .hide()
      .attr('src', big_image_urls[id])
      .fadeIn('slow');
  });
</script>

Source Link

answered Nov 13, 2014 at 13:00

Bob Napkin

166
4

Also you can keep path in data structure.

<div class="big_img_wrapper"></div>
<div class="thumbs_img_wrapper"></div>

<script>
  var i, big_image_urls, thumbs_image_urls, gallery_size;

  big_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/5.jpg'
  ];

  thumbs_image_urls = [
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/1.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/2.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/3.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/4.jpg',
    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/5.jpg'
  ];

  i = 0;
  gallery_size = big_image_urls.length - 1;

  while (i++ < gallery_size) {
    $('.big_img_wrapper').append(
      '<img src="' + big_image_urls[i] + '" id="big_img_' + i + '" class="big_img">'
    );

    $('.thumbs_img_wrapper').append(
      '<img src="' + thumbs_image_urls[i] + '" id="thumbs_img_' + i + '" class="thumbs_img">'
    );
  }

  $('.thumbs_img').click(function(){
    var id;
    id = $(this).attr('id');
    $('.big_img').hide();
    id = id.replace("thumbs_img_", "big_img_");
    $('#' + id).fadeIn('slow');
  });
</script>

Stack Exchange Network

Return to Answer