How to achieve fading image technique?

DezUk

DezUk

DezUk

Associate
Joined
20 Sep 2003
Posts
2,384
Location
Scotland
I have an idea for a small website and wanted to use a rollover technique I have seen on the Pretty Green website:

www.prettygreen.com

When you mouse over the images on the homepage they gradually change from black n white to colour. I see in the html there is a refernce to this javascript file

Code: 
<script type="text/javascript" src="/js/blackwhite/colorhover.js"></script>

Looking at the code though there is a whole load of reference to lots of js and css files

Code: 
    <!-- Styles -->
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/web.css" />
    <link rel="stylesheet" href="/css/jqModal.css" />
    <link rel="stylesheet" href="/css/slider.css" />
    <link rel="stylesheet" href="/css/blacklabel.css" />
    <link rel="stylesheet" href="/css/uniform.default.css" />
    <link rel="stylesheet" href="/css/ui-lightness/jquery-ui-1.8.2.custom.css" />

	<link rel="apple-touch-icon" href="http://www.prettygreen.com/img/apple-touch-icon.png" />
	<!--[if IE 7]>
	<link rel="stylesheet" href="/css/ie7.css" />
	<script type="text/javascript" charset="utf-8" src="/js/json.js"></script>
	<![endif]-->
	<!--[if IE 8]>
	<link rel="stylesheet" href="/css/ie8.css" />
	<![endif]-->	
    

    <!-- Actions -->
    <script type="text/javascript" src="/js/frontend/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="/js/frontend/jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript" src="/js/frontend/jquery.pngFix.pack.js"></script>
    <script type="text/javascript" src="/js/frontend/jquery.scrollTo-min.js"></script>

    <script type="text/javascript" src="/js/frontend/jqzoom.pack.1.0.1.js"></script>
    <script type="text/javascript" src="/js/frontend/jqModal.js"></script>
    <script type="text/javascript" src="/js/jquery.uniform.min.js"></script>
    <script type="text/javascript" src="/js/frontend/actions.js"></script>
	<script type="text/javascript" src="/js/criteo_ld.js"></script>
	<script type="text/javascript" src="/js/blackwhite/submenu.js"></script>

	<script type="text/javascript" charset="utf-8">
		// fixes for safari5
		if($.browser.safari && $.browser.version.substring(0, 1) == "5"){
			document.write('<link rel="stylesheet" href="/css/safari5.css" />');
		}

		// fixes for ff2
		if($.browser.mozilla && $.browser.version.substring(0, 4) != "1.9."){
			document.write('<link rel="stylesheet" href="/css/ff2.css" />');
			document.write('<' + 'scr' + 'ipt type="te' + 'xt/javascript" src="/js/json.js"></scr' + 'ipt>');
		}else{
			$(function () { $('select').uniform(); });
		}
	</script>

Can anyone explain what all this is doing and how I can use the colour fade technique?


Thanks
 
They're using jQuery. Here's the code for their version which is in the file mentioned in the first script tag:

Code: 
$(document).ready(function(){
    /**
     * Colored image section
     */
    $('.color-hover').each(function(){
        var obj = $(this);
        obj.data('is_locked', false);

        var lock = function(){
            obj.data('is_locked', true);
        };
        var asquire = function(){
            obj.data('is_locked', false);
        };
        var is_locked = function(){
            return obj.data('is_locked');
        };
        
        
        obj.mouseenter(function(){
            if(is_locked())return;
            lock();
            $('img:first', obj).fadeOut('normal', asquire)
        });
        obj.mouseleave(function(){
            var fadeout = function(){
                if(is_locked()){
                    setTimeout(fadeout, 1000);
                    return;
                }
                lock();
                $('img:first', obj).fadeIn('normal', asquire);
            };
            fadeout();
        });
    });
 
});

Here's a tutorial for how to create this effect if you wanted to roll your own...
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
 
Last edited:
The simplest way from the code you have would be to remove the .a from img.a on your jquery selector.

That will apply the effect to all images.
 
You must log in or register to reply here.
Back
Top Bottom