XML Gallery

203 views
Skip to first unread message

evographics

unread,
Jun 2, 2010, 2:56:14 PM6/2/10
to fancybox
Hello,
I have a problem with my custom gallery. Please someone help me!

THE SETTINGS: I want to create a gallery with fancybox plugin; I have
created a jQuery function that read a XML file, in which are stored
all images data, and it add all my images in the HTML page. The
function create a link tag with own attributes for fancybox.

THE PROBLEM: When I click on a thumb the link works right but fancybox
plugin does not work, the images appear in a new tab.

HTML CODE
***************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EvoGraphics XML Gallery</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--jQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4/jquery.min.js"></script>

<!--Fancybox-->
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.1.css"
type="text/css" media="screen">
<script type="text/javascript" src="fancybox/
jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript">
$("a:has(img)").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'zoomSpeedIn' : 500,
'zoomSpeedOut' : 500
});

</script>

<!--Function-->
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "gallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('item').each(function(){
var thumb = $(this).find('thumb').text();
var image = $(this).find('image').text();
var desc = $(this).find('desc').text();
$('<li></li>').html('<a rel="group" title="'+desc+'"
href="'+image+'"><img src="'+thumb+'" width="150" height="100"
border="0" /></a>').appendTo('#gallery');
});
}
});
});
</script>
</head>

<body>
<div id="wrapper">
<h1>EvoGraphics XML Gallery</h1>
<hr align="left" width="400" />
<ul id="gallery">

</ul>
</div><!--/wrapper-->
</body>
</html>


XML CODE
**************

<?xml version="1.0" encoding="iso-8859-1"?>

<gallery>
<item>
<thumb>images/thumbs/001.png</thumb>
<image>images/files/001.gif</image>
<desc>IMG 1</desc>
</item>

<item>
<thumb>images/thumbs/002.png</thumb>
<image>images/files/002.gif</image>
<desc>IMG 2</desc>
</item>

<item>
<thumb>images/thumbs/003.png</thumb>
<image>images/files/003.jpg</image>
<desc>IMG 3</desc>
</item>

<item>
<thumb>images/thumbs/004.jpg</thumb>
<image>images/files/004.jpg</image>
<desc>IMG 4</desc>
</item>

<item>
<thumb>images/thumbs/005.jpg</thumb>
<image>images/files/005.jpg</image>
<desc>IMG 5</desc>
</item>
</gallery>



Thank You

evographics

JFK

unread,
Jun 3, 2010, 7:12:36 PM6/3/10
to fancybox
maybe this can help
http://groups.google.com/group/fancybox/browse_thread/thread/f75a88d7dd30c071/
Reply all
Reply to author
Forward
0 new messages