jQuery in php loop in wordpress -
i have code on header.php
<!-- img style --> <link href="<?php bloginfo('template_directory'); ?>/picanim files/picanim.css" rel="stylesheet" type="text/css" /> <script src="<?php bloginfo('template_directory'); ?>/picanim files/jquery-1.7.2.min.js"></script> <script src="<?php bloginfo('template_directory'); ?>/picanim files/jquery.picanim.min.js"></script> <script type="text/javascript"> $.noconflict(); jquery(document).ready(function($){ $('#test1 img').picanim({initef:'grayscale',hoveref:'fadein'}); }); </script> <!-- img style -->
and have jquery in index.php
:
<div class="left-slide"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="boxgrid caption" > <div id="test1"> <img src="<?php echo get_post_meta ($post->id, 'img',true); ?>" width="200" height="150" alt=" "/> </div> <div class="cover boxcaption"> <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('permanent link ','dnld'); ?><?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> <div class="clear10"></div> <h4> <a href="<?php the_permalink() ?>">details</a> </h4> </div> </div> <?php endwhile; ?> <?php endif; ?>
the "test1"
id define in jquery in header.php
jquery, grayscale picture , when mouse hover on picture, color it!
more details code here : http://1.s3.envato.com/files/32652661/index.html
my problem every picture on page work jquery when call in php loop, jquery doesn't work!!
you cannot use id element if it's going used more once.
make work try changing id class="hm-wrap" , use in jquery selector. use hm-wrap plugins css rules apply wrapping class. i.e.
$('.hm-wrap img').picanim({initef:'grayscale',hoveref:'fadein'}); ... , ... <div class="hm-wrap">
Comments
Post a Comment