Forums
This topic is locked
Need to load the image gallery html file into div tag of current html when a link is clicked
19 May 2009 12:58:04 swetha b posted:
hello,Iam using dreamweaver CS4
I need to show the image gallery file into <div id="main-content> of current html file when Gallery Link is clicked
i created the sample image gallery file as mentioned in site
http://www.coremediadesign.co.uk/web_design_tutorials/dreamweaver_tutorials/spry_image_gallery_adobe.html#top
It is fine working with the individual file
but when I use this file I can't see the images in the DIV tag
i see the messages like {ds:: imgfile} {imgname}
I Used Ajax to load the file in the DIV tag when the links are clicked
as it is doesn't reload the page
Can any one tell me how to show the images in the div tag
hope u understand my problem
here is my code of main page
<html>
<head>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container ">
<div id="content-wrapper">
<div id="secondary-content">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">About </div>
<div class="AccordionPanelContent">
<ul>
<li><a href="#" onclick="msg('about_us')" id="about_us"> About </a></li>
<li><a href="javascript:msg('index1')" id="index1"> Gallery </a></li>
<li><a href="javascript:msg('reach')" id="reach"> How to Reach</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="main-content">
<img src="abc.jpg" width="195" height="193"/>
</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>
here is my test.js file
// JavaScript Document
var xmlHttp
function msg(x)
{
var ch =x ;
if (document.getElementById(ch))
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="test.php"
url=url+"?id="+x
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("main-content").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
here is my test.php file
<!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>Untitled Document</title> </head> <body> <?php $id=$_GET['id']; $myFile = $id.".html"; $fh = fopen($myFile, 'r'); $Data = fread($fh, filesize($myFile)); fclose($fh); echo $Data; ?> </body> </html>
here is images file index1.html
<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds = new Spry.Data.XMLDataSet("/data.xml", "imageset/image", {sortOnLoad: "imgfile", sortOrderOnLoad: "ascending"});
//-->
</script>
</head>
<body>
<div id="wrap">
<div spry:detailregion="ds">
<div id="limg">
<img src="images/large/{ds::imgfile}" width="{ds::imglarwidth}" height="{ds::imglarheight}" alt="{ds::imgfile}" /></div>
</div>
<div id="cont">
<div spry:region="ds">
<table><tr id="ulthumb"><td spry:repeat="ds" spry:setrow="ds">
<img src="images/thumb/{imgfile}" width="{imgthumbwidth}" height="{imgthumbheight}" alt="{imgname}" />
</td></tr></table>
</div>
</div>
</div>
</body>
</html>
thanks
swetha