javascript - Unable to get simple jquery script to work on WordPress page -
i trying use jquery plugin hcaptions on wordpress website i'm developing, when mouse hovers on image information appear on image. i've been able enqueue script within theme's function-extras.php
file , can see script has loaded along other scripts, script isn't handling hover event desired. @ stage i've copied , pasted suggested default code hcaptions repository have referenced own image follows:
<a href="#mytoggle" class="panel"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/test-feature-image.jpg" /> </a> <div id="mytoggle" class="cap-overlay hide"> <h5>cupcakes</h5> <div class="content"> name: cupcakes.png<br /> photography: ryun shofner<br /> <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> edit</a> <a href="javascript:void(0)" class="button small"><i class="icon-remove"></i> delete</a> </div> </div>
the site i'm working on can accessed @ www.heartinhand.com.au. suggestions appreciated.
you have script error here:
$(window).load(function(){ $('.hcaption').hcaptions(); });
try changing this:
jquery(document).ready(function($){ $('.hcaption').hcaptions(); });
this because jquery library included in wordpress set "noconflict" mode compatibility reasons.
your image needs hcaption class , data attribute, this:
<a href="#" data-attribute="#mytoggle" class="hcaption panel">