This is a forum where members new and old can come to ask questions and get info and opinions. It is not a place to advertise your business or have other forms of advertising, whether it be in your posts or signature.

All links in the forum will not be indexed by Search Engines and any unapproved forms of advertising or spam will be dealt with accordingly, deleted, and that member's account banned.

Forums

Overview » Ajax & JavaScript » need to load the image gallery html file into div tag of Current html file when a gallery link is cl
Reply

need to load the image gallery html file into div tag of Current html file when a gallery link is cl

swetha b
Member



Since: 18 May 2009
Posts: 2
Posted 19 May 2009 12:59:29

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

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
Patrick Woldberg
Official Representative



Since: 11 Feb 2003
Posts: 1,894
Replied 22 May 2009 15:58:05
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.

Reply to this topic

Message
Reply

Live Support

On Sale

$40
$26

DMXzone Tabs

Until February 15, 2012

$53
$40

Advanced HTML Editor 3

Until February 8, 2012

$34
$21

Image Gallery Add-on

Until February 8, 2012

$40
$26

File Manager Add-on

Until February 8, 2012

Visit All Zones

The Dreamweaver ZoneThe Flash ZoneThe .NET ZoneThe Fireworks ZoneCFZone

Latest Extensions

Premium Articles

DMXzone Updater


Our Sponsors

Find Us on Facebook

Featured Extension

Extensions Yearly Subscription

Tired of purchasing many extensions just to finish up your project. Now we have a solution for you. For a small fee you have access to over 70 high-quality (all DMXzone extensions) and growing Dreamweaver extensions for a year period!

Additionally, we're working on many new ones, which will be available for every subscription holder when released!

Follow us on Facebook Follow us on twitter Subscribe to the RSS feed
Activate your free membership today | Login | Currency