Trying to add missing img attributes to custom javascript

Question

I have a javascript that changes the image scr when you click on it and it will cycle through. It also has navigation links and arrow keyboard navigation.

I'm having trouble of adding image attributes width, height and alt to the img scr. Currently when you view the final result it shows: <img class="picture" src="http://i.imgur.com/tL6nW.gif" imageposition="1">

It's currently missing the width,height and alt. In my HTML content I have already included the width,height and alt but the javascript doesn't seem to be adding those attributes to the final result. Can anyone help me fix my code?

/* set first image in frame from #shoebox on document.ready */
$(function() {
  var leadOff = $('#shoebox img:first-child').attr('source');

  $('.picture').attr({
    'src': leadOff,
    'imageposition': '1'
  });

  var select = $('#select-jump-to');
  $.each($('#shoebox img'), function(idx, img) {
    select.append('<option value="' + img.getAttribute('source') + '">Image ' + (idx + 1) + '</option>')
  });

  select.on('change', function(e) {
    $('.picture').attr({
      'src': e.target.options[e.target.selectedIndex].value,
      'imageposition': e.target.selectedIndex + 1
    });
  });

});
/* load next image from #shoebox (click on image and/or next button) */
$('#pictureframe, #buttonright').click(function() {
  var imageTally = $('#shoebox img').length;
  var imagePosition = $('.picture').attr('imageposition');
  var plusOne = parseInt(imagePosition) + 1;
  var nextUp = $('#shoebox img:nth-child(' + plusOne + ')').attr('source');
  var select = $('#select-jump-to');
  if (imagePosition == imageTally) {
    var leadOff = $('#shoebox img:first-child').attr('source');
    $('.picture').attr({
      'src': leadOff,
      'imageposition': '1'
    });
    select.val(leadOff); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp,
      'imageposition': plusOne
    });
    select.val(nextUp);//update the dropdown as well.
  }
});

/* load previous image from #shoebox (click on prev button) */
$('#buttonleft').click(function() {
  var imageTally = $('#shoebox img').length;
  var imagePosition = $('.picture').attr('imageposition');
  var minusOne = parseInt(imagePosition) - 1;
  var nextUp = $('#shoebox img:nth-child(' + minusOne + ')').attr('source');
  var select = $('#select-jump-to');
  if (imagePosition == '1') {
    var lastPic = $('#shoebox img:last-child').attr('source');
    $('.picture').attr({
      'src': lastPic,
      'imageposition': imageTally
    });
    select.val(lastPic); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp,
      'imageposition': minusOne
    });
    select.val(nextUp); //update the dropdown as well.
  }
});

/* Add arrow keyboard navigation */
function GoToLocation(url) {
  window.location = url;
}
Mousetrap.bind("right", function() {
  document.getElementById('buttonright').click();
});

function GoToLocation(url) {
  window.location = url;
}
Mousetrap.bind("left", function() {
  document.getElementById('buttonleft').click();
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
#wall {
  display: flex;
  flex-direction: column;
  padding: 6px;
  background-color: hsla(0, 0%, 20%, 1);
}
#pictureframe {
  display: flex;
  padding: 6px;
  background-color: hsla(0, 0%, 40%, 1);
}
#pictureframe img {
  display: flex;
  width: 100px;
  height: 100px;
}
#buttonswrapper {
  display: flex;
  flex-grow: 1;
}
#jumpto {
  display: flex;
  justify-content: center;
  align-items: center;
}
#buttonleft,
#buttonright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 6px;
  color: hsla(40, 20%, 70%, 1);
  font-variant: small-caps;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  background-color: hsla(0, 0%, 40%, 1);
  cursor: pointer;
}
#buttonleft:hover,
#buttonright:hover {
  background-color: hsla(50, 50%, 40%, 1);
}
#shoebox {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>
<div id="wall">
  <div id="pictureframe">
    <img class="picture" src="">
  </div>
  <div id="buttonswrapper">
    <div id="buttonleft">prev</div>
    <div id="buttonright">next</div>
  </div>
  <div id="jumpto">
    <select id="select-jump-to"></select>
  </div>
</div>
<div id="shoebox">
  <!-- prevent loading all images by changing src to source -->
  <img source="http://i.imgur.com/tL6nW.gif" width="100" height="100" alt="pic1">
  <img source="http://i.imgur.com/BfZ5f.gif" width="100" height="100" alt="pic2">
  <img source="http://i.imgur.com/mR7wo.gif" width="100" height="100" alt="pic3">
</div>

xorspark · Accepted Answer · 2016-08-29 00:48:25Z

For this you have to actually insert the attribute values from the <img> tag you're pulling from your <img source> tags into the <img> tag you're swapping in. For example, on init, you want to change your code to do this:

  var leadOff = $('#shoebox img:first-child');

  $('.picture').attr({
    'src': leadOff.attr('source'),
    'imageposition': '1',
    'width': leadOff.attr('width'),
    'height': leadOff.attr('height'),
    'alt': leadOff.attr('alt')
  });

Note you're selecting the image tag itself instead of the source outright. You then initialize the attributes through the attr function by reading the attributes from the tag. You'll have to make similar adjustments to the click events for the Prev/Next buttons, as well as change the select value assignment to look at your image object's source attribute, e.g. select.val(nextUp.attr('source'))

For the dropdown, you want to copy those attributes into custom data- attributes for each attribute you want to copy over (i.e. data-width, data-height, data-alt) that you can access later:

  $.each($('#shoebox img'), function(idx, img) {
    select.append('<option value="' + 
    img.getAttribute('source') + 
      '" data-width="' +  img.getAttribute('width') + 
      '" data-height="' + img.getAttribute('height') + 
      '" data-alt="' + img.getAttribute('alt') + 
      '">Image ' + (idx + 1) + '</option>'
    )
  });

