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

    hi,

    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 (http://www.kriesi.at/support/topic/using-magnify-hover-with-normal-images).

    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

    .lightbox_powerpoint{
    background: transparent url(http://www.mathemitnullplan.de/wp-content/uploads/powerpoint.png) no-repeat center center;
    }

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

    best regards

    thomas

    #67110

    Hi,

    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.

    Regards,

    Chris

    #67111

    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: http://www.mathemitnullplan.de/neuigkeiten

    all my portfolio images have a powerpoint symbol: http://www.mathemitnullplan.de/lehrmaterial

    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: http://www.mathemitnullplan.de/

    the contact site: http://www.mathemitnullplan.de/kontakt

    and the book sites: http://www.mathemitnullplan.de/buchvorstellung/analysis

    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

    thomas

    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.

    #67112

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

    thank you

    #67113

    Hey,

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

    #67114

    chris this is working fantastic!

    thank you very much!

    thomas

    #67115

    Hi

    Glad I could help :)

    Let us know if there’s anything else.

    Cheers,

    Chris

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

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