ttmt
1
Hi all
I’m trying to create a simple image gallery by loading images from an xml file
The xml file looks like this
<?xml version="1.0" encoding="UTF-8"?>
<images>
<img>images/01_th.jpg</img>
<img>images/02_th.jpg</img>
<img>images/03_th.jpg</img>
<img>images/04_th.jpg</img>
<img>images/05_th.jpg</img>
<img>images/06_th.jpg</img>
</images>
and here is my html/jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-family:sans-serif;font-weight:normal;}
.wrap{margin:50px;width:700px;}
/**/
button{margin:20px 0 5px 0;padding:5px;}
p{margin-bottom:10px;}
p span{color:red;}
</style>
</head>
<body>
<div class="wrap">
<button id="btn">Load IMG</button>
<div id="content">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript">
$('#btn').click(function(){
$.get('images.xml', function(data){
$('#content').empty();
$(data).find('img').each(function(){
var $image = $(this);
var html = '<div>';
html += '<src="' + $image.text() + '" />'
//html += '<p>img</p>'
//html += '<p>' + $image.text() + '</p>';
html += '</div>';
$('#content').append($(html));
})
})
})
</script>
</body>
</html>
I’m trying to create a simple list of div’s like below
<div>
<img = "images/01_th.jpg" />
</div>
<div>
<img = "images/02_th.jpg" />
</div>
$('#btn').click(function(){
$.get('images.xml', function(data){
$('#content').empty();
$(data).find('img').each(function(){
var $image = $(this);
var html = '<div>';
html += '<img src="' + $image.text() + '" />';
//html += '<p>img</p>'
//html += '<p>' + $image.text() + '</p>';
html += '</div>';
$('#content').append(html);
})
})
})
ttmt
3
Thanks for the reply whisher
I see I missed the img from the img tag.
I tried your code but it’s still not working
[I tried your code but it’s still not working]
for what ?
now if I click on the button I get this mark up
<div id="content">
<div><img src="images/01_th.jpg"></div>
<div><img src="images/02_th.jpg"></div>
<div><img src="images/03_th.jpg"></div>
<div><img src="images/04_th.jpg"></div>
<div><img src="images/05_th.jpg"></div>
<div><img src="images/06_th.jpg"></div>
</div>
and aside of not standard xhtml for the img tag (the ending / jquery use innerHTML to implement html method) there isn’t nothing wrong.
ttmt
5
If I click the button I get nothing
I no the the code isn’t standard - this is just for me to test
would you mind posting the full page because I still can’t get it to work.
It’s quite the same
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-family:sans-serif;font-weight:normal;}
.wrap{margin:50px;width:700px;}
/**/
button{margin:20px 0 5px 0;padding:5px;}
p{margin-bottom:10px;}
p span{color:red;}
</style>
</head>
<body>
<div class="wrap">
<button id="btn">Load IMG</button>
<div id="content">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript">
$('#btn').click(function(){
$.get('images.xml', function(data){
$('#content').empty();
$(data).find('img').each(function(){
var $image = $(this);
var html = '<div>';
html += '<img src="' + $image.text() + '" />';
//html += '<p>img</p>'
//html += '<p>' + $image.text() + '</p>';
html += '</div>';
$('#content').append(html);
})
})
})
</script>
</body>
</html>
logically you have to get the images in your path