jquery mobile - json load image
Hi very much a newbie to jquery. I am wnating to load a image as part of
my directory however struggling to get an idea of images to show that in
my sub directory ie images. Can this be done or should I restart!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css"
rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css"
rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile-1.3.2.min.css"
rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.8.3.min.js"
type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js"
type="text/javascript"></script>
<body>
<!-- Glossary -->
<div data-role="page" id="glossary" data-theme="b">
<div data-role="header">
<h3>Glossary</h3>
</div>
<div data-role="content">
<ul data-role='listview' data-inset='true' data-filter="true"
id='resultsList'>
<!-- keep empty for dynamically added items -->
</ul>
</div>
</div>
<!-- display -->
<div data-role="page" id="display">
<div data-role="header">
<h3>Name Goes Here</h3>
<a data-role="button" data-rel="back" data-icon="back">Back</a>
</div>
<div data-role="content" align="center" >
<div img id="image"> image</div>
<br>
<div id="definition">def should display</div>
<br>
<div id="ph">Ph should display</div>
<br>
<div id="website">website should display</div>
</div>
<script>
var json = {
"results": [{
"bus": "bus 1",
"image": "images\IMG_5831",
"definition": "def 1",
"ph": "phone 1",
"website": "https://www.google.com.au/",
"googlemap":"google 1"
}, {
"bus": "bus 2",
"image": "image",
"definition": "bus One",
"ph": "This is the definition for bus One",
"website": "00000000000",
"googlemap":"googlemap"
}, {
"bus": "bus 3",
"image": "image",
"definition": "bus One",
"ph": "This is the definition for bus One",
"website": "00000000000",
"googlemap":"googlemap"
}],
"ok": "true"
};
var currentItem = 0;
$('#glossary').on('pageinit', function() {
$.each(json.results, function(i, bus) {
$('#resultsList').append('<li><a href="#display">' +
bus.bus +'</a></li>')
});
$('#resultsList').listview('refresh');
$('#resultsList li').click(function() {
currentItem = $(this).index();
});
});
$('#display').on('pagebeforeshow', function() {
$(this).find('[data-role=header]
.ui-title').text(json.results[currentItem].bus);
$('#image').html(json.results[currentItem].image);
$('#definition').html(json.results[currentItem].definition);
$('#ph').html(json.results[currentItem].ph);
});
</script>
</body>
</html>
No comments:
Post a Comment