Building the Random Image Loader and Random Quote Loader with jQuery

Introduction - jQuery Random Image Loader

With jQuery, it is very easy to display one or more random images from other web sites.

The code below touches on a couple of different subjects. The code is a working example of the jQuery get() method by pulling in all of the data from a different page. The code performs array-building by using the .push() method. The code renders dynamic HTML by pushing the HTML string to the div tag (RandomImageDIV).

*Keep in mind that to use jQuery, you MUST have a reference to the jQuery library within your web page.*

Using the code

You must have the jQuery library referenced in your web page.

//Step 1. The button used to execute the random image function
<input type="button" onclick="ShowRandomImage()" value="Random Image Loader"> 
//Step 2. The DIV will render the random image.
<div id="RandomImageDIV" hidden></div>   
<script type="text/javascript">
function ShowRandomImage() {
    $.get('http://www.point64.com/space/index.php', function(data) {
        //Get images and push them into an array.
        var idx = 0;
        $('#RandomImageDIV').html(data);
        var imageArray = [];
        $("img").each(function(){
            imageArray.push($(this).attr("src"));
            idx++;
        });         
        //Get random index.
        var idxRAND = Math.floor(imageArray.length * Math.random());
        
        //Render HTML with random image.
        var zahtmlstring = "<table bgcolor='white'>";
        zahtmlstring += "<TR><TD bgcolor='white'><font color='black'>";
        zahtmlstring += "<img src='" + imageArray[idxRAND] + "'>";
        zahtmlstring += "</td></tr></table>";
        $('#RandomImageDIV').html(zahtmlstring);
        $('#RandomImageDIV').show();
    });
}
</script>
//     

See working example demo here.

History

No history.

------------------------------------------------------------

Introduction - Random Quote Loader

With jQuery, it is very easy to write some code that can take quotes from a text file and display a random quote each time a button is clicked.

*For jQuery to work, you MUST have the jQuery library referenced within your web page*

*You MUST replace point64quotes.txt with the file name and location of your quotes file*

Using the code

To get started, you will need a file with quotes. I have created a text file called http://www.point64.com/code/dotnet/point64quotes.txt. You may notice that for my file, the quotes are separated by <BR><BR> tags. The separation between the quotes is critical because whatever item separates your quotes will be the character that is needed to pass into the SPLIT function. Your personal quote file may have quotes separated by other special characters (pipes, commas, slashes). This is fine - just make sure to update the data.split line to use the same special character that your list of quotes uses.

<input type="button" onclick="ShowRandomQuote()" value="Quote Loader">
<div id="RandomQuoteDIV" hidden></div>
<script type="text/javascript">
function ShowRandomQuote() {
    $.get('http://www.point64.com/code/dotnet/point64quotes.txt', function(data) {
        var quotes = data.split("<BR><BR>");
        var idx = Math.floor(quotes.length * Math.random());        
        var zhtmlstring = "<table bgcolor='white'>";
        zhtmlstring += "<TR><TD bgcolor='white'><font color='black'>" + quotes[idx] + "</td>";
        zhtmlstring += "</tr></table>";
        $('#RandomQuoteDIV').html(zhtmlstring);
        $('#RandomQuoteDIV').show();
    });
}
</script>

See working example demo here.

History

Added link to my example quote file, so you don't have to create your own file of quotes to confirm that the code works.