Image mouseover in WordPress gallery using Fancy Box or other gallery?

  • Hi everyone,
    I am working to set up a site that showcases my photo retouching skills. I am working with WordPress which is sort of new to me and has some different coding issues. Here’s what I am trying to do:

    Check out this site:

    https://www.ladymanson.com/crowsnest/?page_id=117

    I am trying to code it so I can get a rollover image on the images posted. So for example, if you open one of the images, you will see it open to it’s larger size, the retouched “after” image. I want to make it so people can roll their mouse over that image and see the untouched “before” image. I just don’t know how to do this in a WordPress gallery. I am using Fancy Box as an image gallery because it opens up as a lightbox and works really well with me. I have seen plenty of people who have done it and have searched through forums and support to no end. I’m trying to get the images in my gallery like the ones in the gallery on this page:

    https://masteringretouching.com/proof1.php

    Basically so people can open the image and then roll it over to see before and after.

    If you can help me out at all, please comment. Thank you so much!!!

Viewing 3 replies - 1 through 3 (of 3 total)

  • i could use some help with adding mouseover / css hover states to the stock wordpress gallery as well. thanks.

    Moderator bcworkz

    (@bcworkz)

    This is primarily a javascript thing, but it does take a few things to get it working with WP. You need to modify what ever template is used (image.php?) to add a javascript call on mouseover of what ever element holds your image. Then use wp_enqueue_script() to tell WP that you have a javascript file that needs to be loaded. That file, of course, contains the mouseover handler to swap images.

    The rollover technique is most effective when using image sprites and hover states, which involves manipulating the image origins in CSS via javascript or jquery. Which makes the default gallery output completely wrong for the task. You could use the gallery code as a starting point for developing a sprite based gallery. Then just invoke your gallery function in place of the default by using the ‘post_gallery’ filter. However, developing a sprite based gallery will not be a trivial hack.

    It already sounds like it’s too heavy-duty for this solution, though i thank you for the insight,@bcworkz and that is helpful.

    I simply need to style the hover states of a stock thumbnail gallery – so that when a thumbnail image is moused over, it displays the title of the image with a simple semi-transparent color block covering the lower 1/3 of the thumbnail.

    It has been a tricky one, surprisingly. Any other ideas about achieving this through CSS alone?
    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image mouseover in WordPress gallery using Fancy Box or other gallery?’ is closed to new replies.