html - How do I link a hyperlink to an HTML5 <li> image that uses data attributes

Question

This is a responsive HTML5 gallery that I've been working on recently. I just want each image to link to a different page.

<ul class="gallery">

    <li>

    <div data-alt="img03" data-description="<h3>Project</h3>" data-max-width="1800" data-max-height="1350" >
    <div data-src="images/xxxlarge/1.jpg" data-min-width="1300"></div>

    </div>

    </li>

I know that it should be as simple as adding a <a href="#"></a> but this isn't working. I am open to hear about other options.

Answer 1

You can access the values in data-attributes (data-*) using .dataset (currently supported in all major browsers). I.e. to access the value of the attribute data-src of an element, you would write:

var srcValue = varHoldingElemNode.dataset.src;   // or
var srcValue = varHoldingElemNode.dataset["src"];

That said, you can use some JS to achieve what (I suppose) you want: turning a <div data-src=<url_to_image>... into an image linking to some page.

See, also, this short demo.