-3

I have this 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 I have this jquery in an 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 to ','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" is id that I define in jQuery in header.php This jQuery, grayscale my picture and when the mouse hover on picture, color it!

More Details about this code here : http://1.s3.envato.com/files/32652661/index.html

My problem is that every picture on my page easily work with this jQuery but when I call it in php loop, jquery doesn't work!!

user3098838
  • 13
  • 6

2 Answers2

0

You are using id (#test1) to run your jQuery function on the element. But when you run it in a loop, the same id is being used to all elements and when this happens the jQuery selector for the id will not be able to select a particular element on the document.

Note: you should not have multiple elements with same id on a single document.

Try using a class and use the class to trigger the jQuery function.

$('.test1 img').picanim({initEf:'grayscale',hoverEf:'fadeIn'});

Here test1 is a class, use the same class for all the elements in the loop.

Nagendra Rao
  • 7,016
  • 5
  • 54
  • 92
0

You cannot use an id for an element if it's going to be used more than once.
To make this work try changing the id to class="hm-wrap" and then use that in your jQuery selector. Use hm-wrap as the plugins css rules apply to that wrapping class. I.e.

$('.hm-wrap img').picanim({initEf:'grayscale',hoverEf:'fadeIn'});

... and ...

<div class="hm-wrap">
James T
  • 499
  • 2
  • 5
  • the class "test1" still doesn't work! :( – user3098838 Mar 24 '14 at 11:44
  • I've updated my answer. Try it and see if that works. – James T Mar 24 '14 at 12:04
  • Actually, I don't think that'll work as the js is wrapping a div with that class around the image anyway. – James T Mar 24 '14 at 12:06
  • no, it doesn't work! i tell again: it work in any simple tag easily, but doesn't work in php loop!! – user3098838 Mar 24 '14 at 12:19
  • By any chance is your code online? Or maybe you can put the output on jsfiddle or codepen as it could possibly be a css problem. I can't really help much further than this as I can't see anything wrong with the code you've posted (other than what I've pointed out on my fist answer). – James T Mar 24 '14 at 12:29
  • dear James T, if i have a css problem, why it work in simple tag?my code is in Localhost by wampserver! so thanks for help. – user3098838 Mar 24 '14 at 17:24
  • Because there is a slight possibility that your css rules are overriding/interfering with the plugins css rules. Very slight I know (I'm assuming your loop html is different to the other html you used to surround those img tags that work for you). But the jsfiddle and copepen can let us rule out a js problem as well so that was the other reason why I asked. – James T Mar 25 '14 at 01:38
  • yes, your suggestion is completely correct. first i have this problem in JQuery Code and css, but i solve it with $.noConflict in jQuery and change the name of a variable in CSS.ok i work with jsfiddle and copepen maybe these help me – user3098838 Mar 25 '14 at 04:06
  • THANKS SO MUCH DEAR James T, my problem is for z-index attribute in css file, i remove it and everything works correctly. thanQ for help! – user3098838 Mar 25 '14 at 04:46
  • Glad you got it working :) – James T Mar 25 '14 at 05:47