CODEWITHSUNDEEP
jqueryhtmlimage
Gᴇᴏᴍᴇᴛᴇʀ
Gᴇᴏᴍᴇᴛᴇʀ

Reputation: 409

jQuery refresh different image

I know in PHP you can have like a bunch of different images that when you leave the page and come back or refresh it you get a different image. Is it possible to do this in jQuery?

Sorry I don't have a testing code, I just don't know where to start on this

Upvotes: 0

Views: 1266

Answers (3)

Dominic Green
Dominic Green

Reputation: 10258

If you wanted to use the cookie method to make sure the user never gets the same twice I would stick all your info into a json which you could get from a ajax request if needed.

But this could be overkill for what you needed!

Example

    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">

//JSON with your image data

            var imageJson = {"images": [
        {"imgSrc": "image1.jpg", "imgAlt": "Image one"},
        {"imgSrc": "image2.jpg", "imgAlt": "Image two"},
        {"imgSrc": "image3.jpg", "imgAlt": "Image three"}
                ]
            };

//Wait for dom to load then do our stuff

            $(document).ready(function() {
                moveCookie();
            });

//Name off your cookie      
            var cookieName = "counteuoi1dff";
//Id off your image tag
            var imgId = "img1";

        function moveCookie(){
            if(getCookie(cookieName) != undefined){
                var lastImage = parseInt(getCookie(cookieName));

            if(lastImage > imageJson.images.length-1){
                setCookie(cookieName,0,365);
                lastImage = 0;              
            }
                $("#"+imgId).attr("src",imageJson.images[lastImage].imgSrc);
                $("#"+imgId).attr("alt",imageJson.images[lastImage].imgAlt);

                setCookie(cookieName,lastImage+1,365);              
            }else{
                setCookie(cookieName,1,365);
                lastImage = 1;
            }
        }

//Default cookie functions for javascript dont worry about these

            function setCookie(c_name,value,exdays)
                {
                    var exdate=new Date();
                    exdate.setDate(exdate.getDate() + exdays);
                    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
                    document.cookie=c_name + "=" + c_value;
                }
            function getCookie(c_name)
                {
                    var i,x,y,ARRcookies=document.cookie.split(";");
                        for (i=0;i<ARRcookies.length;i++)
                            {
                                x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
                                y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
                                x=x.replace(/^\s+|\s+$/g,"");
                                if (x==c_name)
                                    {
                                        return unescape(y);
                                    }
                            }
                    }   

        </script>
    </head>
    <body>
        <img src="image1.jpg" alt="Image one" id="img1"/>
    </body>

</html>

An example off it running is here just keep refreshing

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34855

You could do something simple like this

var random = Math.floor(Math.random()*3);

if(random == 0){
    $('#one').show();
}

if(random == 1){
    $('#two').show();
}

if(random == 2){
    $('#three').show();
}

Example: http://jsfiddle.net/LBDAw/

(Click RUN again and again to see the change, which is the same as a page reload, since this would be called onLoad)

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39872

Yes, this is possible.

Assuming you want to do everything client side I think you have two options. One is to randomly display a different picture each time.

Second is to store a cookie and display an image based on the cookie value.

Upvotes: 1

Related Questions