i target <a> tag's id inside inline svg being used responsive image map. don't need manipulate svg, launch modal fancybox id if clicks on <a href...>. (launch iframe of local page in case)
i have read dozen threads related , understand there namespace issue i'm js noob , cant quite put - thank taking look! did try $('a[xlink\:href=#shows]’) no joy.
<div id="inline-svg"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 1920 1280" preserveaspectratio="xmidymin slice" width="100%" height="100%"> <a xlink:href="http://www.facebook.com/" xlink:title="facebook" xlink:show="new" id="facebook"> <rect x="1102" y="392” width="102" height="104" style="fill:#ec2024;opacity:0.5”/> </a> <a xlink:href="http://twitter.com/" xlink:title="twitter" xlink:show="new" id="twitter"> <rect x="1102" y="520" width="102" height="104" style="fill:#ec2024;opacity:0.5”/> </a> <a xlink:href="#" xlink:title="mailing list" id=“mlist"> <rect x="1215" y="392" width=“102” height="104" style="fill:#ec2024;opacity:0.5”/> </a> <a xlink:href="shows.html" xlink:title=“shows” id="shows" > <rect x="1215" y="520” width=“102” height="104" style="fill:#ec2024;opacity:0.5”/> </a> <rect width="1920" height="1280" style="fill:none"/> </svg> </div> <script type="text/javascript"> $(document).ready(function() { $("#shows”).fancybox({ maxwidth : 400, maxheight : 300, type : 'iframe', }); }); </script>
changing:
$("#shows”). to:
$("#shows"). should work fine.
Comments
Post a Comment