Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Need help to change automatic transition to onclick event

    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!

  • #2
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-




  • Users who have thanked oVTech for this post:

    suteadd_1 (02-21-2011)

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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>

  • Users who have thanked Spudhead for this post:

    suteadd_1 (02-22-2011)

  • #5
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Spudhead View Post
    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>

  • #6
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    0
    Thanked 7 Times in 7 Posts
    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>

  • Users who have thanked Eleos for this post:

    suteadd_1 (02-23-2011)

  • #7
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Eleos View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •