To accomplish this task, three web components are needed: html, css, and some sort of JavaScript. For the latter, I picked jQuery library which is well suited for this task. In addition, other standard web technologies will be used, such as JSON and Ajax.
\n[space]<\/p>\n
Prerequisites:<\/strong><\/h3>\nFor the following part, we will need to be comfortable with a simple editing of html<\/span> code, preparing JSON<\/em> list of our photos, including jQuery\/Ajax<\/em> script, and with a little bit of css<\/em> styling.<\/p>\n[space]
\n[space]<\/p>\n
\n[space]
\n[separator]<\/p>\n
[space]<\/p>\n
Putting all things together:<\/strong><\/h2>\nFirst, we start off with creating a structured list that will contain file name and title (description) of our photos. In this example, we have five photos with two data sets for each (title and url). Feel free to add, replace, or remove photos from this file, but always make sure that its structure remains the same. “Title” is essentially a header or photo description that will be displayed with it and “url” field takes the file name of your image.
\nI often check integrity of JSON file at: Jsonlint<\/a>.
\n[space] <\/p>\nExample of JSON file – images.json<\/span><\/p>\n[space]<\/p>\n
[sourcecode language=”js”]
\n\/\/ Building jason list
\n{"images":[
\n{
\n\t"title": "Sunset at the Horshoe Bend, AZ",
\n\t"url": "1.jpg"
\n\t },
\n\t {
\n\t"title": "Kauai Highlands",
\n\t"url": "2.jpg"
\n\t },
\n\t {
\n\t"title": "Storm is coming",
\n\t"url": "3.jpg"
\n\t },
\n\t {
\n\t"title": "Venice – Grand Canal view from the Rialto Bridge",
\n\t"url": "4.jpg"
\n\t },
\n\t {
\n\t"title": "Mexican wolf",
\n\t"url": "5.jpg"
\n\t }
\n\t ]
\n}
\n[\/sourcecode]
\n[space]
\nNext, save the above code as images.json and create a new directory on your web server where all images and the just saved .json file will be located. I have chosen images_rand<\/em> to distinguish it from common web-site images. For example, if your web site is at www.yoursite.com, new directory would go to: www.yoursite.com\/images_rand. Again, this is where both images and the above images.json file would go.
\n[space]<\/p>\nEditing html page:<\/h6>\n
This is a very simple step: just place new div<\/em> element into your html document, somewhere between the body<\/em> tags:
\n[sourcecode language=”html”]
\n<body>
\n……
\n<div id="singleshot">
\n<\/div>
\n……
\n<\/body>
\n[\/sourcecode]
\nI have assigned this element new id and called it “singleshot”. This is where the random image and description will be injected by the jQuery call.
\n[space]<\/p>\nStyling the image:<\/h6>\n
Position and style can be adjusted in css<\/em> stylesheet which gets loaded with your page. You can find its name by viewing the page source from any browser.
\nThe link that you are looking for is in the head<\/em> sections. For example:<\/p>\nPart of the html head<\/em> section<\/span><\/p>\n[html 1=”4″ language=”highlight:”]
\n<head>
\n…..
\n<link rel="stylesheet" href="http:\/www.yoursite\/css\/style.css" type="text\/css" media="all" \/>
\n…..
\n<script type=’text\/javascript’ src=’https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.2\/jquery.min.js?ver=1.6.2′><\/script>
\n…..
\n<\/head>
\n[\/html]
\n[space]<\/p>\n
Example of css file<\/span><\/p>\n[sourcecode language=”css”]
\n#singleshot {
\n \t\tpadding:7px;
\n \t\tbackground-color: rgb(80,80,80);
\n \t\t-moz-border-radius: 5px;
\n \t\t-webkit-border-radius: 5px;
\n \t border-radius: 5px;
\n \tmargin-bottom: 60px;
\n \twidth:665px;
\n \theight: 499px;
\n }
\n#singleshot p {
\n\t background: rgba(90,90,90,0.3);
\n\t color: rgb(20,20,20);
\n\t position: relative;
\n\t top: -500px;
\n\t margin: 0 0 0 0 ;
\n\t padding: 5px 0 5px 0;
\n\t text-align: center;
\n\t font-family: Arial, Helvetica;
\n\t font-size: 2.2em;
\n\t font-weight: bold;
\n }
\n[\/sourcecode]
\nI have assigned this element new id called “singleshot”. This is where the image and description will be injected by jQuery call.
\n[space]<\/p>\n
jQuery code:<\/h6>\n
First, we need to include jQuery library into our page. To accomplish this, include its source into the head<\/em> section as shown above (part of the html section, line 5). The latest (Aug 2012) source is always at: Google Ajax API CDN<\/a>.
\nCheck for the most recent version at: jQuery main web site <\/a>.
\nEnter the following script into the html<\/em> body, just before the “singleshot” div<\/em> element at line 3 above (Editing html page).
\n[space]
\n[js]
\n<script type="text\/javascript">
\n jQuery.getJSON(‘http:\/\/www.yoursite.com\/..\/images_rand\/images.json’, function(data) { \/\/Ajax call
\n var item = data.images[Math.floor(Math.random()*data.images.length)]; \/\/select image at random
\n \/\/build the complete <img> tag
\n jQuery(‘<img src="http:\/\/yoursite.com\/..\/images_rand\/’ + item.url + ‘ " width="665px" height="499px">’).appendTo(‘#singleshot’);
\n jQuery(‘<p>’ + item.title + ‘<\/p>’).appendTo(‘#singleshot’); \/\/attach "title" to separate <p> tag
\n});
\n<\/script>
\n[\/js]
\n[space]
\n[warning]Since I was adapting this script for a WordPress template, I use jQuery instead of $ sign in the front of jQuery statements (else the script won’t work in WordPress).[\/warning]
\nThe script starts with Ajax call to images.json<\/em> file located on your server. Data is read into an array and random entry is assigned to a variable item<\/em>. In the next step, the complete img<\/em> tag is built by adding the image file name (url) and image dimensions, which are constant for the web page. Once done, the img<\/em> tag is appended to #singleshot<\/em> id in the empty div<\/em> element. The last step of our script grabs the title<\/em> and places it into a separate p<\/em> tag.
\nThat’s all. Change the path to your images.json file and image dimensions to fit your page.
\n[space]
\nFinal result is at the lower part of my Photography web site<\/a>.
\n[space]<\/p>\n\n
[space]
\n[space]<\/p>\n
\n[space]
\n[separator]<\/p>\n
[space]<\/p>\n
Putting all things together:<\/strong><\/h2>\nFirst, we start off with creating a structured list that will contain file name and title (description) of our photos. In this example, we have five photos with two data sets for each (title and url). Feel free to add, replace, or remove photos from this file, but always make sure that its structure remains the same. “Title” is essentially a header or photo description that will be displayed with it and “url” field takes the file name of your image.
\nI often check integrity of JSON file at: Jsonlint<\/a>.
\n[space] <\/p>\nExample of JSON file – images.json<\/span><\/p>\n[space]<\/p>\n
[sourcecode language=”js”]
\n\/\/ Building jason list
\n{"images":[
\n{
\n\t"title": "Sunset at the Horshoe Bend, AZ",
\n\t"url": "1.jpg"
\n\t },
\n\t {
\n\t"title": "Kauai Highlands",
\n\t"url": "2.jpg"
\n\t },
\n\t {
\n\t"title": "Storm is coming",
\n\t"url": "3.jpg"
\n\t },
\n\t {
\n\t"title": "Venice – Grand Canal view from the Rialto Bridge",
\n\t"url": "4.jpg"
\n\t },
\n\t {
\n\t"title": "Mexican wolf",
\n\t"url": "5.jpg"
\n\t }
\n\t ]
\n}
\n[\/sourcecode]
\n[space]
\nNext, save the above code as images.json and create a new directory on your web server where all images and the just saved .json file will be located. I have chosen images_rand<\/em> to distinguish it from common web-site images. For example, if your web site is at www.yoursite.com, new directory would go to: www.yoursite.com\/images_rand. Again, this is where both images and the above images.json file would go.
\n[space]<\/p>\nEditing html page:<\/h6>\n
This is a very simple step: just place new div<\/em> element into your html document, somewhere between the body<\/em> tags:
\n[sourcecode language=”html”]
\n<body>
\n……
\n<div id="singleshot">
\n<\/div>
\n……
\n<\/body>
\n[\/sourcecode]
\nI have assigned this element new id and called it “singleshot”. This is where the random image and description will be injected by the jQuery call.
\n[space]<\/p>\nStyling the image:<\/h6>\n
Position and style can be adjusted in css<\/em> stylesheet which gets loaded with your page. You can find its name by viewing the page source from any browser.
\nThe link that you are looking for is in the head<\/em> sections. For example:<\/p>\nPart of the html head<\/em> section<\/span><\/p>\n[html 1=”4″ language=”highlight:”]
\n<head>
\n…..
\n<link rel="stylesheet" href="http:\/www.yoursite\/css\/style.css" type="text\/css" media="all" \/>
\n…..
\n<script type=’text\/javascript’ src=’https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.2\/jquery.min.js?ver=1.6.2′><\/script>
\n…..
\n<\/head>
\n[\/html]
\n[space]<\/p>\n
Example of css file<\/span><\/p>\n[sourcecode language=”css”]
\n#singleshot {
\n \t\tpadding:7px;
\n \t\tbackground-color: rgb(80,80,80);
\n \t\t-moz-border-radius: 5px;
\n \t\t-webkit-border-radius: 5px;
\n \t border-radius: 5px;
\n \tmargin-bottom: 60px;
\n \twidth:665px;
\n \theight: 499px;
\n }
\n#singleshot p {
\n\t background: rgba(90,90,90,0.3);
\n\t color: rgb(20,20,20);
\n\t position: relative;
\n\t top: -500px;
\n\t margin: 0 0 0 0 ;
\n\t padding: 5px 0 5px 0;
\n\t text-align: center;
\n\t font-family: Arial, Helvetica;
\n\t font-size: 2.2em;
\n\t font-weight: bold;
\n }
\n[\/sourcecode]
\nI have assigned this element new id called “singleshot”. This is where the image and description will be injected by jQuery call.
\n[space]<\/p>\n
jQuery code:<\/h6>\n
First, we need to include jQuery library into our page. To accomplish this, include its source into the head<\/em> section as shown above (part of the html section, line 5). The latest (Aug 2012) source is always at: Google Ajax API CDN<\/a>.
\nCheck for the most recent version at: jQuery main web site <\/a>.
\nEnter the following script into the html<\/em> body, just before the “singleshot” div<\/em> element at line 3 above (Editing html page).
\n[space]
\n[js]
\n<script type="text\/javascript">
\n jQuery.getJSON(‘http:\/\/www.yoursite.com\/..\/images_rand\/images.json’, function(data) { \/\/Ajax call
\n var item = data.images[Math.floor(Math.random()*data.images.length)]; \/\/select image at random
\n \/\/build the complete <img> tag
\n jQuery(‘<img src="http:\/\/yoursite.com\/..\/images_rand\/’ + item.url + ‘ " width="665px" height="499px">’).appendTo(‘#singleshot’);
\n jQuery(‘<p>’ + item.title + ‘<\/p>’).appendTo(‘#singleshot’); \/\/attach "title" to separate <p> tag
\n});
\n<\/script>
\n[\/js]
\n[space]
\n[warning]Since I was adapting this script for a WordPress template, I use jQuery instead of $ sign in the front of jQuery statements (else the script won’t work in WordPress).[\/warning]
\nThe script starts with Ajax call to images.json<\/em> file located on your server. Data is read into an array and random entry is assigned to a variable item<\/em>. In the next step, the complete img<\/em> tag is built by adding the image file name (url) and image dimensions, which are constant for the web page. Once done, the img<\/em> tag is appended to #singleshot<\/em> id in the empty div<\/em> element. The last step of our script grabs the title<\/em> and places it into a separate p<\/em> tag.
\nThat’s all. Change the path to your images.json file and image dimensions to fit your page.
\n[space]
\nFinal result is at the lower part of my Photography web site<\/a>.
\n[space]<\/p>\n\n
\nI often check integrity of JSON file at: Jsonlint<\/a>.
\n[space] <\/p>\n
Example of JSON file – images.json<\/span><\/p>\n [space]<\/p>\n [sourcecode language=”js”] This is a very simple step: just place new div<\/em> element into your html document, somewhere between the body<\/em> tags: Position and style can be adjusted in css<\/em> stylesheet which gets loaded with your page. You can find its name by viewing the page source from any browser. Part of the html head<\/em> section<\/span><\/p>\n [html 1=”4″ language=”highlight:”] Example of css file<\/span><\/p>\n [sourcecode language=”css”] First, we need to include jQuery library into our page. To accomplish this, include its source into the head<\/em> section as shown above (part of the html section, line 5). The latest (Aug 2012) source is always at: Google Ajax API CDN<\/a>.
\n\/\/ Building jason list
\n{"images":[
\n{
\n\t"title": "Sunset at the Horshoe Bend, AZ",
\n\t"url": "1.jpg"
\n\t },
\n\t {
\n\t"title": "Kauai Highlands",
\n\t"url": "2.jpg"
\n\t },
\n\t {
\n\t"title": "Storm is coming",
\n\t"url": "3.jpg"
\n\t },
\n\t {
\n\t"title": "Venice – Grand Canal view from the Rialto Bridge",
\n\t"url": "4.jpg"
\n\t },
\n\t {
\n\t"title": "Mexican wolf",
\n\t"url": "5.jpg"
\n\t }
\n\t ]
\n}
\n[\/sourcecode]
\n[space]
\nNext, save the above code as images.json and create a new directory on your web server where all images and the just saved .json file will be located. I have chosen images_rand<\/em> to distinguish it from common web-site images. For example, if your web site is at www.yoursite.com, new directory would go to: www.yoursite.com\/images_rand. Again, this is where both images and the above images.json file would go.
\n[space]<\/p>\nEditing html page:<\/h6>\n
\n[sourcecode language=”html”]
\n<body>
\n……
\n<div id="singleshot">
\n<\/div>
\n……
\n<\/body>
\n[\/sourcecode]
\nI have assigned this element new id and called it “singleshot”. This is where the random image and description will be injected by the jQuery call.
\n[space]<\/p>\nStyling the image:<\/h6>\n
\nThe link that you are looking for is in the head<\/em> sections. For example:<\/p>\n
\n<head>
\n…..
\n<link rel="stylesheet" href="http:\/www.yoursite\/css\/style.css" type="text\/css" media="all" \/>
\n…..
\n<script type=’text\/javascript’ src=’https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.2\/jquery.min.js?ver=1.6.2′><\/script>
\n…..
\n<\/head>
\n[\/html]
\n[space]<\/p>\n
\n#singleshot {
\n \t\tpadding:7px;
\n \t\tbackground-color: rgb(80,80,80);
\n \t\t-moz-border-radius: 5px;
\n \t\t-webkit-border-radius: 5px;
\n \t border-radius: 5px;
\n \tmargin-bottom: 60px;
\n \twidth:665px;
\n \theight: 499px;
\n }
\n#singleshot p {
\n\t background: rgba(90,90,90,0.3);
\n\t color: rgb(20,20,20);
\n\t position: relative;
\n\t top: -500px;
\n\t margin: 0 0 0 0 ;
\n\t padding: 5px 0 5px 0;
\n\t text-align: center;
\n\t font-family: Arial, Helvetica;
\n\t font-size: 2.2em;
\n\t font-weight: bold;
\n }
\n[\/sourcecode]
\nI have assigned this element new id called “singleshot”. This is where the image and description will be injected by jQuery call.
\n[space]<\/p>\njQuery code:<\/h6>\n
\nCheck for the most recent version at: jQuery main web site <\/a>.
\nEnter the following script into the html<\/em> body, just before the “singleshot” div<\/em> element at line 3 above (Editing html page).
\n[space]
\n[js]
\n<script type="text\/javascript">
\n jQuery.getJSON(‘http:\/\/www.yoursite.com\/..\/images_rand\/images.json’, function(data) { \/\/Ajax call
\n var item = data.images[Math.floor(Math.random()*data.images.length)]; \/\/select image at random
\n \/\/build the complete <img> tag
\n jQuery(‘<img src="http:\/\/yoursite.com\/..\/images_rand\/’ + item.url + ‘ " width="665px" height="499px">’).appendTo(‘#singleshot’);
\n jQuery(‘<p>’ + item.title + ‘<\/p>’).appendTo(‘#singleshot’); \/\/attach "title" to separate <p> tag
\n});
\n<\/script>
\n[\/js]
\n[space]
\n[warning]Since I was adapting this script for a WordPress template, I use jQuery instead of $ sign in the front of jQuery statements (else the script won’t work in WordPress).[\/warning]
\nThe script starts with Ajax call to images.json<\/em> file located on your server. Data is read into an array and random entry is assigned to a variable item<\/em>. In the next step, the complete img<\/em> tag is built by adding the image file name (url) and image dimensions, which are constant for the web page. Once done, the img<\/em> tag is appended to #singleshot<\/em> id in the empty div<\/em> element. The last step of our script grabs the title<\/em> and places it into a separate p<\/em> tag.
\nThat’s all. Change the path to your images.json file and image dimensions to fit your page.
\n[space]
\nFinal result is at the lower part of my Photography web site<\/a>.
\n[space]<\/p>\n
![\"\"](\"http:\/\/www.marcelpatek.com\/blog\/wp-content\/uploads\/2012\/08\/blog_ajax.png\" "\\"Example")
<\/a>