Forums

This topic is locked

Need to load the image gallery html file into div tag of current html when a link is clicked

Posted 19 May 2009 12:58:04
1
has voted
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

Reply to this topic