http://www.kriesi.at/support/topic/change-hover-icons-for-portfolio-images-only Support Forum - Topic: change hover icons for portfolio images only en-US Thu, 20 Jun 2013 03:58:30 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/change-hover-icons-for-portfolio-images-only#post-46794 Sun, 18 Mar 2012 05:28:00 +0000 Chris Beard 46794@http://www.kriesi.at/support/ <p>Hi</p> <p> Glad I could help :)<br /> Let us know if there's anything else. </p> <p>Cheers,<br /> Chris </p> http://www.kriesi.at/support/topic/change-hover-icons-for-portfolio-images-only#post-46727 Sat, 17 Mar 2012 18:00:18 +0000 brouge 46727@http://www.kriesi.at/support/ <p>chris this is working fantastic!<br /> thank you very much!<br /> thomas </p> http://www.kriesi.at/support/topic/change-hover-icons-for-portfolio-images-only#post-46675 Sat, 17 Mar 2012 05:28:05 +0000 Chris Beard 46675@http://www.kriesi.at/support/ <p>Hey,</p> <p>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.</p> <p>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.</p> <pre><code>if(jQuery(this).attr(&#39;href&#39;).match(/(jpg|gif|jpeg|png|tif)/)) $newclass = &#39;lightbox_image&#39;; if(jQuery(this).parents().hasClass(&#39;portfolio_entry&#39;)) $newclass =&#39;YOURCLASSHERE&#39;;</code></pre> <p>If you combine this with what you've previously coded this should work for everything.</p> <p>Let me know if this works :) </p> http://www.kriesi.at/support/topic/change-hover-icons-for-portfolio-images-only#post-46246 Wed, 14 Mar 2012 15:20:11 +0000 brouge 46246@http://www.kriesi.at/support/ <p>hey chris i am sorry, but can you please move the whole topic to the display forum where it belongs.<br /> thank you </p> http://www.kriesi.at/support/topic/change-hover-icons-for-portfolio-images-only#post-46197 Wed, 14 Mar 2012 09:47:53 +0000 brouge 46197@http://www.kriesi.at/support/ <p>hi chris for now it would be enough to change the hover image for all portfolio items (on every page that uses a portfolio).<br /> check out the links:<br /> all my blog images have a plus symbol: <a href="http://www.mathemitnullplan.de/neuigkeiten" rel="nofollow">http://www.mathemitnullplan.de/neuigkeiten</a><br /> all my portfolio images have a powerpoint symbol: <a href="http://www.mathemitnullplan.de/lehrmaterial" rel="nofollow">http://www.mathemitnullplan.de/lehrmaterial</a></p> <p>i achieved this letting the custom.js check if the image file attribute match a certain extension<br /> e.g. jpg, gif, jpeg, tiff get the plus-hover while .png gets the powerpoint-hover.<br /> <pre><code>if(jQuery(this).attr(&#39;href&#39;).match(/(jpg|gif|jpeg|tif)/)) $newclass = &#39;lightbox_plus&#39;; if(jQuery(this).attr(&#39;href&#39;).match(/(png)/)) $newclass = &#39;lightbox_powerpoint&#39;;</code></pre> <p>therefore i need to change the picture formats which is not a really satisfying way to do.</p> <p>but check out the hover on the homepage: <a href="http://www.mathemitnullplan.de/" rel="nofollow">http://www.mathemitnullplan.de/</a><br /> the contact site: <a href="http://www.mathemitnullplan.de/kontakt" rel="nofollow">http://www.mathemitnullplan.de/kontakt</a><br /> and the book sites: <a href="http://www.mathemitnullplan.de/buchvorstellung/analysis" rel="nofollow">http://www.mathemitnullplan.de/buchvorstellung/analysis</a></p> <p>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.</p> <pre><code>if(jQuery(this).hasClass(&#39;buy&#39;)) $newclass = &#39;lightbox_buy&#39;; if(jQuery(this).hasClass(&#39;plus&#39;)) $newclass = &#39;lightbox_plus&#39;; if(jQuery(this).hasClass(&#39;book&#39;)) $newclass = &#39;lightbox_book&#39;; if(jQuery(this).hasClass(&#39;skype&#39;)) $newclass = &#39;lightbox_skype&#39;; if(jQuery(this).hasClass(&#39;powerpoint&#39;)) $newclass = &#39;lightbox_powerpoint&#39;;</code></pre> <p>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.<br /> best regards<br /> thomas</p> <p>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. </p> http://www.kriesi.at/support/topic/change-hover-icons-for-portfolio-images-only#post-46139 Wed, 14 Mar 2012 03:27:39 +0000 Chris Beard 46139@http://www.kriesi.at/support/ <p>Hi,</p> <p>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.</p> <p>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.</p> <p>Regards,<br /> Chris </p> http://www.kriesi.at/support/topic/change-hover-icons-for-portfolio-images-only#post-45608 Sat, 10 Mar 2012 11:30:13 +0000 brouge 45608@http://www.kriesi.at/support/ <p>hi,</p> <p>i know that it's possible to change the icons when hovering over an image opened by light box.<br /> it's even possible to add new classes with having more than the default icons available (<a href="http://www.kriesi.at/support/topic/using-magnify-hover-with-normal-images)" rel="nofollow">http://www.kriesi.at/support/topic/using-magnify-hover-with-normal-images)</a>.<br /> i want to change the icon for the portfolio items only.</p> <p>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.<br /> in the custom.js i added<br /> <code>if(jQuery(this).hasClass(&#39;powerpoint&#39;)) $newclass = &#39;lightbox_powerpoint&#39;;</code><br /> and give the image link via css<br /> <pre><code>.lightbox_powerpoint{ background: transparent url(http://www.mathemitnullplan.de/wp-content/uploads/powerpoint.png) no-repeat center center; }</code></pre> <p>now i don't know where to give the portfolio images the class = "powerpoint" and need some help.</p> <p>best regards<br /> thomas </p>