Jquery Mouse Over / Category listing / Multiple Thumbnails

Question

I am trying to create a wordpress category page that lists my products main thumbnail and also a second thumbnail when the mouse is over the first one.

I was able to make it work on the first image: http://www.anapiazza.com.br/category/anel/

But it is not replicating to the other products images.

I am using a plugin called Multiple Post Thumbnails to allow multiple thumbnails for each post.

This is the piece of Jquery I am using:

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

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

</script>

And this is how it looks on the body of my PHP page:

<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>

This is my CSS for this portion of the page:

#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}

I know there is a lot going on... Maybe I am a little ambicious with what I am trying to accomplish... Anyway - anyone has an idea of what can be going wrong?

Element IDs need to be unique within an HTML document. You are using multiple IDs multiple times each, so that is the very first thing you need to fix. — CBroe

Yuri Ramos Yuri Ramos · Accepted Answer · 2016-10-19T21:35:00

You are declaring ID for multiple elements, ID is unique. Change these elements to classes.
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}

Jquery Mouse Over / Category listing / Multiple Thumbnails

1 Answers