I am currently working on a slider that connects slides from an external page through data attributes.
Here is the setup:
Main Page
<div id="sitewrapper">
<section class="sliderwrapper">
<div id="slider" data-source="slides-page.html" data-speed="500" data-easing="swing">
<ul>
</ul>
</div>
<div id="loader"><span id="load"></span></div>
<a class="button" id="back"></a>
<a class="button" id="next"></a>
</section>
<!--end sitewrapper-->
</div>
<script>
$(function() { //run when the DOM is ready
$('.internalclick').click(function(e) {
alert("I clicked Area Tag" + $(this).attr('data-direct'));
});
});
</script>
Slides page (slides-page.html)
<li class="hslide" data-id="1"><img src="content/01.png" usemap="#Map">
<map name="Map">
<area shape="rect" coords="331,158,538,297" href="#" class="internalclick" data-direct="I-need-to-direct">
<area shape="rect" coords="546,154,745,305" href="#">
<area shape="rect" coords="331,311,543,445" href="#">
<area shape="rect" coords="550,309,733,443" href="#">
</map>
</li>
<li class="hslide" data-id="2"><img src="content/02.png"></li>
<li class="hslide" data-id="3"><img src="content/03.png"></li>
<li class="hslide" data-id="4"><img src="content/04.png"></li>
Issue
While everything seems to be working fine, I encountered a problem when attempting to add a Click function to specific list elements in the slides page. The issue arises with
href="#" class="internalclick" data-direct="I-need-to-direct"If anyone has any suggestions or ideas on how to create a click function that targets the area tag in the slides page, please let me know.
Thank you.