Daniel, thats what i tried first, but the problem is 2 variable images make for crappy code…lol, since each image is pulled by the loop that is.. i made it work with 2 images, but this will work for everyone without haveing to manually enter an image url into the javascript…2 images is not necessary I just filtered them once on mouse over, once on mouse out, to change it back…. however, the filters are not yet available for safari and the other mac browser, so you will only see it on a PC… anyway… heres how…
first off,
open notepad, and creat a file, calle filters.svg, then include this:
<svg xmlns="https://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
save that file to your server, or through wordpress media… if it will let you… I just ftp’ed it up… then write down the url.. You are gonna paste it in where is have put ^^^^^ symbols.. it needs to be written in as follows..
https://www.yoursite/filters.svg#grayscale
its very important that you include the ” #grayscale” after the url.
next, under appearance > editor, you will go to loop_slider.php..
the next bit of java needs to be place immediately after
<li class="slide">
copy the following… and paste it in…
<script type="text/javascript">
function changebg<?php the_ID(); ?>(){
var x="<?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'slider-thumb' ); ?>"
document.getElementById('post-<?php the_ID(); ?>').style.cssText="background-image:url(<?php echo $thumbnail[0]; ?>); -webkit-filter: grayscale(1%); -moz-filter: grayscale(1%);";
}
function changebgback<?php the_ID(); ?>(){
var x="<?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'slider-thumb' ); ?>"
document.getElementById('post-<?php the_ID(); ?>').style.cssText="background-image:url(<?php echo $thumbnail[0]; ?>); filter: url(https://^^^^YOUR-URL-HERE^^^^/filters.svg#grayscale); filter: gray;-webkit-filter:grayscale(100%);-moz-filter: grayscale(100%);";
}
</script>
for the above…it needs to be in the loop because it has to run once for each time an image loads..technically, it is writing in the image id each time, and renames the functions to suit.. The first function is going to change the image to color on mouse over, and the second function is going to change it back on mouse out…
now we are going to set the images to grayscale as they load…
the original code that we are going to change, which daniel wrote, qhuite well, i might add.. comes immediately after the old <li class="slide"> position.. find:
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?><?php if( isset( $thumbnail ) ) : ?> style="background:url(<?php echo $thumbnail[0]; ?>) center no-repeat"<?php endif; ?>>
and paste in..
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?><?php if( isset( $thumbnail ) ) : ?> onmouseover="changebg<?php the_ID(); ?>();" onmouseout="changebgback<?php the_ID(); ?>()" style="background-image:url(<?php echo $thumbnail[0]; ?>);filter: gray;-webkit-filter:grayscale(100%); filter: url(https://^^^YOURURLHERE^^^/filters.svg#grayscale);-moz-filter: grayscale(100%);"<?php endif; ?>>
the final product, starting from the php endif should look like this…
<?php endif; ?>
<li class="slide">
<script type="text/javascript">
function changebg<?php the_ID(); ?>(){
var x="<?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'slider-thumb' ); ?>"
document.getElementById('post-<?php the_ID(); ?>').style.cssText="background-image:url(<?php echo $thumbnail[0]; ?>); -webkit-filter: grayscale(1%); -moz-filter: grayscale(1%);";
}
function changebgback<?php the_ID(); ?>(){
var x="<?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'slider-thumb' ); ?>"
document.getElementById('post-<?php the_ID(); ?>').style.cssText="background-image:url(<?php echo $thumbnail[0]; ?>); filter: url(https://^^^^YOUR-URL-HERE^^^^/filters.svg#grayscale); filter: gray;-webkit-filter:grayscale(100%);-moz-filter: grayscale(100%);";
}
</script>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?><?php if( isset( $thumbnail ) ) : ?> onmouseover="changebg<?php the_ID(); ?>();" onmouseout="changebgback<?php the_ID(); ?>()" style="background-image:url(<?php echo $thumbnail[0]; ?>);filter: gray;-webkit-filter:grayscale(100%); filter: url(https://^^^YOURURLHERE^^^/filters.svg#grayscale);-moz-filter: grayscale(100%);"<?php endif; ?>>
<div class="opacity"></div>
If i forgot something, let me know…but that should be it…
I like to see people learn, instead of just replacing a whole page, but if it was too confusing, i will just post the rewritten page to pastebin.
and Daniel, like i said before, It would be awesome if you included this or some version in the upcoming minimatica release :).. ill gladly help tweak it according to what you want.
When your done please post a link I wanna see what it looks like..
if you need a quicker answer on something email me here:
[email protected]
its an alias, but i will reply from my person email..
