Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

Can someone please help me with transitions for all images


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Nov 30, 2013, 01:22 PM
AmiG
 
5 posts · Aug 2013
I am trying to create the same transition affect for all images as coded by default for thumbnails. In other words I would like all images appear to appear gray scale until hovered over. I downloaded the CSS3 Transitions plug-in but I couldn't get that to work either. Here is a sample page that I would like to have treated in this way: http://tinyurl.com/o9p2fgp

Really would appreciate a push in the right direction.

Thanks in advance

AmiG.
  #2  
Old Nov 30, 2013, 03:07 PM
juggledad's Avatar
juggledad
 
22,097 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
If you can't find a plugin to do this, you need to look at the code to see how it is doing it.

The only way someone could tell you is if they look at the code and spend a 'bit' of time figuring it out, then spending a 'bit' more time writting up so you would understand it.

If you can't figure it out, you may need to hire someone to help you. I've never looked at that code and could not tell you how it worked. Maybe someone else will decide to take the time and dig in to help you.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Nov 30, 2013, 03:11 PM
AmiG
 
5 posts · Aug 2013
Thanks for the reply and suggestion.

I guess if i could find where the code is i could at least take a look. I couldn't find where it was located. Any ideas?
  #4  
Old Jan 13, 2014, 10:21 PM
CrouchingBruin's Avatar
CrouchingBruin
 
185 posts · Aug 2010
Santa Monica, CA
I believe I have come up with a solution by cloning some of the code used to process the blog thumbnails.

Add this JavaScript to the custom code section of Montezuma (Appearance > Montezuma Options > Head > Insert Code > Bottom):
Code:
<script>
function image_fade() {
	jQuery('.image-fade img').each(function(){
		var el = jQuery(this);
		el.css({'position':'absolute'})
		.wrap("<div class='img_wrapper' style='display:block'>")
		.clone().addClass('img_grayscale')
		.css({'position':'absolute','z-index':'998','opacity':'1.0'})
		.insertBefore(el)
		.queue(function(){
				var el = jQuery(this);
				el.parent().css({'width':this.offsetWidth,'height':this.offsetHeight });
				el.dequeue();
			});
	});
}

jQuery(window).load(function() {
	if( jQuery(window).width() > 959 ) {
		image_fade();
	}
});

jQuery(document).ready(function($){
  
	// Transition image 
	if( $(window).width() > 959 ) {
		// Add hover event for images
		$('.image-fade').hover(
			function(){ $(this).find('.img_grayscale').stop().animate({opacity:0}, 1000).next().stop().animate({opacity:1}, 700); },
			function(){ $(this).find('.img_grayscale').stop().animate({opacity:1}, 1000).next().stop().animate({opacity:0}, 700); }
		);
		// Remove the default behavior for mouse-over into the post on single post pages & pages
		$('.page .hentry').unbind("hover");
		$('.single-post .hentry').unbind("hover");
	} else {
		$('.image-fade img').css('opacity', 1);
	}
  
}); 
</script>
Then modify the two CSS rules below, which are found in the post.css virtual CSS file, by adding the selectors shown in red:
Code:
.post-thumb img,
.image-fade img {
	-webkit-filter: 		grayscale(0);
	opacity: 				0; 
	filter: 					alpha(opacity=0); 
	-ms-filter: 			"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	display:					block;
}

.post-thumb img.img_grayscale,
.image-fade img.img_grayscale
{ 
	filter: 					grayscale(100%); /* Current draft standard */
	-ms-filter: 			grayscale(100%); 
	-o-filter: 				grayscale(100%); /* opera */ 
	filter: 					url("%tpldir%/images/gray-filter.svg#grayscale"); /* Firefox */
	filter: 					gray; /* IE */
	-webkit-filter: 		grayscale(1); /* Old WebKit */
	-webkit-filter: 		grayscale(100%); /* New WebKit */
}
Now, when you have an image on a static (non-blog) page where you want to have the color transition effect, enclose it in a container (like a DIV, although it could also be an anchor/link tag) that has a class of image-fade:
Code:
<div class="image-fade"><img src="/images/logo.jpg" /></div>
The image should show up in grayscale, and turn to color when the mouse is moved over it. You can also add other styling options to the image-fade class in one of the virtual CSS files.

An example can be seen here.

Edit: I just noticed that for some reason, it's not working in Firefox, but seems to work in Chrome and IE. I'll need to dig into it.

Edit 2: It seems to work on my other sandbox site under all browsers; I must have hosed the original one, I'll have to refresh the installation.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!

Last edited by CrouchingBruin; Jan 14, 2014 at 08:28 AM.

Bookmarks

Tags
css3, image styling, transitions

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
will header images do Javascript rotation and crossfade with a random order of images adamslc8 Header configuration & styling 3 Oct 14, 2011 12:58 PM
[SOLVED] Background graphic file loads first in page transitions windhover4 Atahualpa 3 Wordpress theme 7 Apr 11, 2011 11:48 AM
Header Images - One fixed image for Home Page - Rotate all images on all other pages? ClearlyRobert Header configuration & styling 10 Oct 12, 2010 12:12 PM
Rotating Images on Homepage with Static Images on Other Pages chainpin Header configuration & styling 0 Sep 7, 2010 07:32 PM


All times are GMT -6. The time now is 03:05 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.