Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #10163


    i know that it’s possible to change the icons when hovering over an image opened by light box.

    it’s even possible to add new classes with having more than the default icons available (

    i want to change the icon for the portfolio items only.

    i know that i can change simply the “mangify.png” but that will change the hover icons for the feature images in the blog too.

    in the custom.js i added

    if(jQuery(this).hasClass('powerpoint')) $newclass = 'lightbox_powerpoint';

    and give the image link via css

    background: transparent url( no-repeat center center;

    now i don’t know where to give the portfolio images the class = “powerpoint” and need some help.

    best regards




    would you like to change the hover image for (all and only) portfolio items on specific pages? For example: all your images on your portfolio page will have a different hover image from all other pages. Or do you really plan to mix it up somehow? It seems like an elaborate way to achieve this.

    What I’m asking is: On which pages do you plan on using this? Can you provide links? This way we’ll have a better understanding which allows us to provide better solutions.




    hi chris for now it would be enough to change the hover image for all portfolio items (on every page that uses a portfolio).

    check out the links:

    all my blog images have a plus symbol:

    all my portfolio images have a powerpoint symbol:

    i achieved this letting the custom.js check if the image file attribute match a certain extension

    e.g. jpg, gif, jpeg, tiff get the plus-hover while .png gets the powerpoint-hover.

    if(jQuery(this).attr('href').match(/(jpg|gif|jpeg|tif)/)) $newclass = 'lightbox_plus';
    if(jQuery(this).attr('href').match(/(png)/)) $newclass = 'lightbox_powerpoint';

    therefore i need to change the picture formats which is not a really satisfying way to do.

    but check out the hover on the homepage:

    the contact site:

    and the book sites:

    they are all png, but i created a new class for each one in the custom.js so an image gets an hover effect that is independant from the file format of the image.

    if(jQuery(this).hasClass('buy')) $newclass = 'lightbox_buy';
    if(jQuery(this).hasClass('plus')) $newclass = 'lightbox_plus';
    if(jQuery(this).hasClass('book')) $newclass = 'lightbox_book';
    if(jQuery(this).hasClass('skype')) $newclass = 'lightbox_skype';
    if(jQuery(this).hasClass('powerpoint')) $newclass = 'lightbox_powerpoint';

    i hope you can present a solution for the portfolio images that is independant from the image format too by simply adding the class “powerpoint” to all the images there.

    best regards


    ps: the coolest thing will be of course to change the hover effect for each post individually by simply give them a custom class from the backend. maybe this is possible with a plugin that is working with the theme.


    hey chris i am sorry, but can you please move the whole topic to the display forum where it belongs.

    thank you



    I did some poking around and you can try something like the following: Check if your image is preceded by a div with a class that defines your page as a portfolio page, then add your preferred class.

    In your custom.js you’ll find this first line, add the second line which I’ve added in there and it should assign your class when it’s on a page were your image is within a portfolio_entry. You can do the same for specific pages as each page has it’s own class/id.

    if(jQuery(this).attr('href').match(/(jpg|gif|jpeg|png|tif)/)) $newclass = 'lightbox_image';
    if(jQuery(this).parents().hasClass('portfolio_entry')) $newclass ='YOURCLASSHERE';

    If you combine this with what you’ve previously coded this should work for everything.

    Let me know if this works :)


    chris this is working fantastic!

    thank you very much!




    Glad I could help :)

    Let us know if there’s anything else.



Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘change hover icons for portfolio images only’ is closed to new replies.