change hover icons for portfolio images only « Support Forum | Kriesi.at

Support Forum » Display

change hover icons for portfolio images only

7 posts from 2 voices

Started 1 year ago by brouge
Latest reply from Chris Beard
This topic is resolved

Tags:

brouge
Member
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
Posted 1 year ago #
Chris Beard

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

Posted 1 year ago #
brouge
Member
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.
Posted 1 year ago #
brouge
Member

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

Posted 1 year ago #
Chris Beard
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 :)
Posted 1 year ago #
brouge
Member

chris this is working fantastic!
thank you very much!
thomas

Posted 1 year ago #
Chris Beard

Hi

Glad I could help :)
Let us know if there's anything else.

Cheers,
Chris

Posted 1 year ago #