Need help to change automatic transition to onclick event

suteadd_1 · 02-21-2011, 06:55 AM

Hi, I need your help on Javascript and jQuery please!

First of all I was looking for a code which transit several background images according to the button you pressed. For example when you clicked on button 1 your background will be img1, and you clicked on button 2 on the same page the background image will be img2.

I could not find the exact code, however I found a similar one.

http://www.ovalpixels.com/bgImageTransition/

This transit images automatically according to the duration you choose and also has random maths, but I need your help to modify this so that this become onclick button event without random images.

Here's the code I found, and I added some extra <p> lines at bottom.

Code:

<head>
<title>BGTransition Demo</title>
<script type="text/javascript" language="javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.BgImageTransition.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
<div id="blaf"></div>
<script language="JavaScript" type="text/javascript">
$( function(){
    var bgImages = [ 'Rosso Castilla.JPG', 'CRW_9620-R.jpg', 'CRW_9609 R.JPG' ];
    var currImage = 'CRW_9620-R.jpg';
    setInterval( function(){
        do{
            var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
        }while( randImage == currImage )
        currImage = randImage;
        $('#blaf').BgImageTransition( 'img/'+currImage );
    }, 5000)
})
</script>

<!--ADDED CODE-->
<p>
<a href="#bg1">button1 </a><br />
<a href="#bg2">button2 </a><br />
<a href="#bg3">button3 </a><br />
</p>

</body>
</html>

It would be much appreciated if you could reply me with a new code so that when you clicked the link the background will transit to different image.
For example, button1 = 'Rosso Castilla.JPG',
button2 = 'CRW_9620-R.jpg',
button3 = 'CRW_9609 R.JPG'.
thank you so much for your time and help!

oVTech · 02-21-2011, 07:40 AM

Check out these threads:
http://www.codingforums.com/showthread.php?t=136821

http://www.codingforums.com/showthread.php?t=122011

http://www.codingforums.com/showthread.php?t=135930

suteadd_1 · 02-21-2011, 10:46 AM

Hi oVTech,

Thank you so much for your quick responce. The links looks really handy and it is perfect in functional wise. However, it would be greatly appreciated if you could tell me the one that has fade in/out transition effects?

If I was a js pro I could probably implement your useful codes into the one I found, but unfortunately I'm a code newbie so its bit over my hand to modify them..

Apologize in advance if I asked you too much, and thanks again for your help and time

Spudhead · 02-21-2011, 12:23 PM

Code:

$( function(){
    $('.image_swap_button').click(function(){
		event.preventDefault();
		var target_image = $(this).data('target-image');
		$('#blaf').BgImageTransition( 'img/' + target_image );
	});
});

Use with:

Code:

<a class="image-swap-button" data-target-image="foo.jpg">button 1</a>
<a class="image-swap-button" data-target-image="baa.jpg">button 1</a>

suteadd_1 · 02-22-2011, 06:08 AM

Quote:

Originally Posted by Spudhead

Code:

$( function(){
    $('.image_swap_button').click(function(){
		event.preventDefault();
		var target_image = $(this).data('target-image');
		$('#blaf').BgImageTransition( 'img/' + target_image );
	});
});

Use with:

Code:

<a class="image-swap-button" data-target-image="foo.jpg">button 1</a>
<a class="image-swap-button" data-target-image="baa.jpg">button 1</a>

Thank you very much for your code, Spudhead! I implemented your code but unfortunately it did not work.. I'm sure the fault is on my side but because I'm a JS newbie I can't find the problem. If you have some spare time it would be greatly appreciated if you could take a look at my code below.

Just in case I upload my working folder contains with all accessing files plus original files at below location (468kb).

http://www.filedropper.com/bgtransition

Please feel free to use those to modify it if you want. Apologize in advance if I asked you too much, and thanks again for your help and time

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BGTransition Demo</title>
<script type="text/javascript" language="javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.BgImageTransition.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>

<div id="blaf">
    <a href="#1" class="image-swap-button" data-target-image="img1.jpg">button 1</a><br />
    <a href="#2" class="image-swap-button" data-target-image="img2.jpg">button 2</a><br />
    <a href="#3" class="image-swap-button" data-target-image="img3.jpg">button 3</a>
</div>

<script language="JavaScript" type="text/javascript">
$( function(){
    $('.image-swap-button').click(function(){
		event.preventDefault();
		var target_image = $(this).data('target-image');
		$('#blaf').BgImageTransition( 'img/' + target_image );
	});
});
</script>

</body>
</html>

Eleos · 02-22-2011, 06:42 AM

Quote:

First of all I was looking for a code which transit several background images according to the button you pressed. For example when you clicked on button 1 your background will be img1, and you clicked on button 2 on the same page the background image will be img2.

Do you really need to use jQuery for something like this?

If not, this is 1 way to do it with plain javascript.

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type='text/javascript'>
            bgPics = ['pic1.jpg','pic2.jpg','pic3.jpg'];
            function changeBg(idx){
                document.body.style.backgroundImage = 'url("'+bgPics[idx]+'")';
            }
            window.onload=function(){
                var btnsBgO = document.getElementById('btnBgContainer').getElementsByTagName('button');
                for(i=0; i < btnsBgO.length; i++){
                    btnsBgO[i].bgNum = i;
                    btnsBgO[i].onclick=function(){
                        changeBg(this.bgNum);
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="btnBgContainer">
            <button>Show Bg 1</button>
            <button>Show Bg 2</button>
            <button>Show Bg 3</button>
        </div>
    </body>
</html>

suteadd_1 · 02-23-2011, 03:50 AM

Quote:

Originally Posted by Eleos

Do you really need to use jQuery for something like this?

If not, this is 1 way to do it with plain javascript.

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type='text/javascript'>
            bgPics = ['pic1.jpg','pic2.jpg','pic3.jpg'];
            function changeBg(idx){
                document.body.style.backgroundImage = 'url("'+bgPics[idx]+'")';
            }
            window.onload=function(){
                var btnsBgO = document.getElementById('btnBgContainer').getElementsByTagName('button');
                for(i=0; i < btnsBgO.length; i++){
                    btnsBgO[i].bgNum = i;
                    btnsBgO[i].onclick=function(){
                        changeBg(this.bgNum);
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="btnBgContainer">
            <button>Show Bg 1</button>
            <button>Show Bg 2</button>
            <button>Show Bg 3</button>
        </div>
    </body>
</html>

Hi Eleos, thank you so much for your coding, and it worked perfectly when I put it into my code too!

With regards to your question, yes, I needed it to be fade in and out animation. If you know any link or ways to input transitional effect please let me know!

Thank you again for your time and help, it was much appreciated.