JQuery Mouse Over/Перечень категорий/Несколько миниатюр

Question

Я пытаюсь создать страницу категории wordpress, в которой перечислены мои миниатюры для моих продуктов, а также второй миниатюры, когда мышь находится над первой.

Я был в состоянии заставить его работать на первом изображении: http://www.anapiazza.com.br/category/anel/

Но это не реплицируется на другие продукты изображений.

Я использую плагин под названием Несколько сообщений Thumbnails, чтобы разрешить несколько миниатюр для каждого сообщения.

Это часть Jquery я использую:

<script>   
    $(document).ready(function(){ 
     $("#productcell").mouseenter(function(){ 
      $("#thumbnail_over").fadeIn("slow"); 
     }); 
    }); 

      $(document).ready(function(){ 
     $("#productcell").mouseleave(function(){ 
      $("#thumbnail_over").fadeOut("slow"); 
     }); 
    }); 

</script> 

И вот как это выглядит на теле моей PHP страницы:

<div id="productcell"> 

     <!-- Image Swap Mouse Over --> 

      <a href="<?php the_permalink() ?>"> 


      <div id="thumbnail_normal"><?php the_post_thumbnail(); ?></div> 

      <div id="thumbnail_over" style="display: none"> 
       <?php if (class_exists('MultiPostThumbnails')) : 
       MultiPostThumbnails::the_post_thumbnail(
       get_post_type(), 
       'secondary-image' 
       ); 
       endif; ?> 
      </div> 


      </a>    

     </div> 

Это мой CSS для этой части страница:

#productcell {float: left; position: relative; width:30%; height: 40%; margin: 1%} 
#thumbnail_normal {position: absolute; width: 100%; height: 100%; } 
#thumbnail_normal img {max-width: 100%; height: auto} 
#thumbnail_over {position: absolute; z-index: 10} 
#thumbnail_over img {max-width: 100%; height: auto} 

Я знаю, что есть много происходит ... Может быть, я немного ambicious с тем, что я пытаюсь АККО mplish ... В любом случае - у кого-то есть представление о том, что может пойти не так?

Answer 1

Вы объявляете ID для нескольких элементов, уникальный идентификатор. Измените эти элементы на классы.
HTML

 <!-- Image Swap Mouse Over --> 

      <a href="<?php the_permalink() ?>"> 


      <div class="thumbnail_normal"><?php the_post_thumbnail(); ?></div> 

      <div class="thumbnail_over" style="display: none"> 
       <?php if (class_exists('MultiPostThumbnails')) : 
       MultiPostThumbnails::the_post_thumbnail(
       get_post_type(), 
       'secondary-image' 
       ); 
       endif; ?> 
      </div> 


      </a>    

     </div> 

JS

<script>   
    $(document).ready(function(){ 
     $(".productcell").mouseenter(function(){ 
      $(".thumbnail_over").fadeIn("slow"); 
     }); 
    }); 

      $(document).ready(function(){ 
     $(".productcell").mouseleave(function(){ 
      $(".thumbnail_over").fadeOut("slow"); 
     }); 
    }); 

</script> 

CSS

.productcell {float: left; position: relative; width:30%; height: 40%; margin: 1%} 
.thumbnail_normal {position: absolute; width: 100%; height: 100%; } 
.thumbnail_normal img {max-width: 100%; height: auto} 
.thumbnail_over {position: absolute; z-index: 10} 
.thumbnail_over img {max-width: 100%; height: auto}