ansaurus

Question

Answer 1

+1 A:

There are a lot of options out there. http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/

But if you're talking about actually grabbing the current image at http://livetraffic.vicroads.vic.gov.au/region/23004?expanddiv=group1 then that's a bit different. Is this what you're after?

ryan 2010-08-13 15:52:33

Yeah, that's what I'm hoping to achieve, which can be done by refreshing the image.

Sam 2010-08-15 06:06:12

Answer 2

+2 A:

This should do it... tested in Firefox and a few others.

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="utf-8" />
<title>Camera Slideshow</title>
<style>
#wrapper {
    width:   400px;
    overflow:hidden;
}
#slideshow {
    position:relative;
    width:   10000px;
    -webkit-transition: all linear 500ms;
    -moz-transition:    all linear 500ms;
    -o-transition:      all linear 500ms;
    transition:         all linear 500ms;
}
.slide {
    float:   left;
    padding: 24px;
}
.slide img {
    width:   352px;
}
</style>
</head>
<body id="cams" class="">
    <div id="content" class="">
        <div id="wrapper">
            <div id="slideshow" style="left:0;"></div>
        </div>
        <div id="list">
            <select id="locations"></select>
        </div>
    </div>
<script>
var Images = [
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23004/1281263292.jpg", name: "Kings Way / Sturt St" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23008/1281263293.jpg", name: "Punt Rd / Swan St" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23011/1281263293.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23013/1281263294.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23014/1281263294.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23020/1281263295.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23025/1281263296.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23022/1281263296.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23024/1281263296.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23033/1281263298.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23034/1281263298.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23040/1281263299.jpg", name: "WGF / Montague St" }
];
Images.Current = 0;

var App = {
    run: function(){
        var instance = this;

        this.addSlides();

        setInterval(function(){
            instance.refresh();
            instance.rotate();
        }, 5000);

        document.getElementById("locations").onchange = function() {
            var loc = document.getElementById("locations").value;
            if (loc>-1) {
                Images.Current = (loc-1);
                instance.rotate();
            }
        };
    },

    addSlides: function() { //352 x 288
        var limit = Images.length;
        var html  = '';
        var list  = '<option value="-1">Choose a location</option>';

        for (var i=0; i<limit; i++) {
            html += "<div class='slide'>" +
                    "   <img class='img' alt='" + i + "' title='" + Images[i].name + "' src='" + Images[i].src + "' />" +
                    "</div>";
            list += "<option value='" + i + "'>" + Images[i].name + "</option>";
        }
        document.getElementById('slideshow').innerHTML += html;
        document.getElementById('locations').innerHTML += list;
    },

    refresh: function() {
        var img  = document.getElementsByClassName('img')[Images.Current];
        img.src = Images[Images.Current].src + '?' + (new Date()).getTime();
    },

    rotate: function() {
        Images.Current++;
        if (Images.Current == Images.length) { Images.Current = 0; }
        var xpos = (Images.Current==0) ? 0 : Images.Current * -400;
        document.getElementById('slideshow').setAttribute('style', 'left: ' + xpos + 'px;');
    }
};
App.run();
</script>
</body> 
</html>

A few things...

I didn't fill in all the location names, but that should be easy
The image file name is not imprtant, you could use anything, for example: http://livetraffic.vicroads.vic.gov.au/images/23008/1281263293.jpg is the same as http://livetraffic.vicroads.vic.gov.au/images/23008/hello.jpg
There are a number of optimizations you could do but I didn't bother for reasons of time and clarity.

michael 2010-08-18 15:05:48

Answer 3

A:

You can try any of the following scripts..

Its easy to install and use,,

http://www.hscripts.com/scripts/php/bannerRotator.php (its simple)

http://www.hscripts.com/scripts/php/licensed/ad-management.php (it can used for creating multiple campaigns but it cost little)

http://www.hscripts.com/scripts/JavaScript/slide-show-image.php (script using only js)

kvijayhari 2010-08-19 07:07:01

ansaurus

tags:

views:

answers:

Image slideshow and refresher

related questions