How to target a html5 data attribute with jQuery?

Question

I have created a modal that is triggered when I click on an image from a gallery.

<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/apple.jpg" src="assets/gallery/thumbs/tn_apple.jpg" alt="thumbnail">

<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/orange.jpg" src="assets/gallery/thumbs/tn_orange.jpg" alt="thumbnail">

<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/banana.jpg" src="assets/gallery/thumbs/tn_banana.jpg" alt="thumbnail">

I would like to further this function by getting the data-fullsizeImg file and set that to a variable. Then with that variable set create an tag within the modal window with a src of that data-fullsizeImg. I cannot seem to target the attribute though. I have tried to use this

function createModal() {
    var fullsize = $(this).attr('data-fullsizeImg');
    console.log($(this).attr('data-fullsizeImg'));

    $('#modal').css({
        'display': 'block'
    });

}

I have also tried this

function createModal() {
    var fullsize = $(this).data('fullsizeImg');
    console.log($(this).attr('data-fullsizeImg'));

    $('#modal').css({
        'display': 'block'
    });

}

When I do this I get an undefined in the console. What am I doing wrong?

This is what I am using to trigger the function from within HTML if that makes any difference. It does the trick for showing the modal I created

$(".galleryThumbnail").click(function() {
    createModal();
});

Answer 1

There are two ways of solving this:

1. pass this as an argument in the called function.
2. take advantage of event arguement.

---

1.

function createModal(img) { // get it here
  var fullsize = $(img).data('fullsizeImg'); // use here
  console.log($(img).attr('data-fullsizeImg')); // and here

  $('#modal').css({
    'display': 'block'
  });

}

$(".galleryThumbnail").click(function() {
  createModal(this); // <----pass this here
});

---

2.

function createModal(e) { // pass e == event
  var fullsize = $(e.target).data('fullsizeImg'); // e.target is the clicked element.
  console.log($(e.target).attr('data-fullsizeImg')); // and here

  $('#modal').css({
    'display': 'block'
  });

}

$(".galleryThumbnail").click(function() {
  createModal(); 
});

Answer 2

You can use data() method to access custom data attributes. If you need to access this inside the function then pass the this instance as a parameter.

function createModal(ele) {
    var fullsize = $(ele).data('fullsizeimg');
    console.log($(ele).data('fullsizeimg'));

    $('#modal').css({
        'display': 'block'
    });

}

$(".galleryThumbnail").click(function() {
    createModal(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/apple.jpg" src="assets/gallery/thumbs/tn_apple.jpg" alt="thumbnail">
<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/orange.jpg" src="assets/gallery/thumbs/tn_orange.jpg" alt="thumbnail">
<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/banana.jpg" src="assets/gallery/thumbs/tn_banana.jpg" alt="thumbnail">

Or

$(".galleryThumbnail").click(function() {
    var fullsize = $(this).data('fullsizeimg');
    console.log($(this).data('fullsizeimg'));

    $('#modal').css({
        'display': 'block'
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/apple.jpg" src="assets/gallery/thumbs/tn_apple.jpg" alt="thumbnail">
<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/orange.jpg" src="assets/gallery/thumbs/tn_orange.jpg" alt="thumbnail">
<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/banana.jpg" src="assets/gallery/thumbs/tn_banana.jpg" alt="thumbnail">

Yo need to use fullsizeimg in lower

All attribute names on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.

Taken from : http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

Answer 3

An alternative way to previous answers is this:

createModal.call(this);

Now in function createModel, this is inherited from the caller function and you may use $(this) as a reference.

Answer 4

this inside the createModal does not refer to the clicked element, so your script won't work.

You need to pass the clicked element reference to createModal

function createModal(el) {
  var fullsize = $(el).data('fullsizeImg');
  console.log($(el).attr('data-fullsizeImg'));

  $('#modal').css({
    'display': 'block'
  });

}

$(".galleryThumbnail").click(function() {
  createModal(this);
});