Solved

trying to recreate a swf effect in jquery

Posted on 2012-03-21
2
230 Views
Last Modified: 2012-03-26
I'm redeveloping this site for a non-profit.
There are problems with the following site:
http://www.capodevelopment.com/gngproject/www/

How can I mimic the tv in the bottom right using only jquery?

Right now I've already preloaded the images, and I have them in an array.

I just don't know how to make a function that will put a small, but random delay between changing the image.

There's a div element, whose background image is the tv picture.
So in the code, I need to change the image like:
$('#homeTvSlides').css('background','img/img1.jpg');
-except, on a delay.

TIA Experts
0
Comment
Question by:Imaginx
2 Comments
 
LVL 16

Accepted Solution

by:
Steve Krile earned 500 total points
ID: 37752025
What about something like this.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TV with JQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        var fuzzy1 = "http://www.wallpapersbay.com/wallpapers/fuzzy_screen_png-1024x1024.jpg"
        var fuzzy2 = "http://www.testplant.com/phpBB2/files/vnc_fuzzy_screen.jpg"
        var imageArray = [{ img: "http://i45.photobucket.com/albums/f96/thirty7blinks/beaches_winter_sidewalk_reflection_.jpg" },
                          { img: "http://i777.photobucket.com/albums/yy57/Freethey/winter001.jpg" },
                          { img: "http://i261.photobucket.com/albums/ii41/Thumper460/WinterSnow.jpg" }
                          ];
        var imginterval;
        var imageCount = imageArray.length;
        var currentImage = -1;

        $(document).ready(function () {
            //set the initial image to be fuzzy
            setImageSrc(fuzzy1);

            //kick off the interval to run every 5 seconds
            setInterval(transitionImage, 5000);

        });


        //function called by the interval
        function transitionImage() {
            //if you have reached the end of your image list, cycle back to the first
            //the trick here is to remember that the length of an array is 1-rooted, and the index of the items is zero-rooted
            if (currentImage + 1 > imageCount - 1) { currentImage = -1 };

            //increment to the next image in the imageArray
            currentImage += 1;

            //flip back to fuzzy
            setImageSrc(fuzzy1);

            //wait 1/2 second to flip to the second fuzzy
            setTimeout(function () { setImageSrc(fuzzy2) }, 500);

            //finally - set the final
            setTimeout(function () { setImageSrc(imageArray[currentImage].img) }, 1000);


        }

        function setImageSrc(src) {
            $("#screen").attr("src", src);
        };


    </script>
    <style>

    </style>
</head>
<body>
    
   <div class="tv" style="padding: 10% 45%;">
    <img src="" id="screen" style="width:200px;height:200px;" />
   </div>

</body>
</html>

Open in new window

0
 
LVL 1

Author Closing Comment

by:Imaginx
ID: 37767371
Works perfectly. Nicely commented.

Thanks !!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question