Forums
This topic is locked
need to load the image gallery html file into div tag of Current html file when a gallery link is cl
19 May 2009 12:59:29 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
Replies
Replied 22 May 2009 15:58:05
22 May 2009 15:58:05 Patrick Woldberg replied:
When loading a page with AJAX, the JavaScript on the page won't get executed, that's the reason your gallery won't work. There are some workarounds like parsing the scriptblocks and then use the eval function on it. An other solution is to use instead of AJAX an iframe, then the loaded html will rus as supposed.