In the change event, just read from the option tag's attributes and set them in the image:

  select.on('change', function(e) {
    var option = e.target.options[e.target.selectedIndex];
    $('.picture').attr({
      'src': option.value,
      'imageposition': e.target.selectedIndex + 1,
      'width': option.getAttribute('data-width'),
      'height': option.getAttribute('data-height'),
      'alt': option.getAttribute('data-alt')
    });
  });

Updated code below:

/* set first image in frame from #shoebox on document.ready */
$(function() {
  var leadOff = $('#shoebox img:first-child');

  $('.picture').attr({
    'src': leadOff.attr('source'),
    'imageposition': '1',
    'width': leadOff.attr('width'),
    'height': leadOff.attr('height'),
    'alt': leadOff.attr('alt')
  });

  var select = $('#select-jump-to');
  $.each($('#shoebox img'), function(idx, img) {
    select.append('<option value="' + 
    img.getAttribute('source') + 
      '" data-width="' +  img.getAttribute('width') + 
      '" data-height="' + img.getAttribute('height') + 
      '" data-alt="' + img.getAttribute('alt') + 
      '">Image ' + (idx + 1) + '</option>'
    )
  });

  select.on('change', function(e) {
    var option = e.target.options[e.target.selectedIndex];
    $('.picture').attr({
      'src': option.value,
      'imageposition': e.target.selectedIndex + 1,
      'width': option.getAttribute('data-width'),
      'height': option.getAttribute('data-height'),
      'alt': option.getAttribute('data-alt')
    });
  });

});
/* load next image from #shoebox (click on image and/or next button) */
$('#pictureframe, #buttonright').click(function() {
  var imageTally = $('#shoebox img').length;
  var imagePosition = $('.picture').attr('imageposition');
  var plusOne = parseInt(imagePosition) + 1;
  var nextUp = $('#shoebox img:nth-child(' + plusOne + ')');
  var select = $('#select-jump-to');
  if (imagePosition == imageTally) {
    var leadOff = $('#shoebox img:first-child');
    $('.picture').attr({
      'src': leadOff.attr('source'),
      'imageposition': '1',
      'width': leadOff.attr('width'),
      'height': leadOff.attr('height'),
      'alt': leadOff.attr('alt')
    });
    select.val(leadOff.attr('source')); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp.attr('source'),
      'imageposition': plusOne,
      'width': nextUp.attr('width'),
      'height': nextUp.attr('height'),
      'alt': nextUp.attr('alt')
    });
    select.val(nextUp.attr('source')); //update the dropdown as well.
  }
});

/* load previous image from #shoebox (click on prev button) */
$('#buttonleft').click(function() {
  var imageTally = $('#shoebox img').length;
  var imagePosition = $('.picture').attr('imageposition');
  var minusOne = parseInt(imagePosition) - 1;
  var nextUp = $('#shoebox img:nth-child(' + minusOne + ')');
  var select = $('#select-jump-to');
  if (imagePosition == '1') {
    var lastPic = $('#shoebox img:last-child');
    $('.picture').attr({
      'src': lastPic.attr('source'),
      'imageposition': imageTally,
      'width': lastPic.attr('width'),
      'height': lastPic.attr('height'),
      'alt': lastPic.attr('alt')
    });
    select.val(lastPic.attr('source')); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp.attr('source'),
      'imageposition': minusOne,
      'width': nextUp.attr('width'),
      'height': nextUp.attr('height'),
      'alt': nextUp.attr('alt')
    });
    select.val(nextUp.attr('source')); //update the dropdown as well.
  }
});

/* Add arrow keyboard navigation */
function GoToLocation(url) {
  window.location = url;
}
Mousetrap.bind("right", function() {
  document.getElementById('buttonright').click();
});

function GoToLocation(url) {
  window.location = url;
}
Mousetrap.bind("left", function() {
  document.getElementById('buttonleft').click();
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
#wall {
  display: flex;
  flex-direction: column;
  padding: 6px;
  background-color: hsla(0, 0%, 20%, 1);
}
#pictureframe {
  display: flex;
  padding: 6px;
  background-color: hsla(0, 0%, 40%, 1);
}
#pictureframe img {
  display: flex;
  width: 100px;
  height: 100px;
}
#buttonswrapper {
  display: flex;
  flex-grow: 1;
}
#jumpto {
  display: flex;
  justify-content: center;
  align-items: center;
}
#buttonleft,
#buttonright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 6px;
  color: hsla(40, 20%, 70%, 1);
  font-variant: small-caps;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  background-color: hsla(0, 0%, 40%, 1);
  cursor: pointer;
}
#buttonleft:hover,
#buttonright:hover {
  background-color: hsla(50, 50%, 40%, 1);
}
#shoebox {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>
<div id="wall">
  <div id="pictureframe">
    <img class="picture" src="">
  </div>
  <div id="buttonswrapper">
    <div id="buttonleft">prev</div>
    <div id="buttonright">next</div>
  </div>
  <div id="jumpto">
    <select id="select-jump-to"></select>
  </div>
</div>
<div id="shoebox">
  <!-- prevent loading all images by changing src to source -->
  <img source="http://i.imgur.com/tL6nW.gif" width="100" height="100" alt="pic1">
  <img source="http://i.imgur.com/BfZ5f.gif" width="100" height="100" alt="pic2">
  <img source="http://i.imgur.com/mR7wo.gif" width="100" height="100" alt="pic3">
</div>

Collectives™ on Stack Overflow

Trying to add missing img attributes to custom javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related