I am using some jQuery to retrieve and parse some JSON from a third party website, so I can use images from that site to populate a gallery.
Please see the details below, and reproduced in this JSFiddle:
$(document).ready(function() {
function populateImages(path) {
$('.crush').each(function() {
$(this).html('<img src="' + path + '/>');
});
}
$.ajax({
url: 'http://tubecrush.net/wp_api/v1/posts?callback=show',
dataType: "jsonp",
type: "get",
success: function(data) {
var regex = /"/g;
var i = 0;
for (i = 0; i < 20; i++) {
var content = data.posts[i].content_display;
var part1 = content.split('src="');
var part2 = part1[1].split(regex);
var imgPath = part2[0];
console.log(imgPath);
populateImages(imgPath);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1>Result:</h1>
<div id="result">
<div class="pure-g">
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
</div>
</div>
I know the part that's retrieving the JSON query is working because it is outputting the image path I want to grab in the console. However, the last part is using the jQuery .each function to add an tag and fill it with the path I have retrieved with the AJAX, but it's not working.
Not sure what I am doing wrong.
Please note that although the second part is in its own function called populateImages, I have tried embedding that code in the loop part, and still had the same effect.
Greatly appreciated if anyone can help.
You shouldn't use each for that, it only means that you will put an image in every element for the first URL, then replace all of them with an image for the second URL and so on. You can make the populateImages function take a index where you want to place the image. Use the eq method to get a specific element:
function populateImages(index, path) {
$('.crush').eq(index).html('<img src="' + path + '"/>');
}
Call the function with the loop counter as index:
populateImages(i, imgPath);
You can easily narrow down your selection with jQuery's eq().
http://jsfiddle.net/BramVanroy/rzg64bvh/6/
$(document).ready(function () {
$.ajax({
url: 'http://tubecrush.net/wp_api/v1/posts?callback=show',
dataType: "jsonp",
type: "get",
success: function (data) {
var regex = /"/g;
var i = 0;
for (i = 0; i < 20; i++) {
var content = data.posts[i].content_display;
var part1 = content.split('src="');
var part2 = part1[1].split(regex);
var imgPath = part2[0];
console.log(imgPath);
$('.crush').eq(i).html('<img src="' + imgPath + '">');
}
}
});
});
Everytime the loop does an iteration, you are populating every .crush with the same image. This should work:
$(document).ready(function(){
var crushes = $('.crush');
$.ajax({
url:'http://tubecrush.net/wp_api/v1/posts?callback=show',
dataType:"jsonp",
type:"get",
success:function(data){
var regex = /"/g;
var i = 0, l = crushes.length;
for(i=0;i<l;i++) {
var content = data.posts[i].content_display;
var part1 = content.split('src="');
var part2 = part1[1].split(regex);
var imgPath = part2[0];
console.log(imgPath);
crushes.eq(i).html('<img src="' + imgPath + '"/>');
}
}
});
});
Related
I have several elements that were dynamically added to my web page and now I'm trying to append them to textarea, but I keep getting only the last element to show up.
I figured I need to use val() instead of append(), but with val() I only get last option that was stated.
Can someone help me out? I'm trying to include all rows in the textarea.
I've recreated my problem in a snippet bellow.
function getDetails() {
// Clear content
$("#save-content").val('');
// First headline
$("#save-content").val("First group: \n");
// Content from first group
$(".first-item .row").each(function(){
var firstGroupName = $(this).find(".name").text();
var firstGroupSurname = $(this).find(".surname").text();
$("#save-content").val(firstGroupName + " " + firstGroupSurname + "\n");
});
// Second headline
$("#save-content").val("Second group: \n");
// Content from second group
$(".second-item .row").each(function(){
var secondGroupName = $(this).find(".name").text();
var secondGroupSurname = $(this).find(".surname").text();
$("#save-content").val(secondGroupName + " " + secondGroupSurname + "\n");
});
// Third headline
$("#save-content").val("Third group: \n");
// Content from third group
$(".third-item .row").each(function(){
var thirdGroupName = $(this).find(".name").text();
var thirdGroupSurname = $(this).find(".surname").text();
$("#save-content").val(thirdGroupName + " " + thirdGroupSurname + "\n");
});
}
$('button').on('click', function() {
getDetails();
});
.row>div {
display: inline-block;
}
button {
display: block;
margin: 10px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imported-content">
<div class="first-item">
<div class="row">
<div class="name">Penelope</div>
<div class="surname">Smith</div>
</div>
<div class="row">
<div class="name">Jane</div>
<div class="surname">Dalton</div>
</div>
</div>
<div class="second-item">
<div class="row">
<div class="name">Kate</div>
<div class="surname">Davidson</div>
</div>
</div>
<div class="third-item">
<div class="row">
<div class="name">David</div>
<div class="surname">Peters</div>
</div>
<div class="row">
<div class="name">Brad</div>
<div class="surname">Lucas</div>
</div>
</div>
</div>
<button>Import</button>
<textarea id="save-content" rows="5"></textarea>
You can add the val when settings the val when you want to append.
For example:
$('#save-content').val($('#save-content').val() + yourContentHere);
I have one page listing different folder URLs. Clicking the link should trigger the code below on the second page using parameters passed from the URL from page one.
I am trying to pass Folder name parameter via URL to load the API call in custom ASPX page on SPO. The URL linking to this second page code below will have the folder details.
URL format from page one - <<<SPO_SITE>>>/teams/<<<SPO_TENANT>>>/SiteAssets/Image.aspx?Folder="<<<FOLDER_NAME>>>"
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
var requestUri = "<<<SPO_SITE>>>/teams/<<<SPO_TENANT>>>/_api/web/getfolderbyserverrelativeurl('<<<SPO_DOC_LIB>>>/<<<FOLDER>>>')/Files?$top=2000&$select=ServerRelativeUrl";
$.ajax({
url: requestUri,
type: "GET",
headers: {
"accept":"application/json; odata=verbose"
},
success: onSuccess,
});
function onSuccess(data) {
var objItems = data.d.results;
var divContent = '<div class="row" id="myList">';
for (var i = 0; i < objItems.length; i++) {
divContent += '<div class="col-md-3"><div class="card mb-4 shadow-sm"><img src="<<<SPO_SITE>>>/' + objItems[i].ServerRelativeUrl + '"><a class="stretched-link" target="_blank" href="<<<SPO_SITE>>>/' + objItems[i].ServerRelativeUrl + '"></a></div></div>';
}
$('#ImgGrid').append(divContent);
}
});
</script>
<main role="main">
<section class="pt-4 pb-4 text-center">
<div class="container">
</div>
</section>
<div class="container">
<div id="myList">
<div id="ImgGrid"></div>
</div>
</div>
</main>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
Kindly review the code and advice.
If the images is in the url like this:
https://Tenantname.sharepoint.com/sites/sitename/SPO_DOC_LIB/FOLDER
Then in getfolderbyserverrelativeurl please pass the relative url like this:
/_api/web/getfolderbyserverrelativeurl('/sites/sitename/<<<SPO_DOC_LIB>>>/<<>>')/Files?$top=2000&$select=ServerRelativeUrl
Update with completed code snippet:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
var relativeurl = "/sites/dev/Share Documents/" + GetParameterValues("Folder");
var requestUri = _spPageContextInfo.webAbsoluteUrl +"/_api/web/getfolderbyserverrelativeurl('"+relativeurl+"')/Files?$top=2000&$select=ServerRelativeUrl";
$.ajax({
url: requestUri,
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: onSuccess,
});
});
function onSuccess(data) {
var objItems = data.d.results;
console.log(objItems);
var divContent = '<div class="row" id="myList">';
for (var i = 0; i < objItems.length; i++) {
divContent += '<div class="col-md-3"><div class="card mb-4 shadow-sm"><img src="' + objItems[i].ServerRelativeUrl + '"><a class="stretched-link" target="_blank" href="' + objItems[i].ServerRelativeUrl + '"></a></div></div>';
}
$('#ImgGrid').append(divContent);
}
function GetParameterValues(param) {
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < url.length; i++) {
var urlparam = url[i].split('=');
if (urlparam[0] == param) {
return urlparam[1];
}
}
}
</script>
<main role="main">
<section class="pt-4 pb-4 text-center">
<div class="container">
</div>
</section>
<div class="container">
<div id="myList">
<div id="ImgGrid"></div>
</div>
</div>
In the code demo above, My site url is https://tenant.sharepoint.com/sites/dev/
So the relative url is using /sites/dev/Shared Documents/folder1
Update:
Get Folder querystring parameter in the url like this in the second page:
JSRequest.EnsureSetup();
var itemId = JSRequest.QueryString["Folder"];
Confused why this happened,
when I am in second page (ex: product_detail.html?id=1), then I want to click the same page but different id (ex :product_detail.html?id=5) it is not working, nothing displayed.
Here is my index.html
<script type="text/javascript" src="cordova.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<div class="item">
<img src="http://web/banner2.jpg">
</div>
<div class="item">
<img src="http://web/banner3.jpg">
</div>
<script>
$( document ).on( "pageinit", "#detailsPage", function( event ) {
var parameters = $(this).data("url").split("?")[1];
parameter = parameters.replace("id=","");
var devid=localStorage.getItem("macid");
$.getJSON('http://url_web_services/related_product.php?id='+parameter, product_detail);
});
function product_detail(data) {
var employee = data.item;
var urls="";
urls="http://url_web_services/"+employee.product_image;
var myid3="";
myid3 = localStorage.getItem("macid");
$('#product_detail').append('<a href="product_detail.html?id='+employee.product_id+'"><div class="item">');
$('#product_detail').append('<div class="xxw"><img src="http://webservice' + employee.promo_image +'"></div>');
$('#product_detail').append('<div style="background-color:#2E64FE;margin-top:15px;"><font color="#FFFFFF" face="arial" size="3">' + employee.product_name + '</font></div><br>');
$('#product_detail').append('</div></a>');
//SIMILAR PRODUCT
var idp=employee.promo_id;
$.getJSON('http://webservice/product_related.php?id='+idp, function(data) {
employees2 = data.items;
$.each(employees2, function(index, employee2) {
$('#product_similar').append('<a href="product_detail.html?id='+employee2.product_id+'"><div class="some">'+
'<div><img src="http://webservice/' + employee2.product_image +'" class="bgr"></div>'+
'<div class="four"><p style="margin-left:5px;margin-top:2px;"><font face="arial" size="2" color="black"><b>'+employee2.product_name+' ....</b></font></p></div>'+
'</div></a>');
});
});
}
</script>
here is my second page product_detail.html
<div data-role="page" id="detailsPage">
<div data-role="header" data-tap-toggle="false" data-theme='b'>
<h1 class="header-title">Detail</h1>
</div>
<div data-role="content" id="product_detail">
</div>
<br>
<div style="background-color:#3104B4;margin-top:5px;"><font color="#FFFFFF" face="arial" size="3"><center>PRODUCT SIMILAR</center></font></div>
<div id="product_similar" style="background-color:#E6E6E6;margin-top:2px;">
</div>
<div data-role="footer" data-theme="none" data-inner="true" data-border="false">
</div>
</div>
when I click one of item in product_similiar (it means reload the same page, but different ID, it displays nothing)
You can try dynamically creating page with the new values, here is an example:
<img src="http://web/banner2.jpg">
<script>
function create_page(page_id) {
var jsonUrl = 'http://url_web_services/related_product.php?id=' + page_id
var content = $('#detailsPage').html();
var newPage = '<div data-role="page" id="product_detail_id=' + page_id + '">' + content + '</div>'
$('body').append(newPage);
//initialize the new page
$.mobile.initializePage();
//navigate to the new page
$.mobile.changePage("#product_detail_id=" + page_id, "pop", false, true);
//now you can get #product_detail
$.getJSON(jsonUrl , product_detail);
}
</script>
With some adjustments it should work
This code is supposed to be looping and adding multiple divs, but it isn't working. When I click it, only one div appears. If I click again, nothing happens.
<body>
<div class="start" >
<div id = "coba">
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function () {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Thanks for your help
Your code does not work because you did not do anything with the variable "i" in the for statement. If you look at the fiddles of user2181397 & meghan Armes you will see how they added a line in the script to put it to work.
I tested the below in my IDE and it works just fine:
<body>
<div class="start" style="margin-top:50px; color:black;">
<div id = "coba">
<p>Click Me</p>
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function() {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
di.innerHTML=i;
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
SOLUTION: I figured it out. I used jQuery instead of JavaScript with a little help from zohodiscussions.com.
Ajax Google plugin: http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
**js. file:**
function form_input_classes() {
jQuery('input[type="text"]').addClass('text');
jQuery('input[type="password"]').addClass('text');
jQuery('input[type="checkbox"]').addClass('checkbox');
jQuery('input[type="radio"]').addClass('radiobutton');
jQuery('input[type="submit"]').addClass('submit');
jQuery('input[type="image"]').addClass('buttonImage');
}
function form_labelize() { jQuery(".labelize input:text").clearingInput(); }
var version = jQuery.browser.version;
if (version instanceof Object) { version = version.number(); }
function loadXMLDoc(XMLname) {
return jQuery.ajax({ async: false, url: XMLname }).responseXML;
}
xmlDoc = loadXMLDoc("demo.xml");
var M = xmlDoc.getElementsByTagName("rotatingImages");
jQuery(function () {
jQuery('script').remove()
form_input_classes();
form_labelize();
var pauseClicked = function () {
jQuery('#cycle').cycle('pause');
jQuery('#play').attr("style", "display:block");
jQuery('#pause').attr("style", "display:none");
jQuery('#pause').removeClass("active");
return false;
};
var playClicked = function () {
jQuery('#cycle').cycle('resume');
jQuery('#pause').attr("style", "display:block");
jQuery('#play').attr("style", "display:none");
jQuery('#pause').addClass("active");
return false;
};
jQuery('#play').attr("style", "display:none");
jQuery('#pause').attr("style", "display:block");
jQuery('#pause').click(pauseClicked);
jQuery('#play').click(playClicked);
jQuery("#slideNavigation a").focus(function () {
jQuery(this).blur();
});
jQuery('#cycle').cycle({
fx: 'fade',
speed: 1000,
timeout: 5000,
prev: '#prev',
next: '#next',
pager: '#hero-nav ul ',
pagerAnchorBuilder: function (idx, slide) {
return '#hero-nav li:eq(' + idx + ') a.page';
}
});
})
**HTML references:**
<div id="content" class="clearfix home">
<div id="hero">
<div id='rotator'>
<div id='cycle' class='clearfix'>
<script type="text/javascript">
jQuery(M).find('image').each(function (i, img) {
document.write("<img src='" + jQuery(img).text() + "' />");
})
</script>
</div>
</div>
<!--end-rotating-images-->
<div id="hero-cycle" class="clearfix">
<div id="hero-nav">
<ul>
<script type="text/javascript">
jQuery(M).each(function (i, item){
document.write("<li class='hero-text'>");
document.write("<div class='hero-info clearfix'>");
document.write("<a href='" +
jQuery(item).find('filePath').text() + "' target='_blank'>" +
jQuery(item).find('description').text()
+ "</a>");
document.write("</div>")
document.write("<a class='page' href='#'></a></li>")
})
</script>
</ul>
<div id="annc_controls">
<a href="#" id="play">
<img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom"/></a>
<a href="#" id="pause">
<img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom"/>
</a>
</div>
<!--<div id="slideNavigation"></div>-->
</div>
<!-- /#hero-nav -->
</div>
<!-- /#hero-cycle -->
</div>
<!-- /#hero -->
</div>
I updated my code and the rotating images are inline with the description. The only problem I have is the javascript loads first in place of a 1st image. There are only 3 images and the code displays firs then image #1 and so on. Is this a browser issue with ActiveXObject and IE 9? I'm having a similar issue with FireFox latest version. Nothing shows in this browser. Any help? –
.html file:
<head><script type="text/javascript">
<!--
function loadXMLDoc(XMLname)
//
{
var xmlDoc;
if (window.XMLHttpRequest) {
xmlDoc = new window.XMLHttpRequest();
xmlDoc.open("GET", XMLname, false);
xmlDoc.send("");
return xmlDoc.responseXML;
}
// IE 5 and IE 6
else if (ActiveXObject("Microsoft.XMLDOM")) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(XMLname);
return xmlDoc;
}
alert("Error loading document!");
return null;
}
xmlDoc = loadXMLDoc("demo.xml");
var M = xmlDoc.getElementsByTagName("rotatingImages");
//-->
</script>
</head>
<div id="hero">
<div id='rotator'>
<div id='cycle' class='clearfix'>
<script type="text/javascript">
for (i = 0; i < M.length; i++) {
document.write("<img src='" + xmlDoc.getElementsByTagName("image")[i].childNodes[0].nodeValue + "' />");
}
</script>
</div>
</div>
</div>
<!--end-rotating-images-->
<div id="hero-cycle" class="clearfix">
<div id="hero-nav">
<ul>
<script type="text/javascript">
for (i = 0; i < x.length; i++) { // Start 3 Rotating Images
document.write("<li class='hero-text'>");
document.write("<div class='hero-info clearfix'>");
var linkValue = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
var linkValue = x[i].getElementsByTagName("filePath")[0].childNodes[0].nodeValue;
document.write("<a href='" + linkValue + "' target='_blank'>");
linkValue = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
document.write(linkValue);
document.write("</a>");
// End description for Rotating Images
document.write("</div>");
document.write("<a class='page' href='#'></a></li>");
}
</script>
</ul>
<div id="annc_controls">
<a href="#" id="play">
<img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom" /></a>
<a href="#" id="pause">
<img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
XML file:
`<?xml version="1.0" encoding="utf-8"?>
<homepage>
<rotatingImages>
<item>
<image>manage/newImages/soldier-sunset.jpg</image>
<description>My Test 1</description>
<filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
</item>
<item>
<image>manage/newImages/2012-04-03-jet.jpg</image>
<description>My Test3</description>
<filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
</item>
<item>
<image>manage/newImages/sigar-brochre.jpg</image>
<description>My Test2 </description>
<filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
</item>
</rotatingImages>
</homepage>`
Since rotator and cycle elements are added dynamically, they don't exist when the page loads and the jQuery function runs. You need to delegate with .on() so that the handlers will be added when the elements are. For information on .on, see http://api.jquery.com/on/ and scroll down to the section on Direct and delegated events.
Another problem with your page is that you use the same ID each time through the for-loop. IDs have to be unique. The repeated IDs are coming from this code:
for (i = 0; i < x.length; i++) {
document.write("<div id='rotator'><div id='cycle' class='clearfix'><div class='entry clearfix'>");
Each time through the loop it adds DIVs with IDs 'rotator', 'cycle', 'hero-cycle', and 'hero-nav'.
Put the jQuery('#cycle').cycle({ … }); code into the jQuery(document).ready function.
**SOLUTION:** I figured it out. I used jQuery instead of JavaScript with a little help from zohodiscussions.com.
Ajax Google plugin: http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
**js. file:**
function form_input_classes() {
jQuery('input[type="text"]').addClass('text');
jQuery('input[type="password"]').addClass('text');
jQuery('input[type="checkbox"]').addClass('checkbox');
jQuery('input[type="radio"]').addClass('radiobutton');
jQuery('input[type="submit"]').addClass('submit');
jQuery('input[type="image"]').addClass('buttonImage');
}
function form_labelize() { jQuery(".labelize input:text").clearingInput(); }
var version = jQuery.browser.version;
if (version instanceof Object) { version = version.number(); }
function loadXMLDoc(XMLname) {
return jQuery.ajax({ async: false, url: XMLname }).responseXML;
}
xmlDoc = loadXMLDoc("demo.xml");
var M = xmlDoc.getElementsByTagName("rotatingImages");
jQuery(function () {
jQuery('script').remove()
form_input_classes();
form_labelize();
var pauseClicked = function () {
jQuery('#cycle').cycle('pause');
jQuery('#play').attr("style", "display:block");
jQuery('#pause').attr("style", "display:none");
jQuery('#pause').removeClass("active");
return false;
};
var playClicked = function () {
jQuery('#cycle').cycle('resume');
jQuery('#pause').attr("style", "display:block");
jQuery('#play').attr("style", "display:none");
jQuery('#pause').addClass("active");
return false;
};
jQuery('#play').attr("style", "display:none");
jQuery('#pause').attr("style", "display:block");
jQuery('#pause').click(pauseClicked);
jQuery('#play').click(playClicked);
jQuery("#slideNavigation a").focus(function () {
jQuery(this).blur();
});
jQuery('#cycle').cycle({
fx: 'fade',
speed: 1000,
timeout: 5000,
prev: '#prev',
next: '#next',
pager: '#hero-nav ul ',
pagerAnchorBuilder: function (idx, slide) {
return '#hero-nav li:eq(' + idx + ') a.page';
}
});
})
**HTML references:**
<div id="content" class="clearfix home">
<div id="hero">
<div id='rotator'>
<div id='cycle' class='clearfix'>
<script type="text/javascript">
jQuery(M).find('image').each(function (i, img) {
document.write("<img src='" + jQuery(img).text() + "' />");
})
</script>
</div>
</div>
<!--end-rotating-images-->
<div id="hero-cycle" class="clearfix">
<div id="hero-nav">
<ul>
<script type="text/javascript">
jQuery(M).each(function (i, item){
document.write("<li class='hero-text'>");
document.write("<div class='hero-info clearfix'>");
document.write("<a href='" +
jQuery(item).find('filePath').text() + "' target='_blank'>" +
jQuery(item).find('description').text()
+ "</a>");
document.write("</div>")
document.write("<a class='page' href='#'></a></li>")
})
</script>
</ul>
<div id="annc_controls">
<a href="#" id="play">
<img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom"/></a>
<a href="#" id="pause">
<img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom"/>
</a>
</div>
<!--<div id="slideNavigation"></div>-->
</div>
<!-- /#hero-nav -->
</div>
<!-- /#hero-cycle -->
</div>
<!-- /#hero -->
</div>