This is the code I have so far, which at the moment loads the info from the xml file as desired with javascript. I've set it to loop 4 times to select 4 images, but these are obviously just the first 4 from the xml file.
Does anyone know the best way to make it randomly select 4 none repeated images from the xml file.
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","include/photoLibrary.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("photo");
for (i=0; i<4; i++)
{
document.write('<a href="');
document.write(x[i].getElementsByTagName('path')[0].childNodes[0].nodeValue);
document.write('" class="lytebox" data-lyte-options="group:vacation" data-title="');
document.write(x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue);
document.write('"><img src="');
document.write(x[i].getElementsByTagName('thumb')[0].childNodes[0].nodeValue);
document.write('" alt"');
document.write(x[i].getElementsByTagName('title')[0].childNodes[0].nodeValue);
document.write('"/></a>');
}
</script>
If it helps in any way, this is an example of the xml, you'll see there is an attribute to photo which gives it a unique id.
<gallery>
<photo id="p0001">
<title>Pergola</title>
<path>photos/Pergola.jpg</path>
<thumb>photos/thumbs/Pergola.jpg</thumb>
<description>Please write something here!</description>
<date>
<day>04</day>
<month>04</month>
<year>2006</year>
</date>
</photo>
</gallery>
I'm willing to use php as an alternate to javascript.
First things first. Try not to use document.write as this method acts inconstantly when the DOM is ready vs when it is still initializing. Its considered a bad practice.
I also recommend using functions to break down the complexity of your code and make it more readable.
You should be aware that XHR objects are not synchronous. You need to wait for the xml data to be retrieved via the readystatechange event.
Lastly you don't have to build strings of html in the browser. The DOM API allows you to create the anchor and image tags as proper nodes which can be attached to the DOM tree.
Hope that helps.
(function() {
//fetch the gallery photos
getXML('include/photoLibrary.xml', function(xml) {
var photos, pI, photo, anchor, image, anchors = [];
//pick four photos at random
photos = getRandom(makeArray(xml.getElementsByTagName('photo')), 4);
//build out each photo thumb
for(pI = 0; pI < photos.length; pI += 1) {
photo = photos[pI];
//create the anchor
anchor = document.createElement('a');
anchor.setAttribute('href', photo.getElementsByTagName('path')[0].childNodes[0].nodeValue);
anchor.setAttribute('class', 'lytebox');
anchor.setAttribute('data-lyte-options', 'group:vacation');
anchor.setAttribute('data-title', photo.getElementsByTagName('description')[0].childNodes[0].nodeValue);
//create the image
image = document.createElement('img');
image.setAttribute('src', photo.getElementsByTagName('thumb')[0].childNodes[0].nodeValue);
image.setAttribute('alt', photo.getElementsByTagName('title')[0].childNodes[0].nodeValue);
//insert the image into the anchor
anchor.appendChild(image);
//insert the anchor into the body (change this to place the anchors else were)
anchors.push(anchor);
}
//when the DOM is loaded insert each photo thumb
bind(window, 'load', function() {
var aI;
for(aI = 0; aI < anchors.length; aI += 1) {
//replace document.body with whatever container you wish to use
document.body.appendChild(anchors[aI]);
}
});
});
/**
* Fetches an xml document via HTTP method GET. Fires a callback when the xml data
* Arrives.
*/
function getXML(url, callback) {
var xhr;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if(window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else {
throw new Error('Browser does not support XML HTTP Requests.');
}
//attach the ready state hander and send the request
xhr.onreadystatechange = readyStateHandler;
xhr.open("GET","photos.xml",false);
xhr.send();
function readyStateHandler() {
//exit on all states except for 4 (complete)
if(xhr.readyState !== 4) { return; }
//fire the callback passing the response xml data
callback(xhr.responseXML);
}
}
/**
* Takes array likes (node lists and arguments objects) and converts them
* into proper arrays.
*/
function makeArray(arrayLike) {
return Array.prototype.slice.apply(arrayLike);
}
/**
* Extracts a given number of items from an array at random.
* Does not modify the orignal array.
*/
function getRandom(array, count) {
var index, randoms = [];
//clone the original array to prevent side effects
array = [].concat(array);
//pull random items until the count is satisfied
while(randoms.length < count) {
index = Math.round(Math.random() * (array.length - 1));
randoms.push(array.splice(index, 1)[0]);
}
return randoms;
}
function bind(element, eventName, callback) {
if(typeof element.addEventListener === 'function') {
return element.addEventListener(eventName, callback, false);
} else if(typeof element.attachEvent === 'function') {
return element.attachEvent('on' + eventName, callback);
}
}
})();
Edit: Fixed three errors. The DOM needs to be loaded before inserting the nodes. XML nodes don't have innerHTML property. Array.concat does not see DOM NodeList objects as Arrays.
You could just add
x = Array.prototype.slice.call(x).sort( function () {
return Math.random() > 0.5 ? 1 : -1
} );
straight after
var x = xmlDoc.getElementsByTagName("photo");
This would create a randomly ordered array of the elements, the first four of which would be iterated by the for loop.
Edit
Note that this method will not produce a properly random shuffle of an array, see Is it correct to use JavaScript Array.sort() method for shuffling?, and I do not recommend it.
In PHP this is how you parse a file:
index.php
<?php
$doc = new DOMDocument();
$doc->load( 'book.xml' );
$books = $doc->getElementsByTagName( "book" );
foreach( $books as $book )
{
$authors = $book->getElementsByTagName( "author" );
$author = $authors->item(0)->nodeValue;
$publishers = $book->getElementsByTagName( "publisher" );
$publisher = $publishers->item(0)->nodeValue;
$titles = $book->getElementsByTagName( "title" );
$title = $titles->item(0)->nodeValue;
echo "$title - $author - $publisher
";
}?>
book.xml
<books>
<book>
<author>Jack Herrington</author>
<title>PHP Hacks</title>
<publisher>O'Reilly</publisher>
</book>
<book>
<author>Jack Herrington</author>
<title>Podcasting Hacks</title>
<publisher>O'Reilly</publisher>
</book>
</books>
in php you pick random something like this
<?php
$xml_string =
'<gallery>
<photo id="p0001">
<title>t1</title>
<path>photos/Pergola.jpg</path>
</photo>
<photo id="p0002">
<title>t2</title>
<path>photos/Pergola.jpg</path>
</photo>
<photo id="p0003">
<title>t3</title>
<path>photos/Pergola.jpg</path>
</photo>
</gallery>';
$xml = simplexml_load_string($xml_string);
$arr = (array) $xml;
shuffle($arr['photo']);
for($i =0; $i < 2; $i++){
$picture = array_pop($arr['photo']);
print_r($picture);
}