kvnmck18 Posted July 3, 2006 Share Posted July 3, 2006 This image is suppose to show what I'm trying to do. I have been trying to figure this our for way to long now... Maybe this image might help get the idea across...file.xml: <images><portrait type="blue" image="images/blue1.jpg" thumb="/images/thumbs/blue1.jpg" description="This is blue " /><portrait type="blue" image="images/blue2.jpg" thumb="/images/thumbs/blue2.jpg" description="This is also blue! " /><portrait type="yellow" image="images/yellow1.jpg" thumb="/images/thumbs/yellow1.jpg" description="This is yellow" /><portrait type="pink" image="images/pink1.jpg" thumb="/images/thumbs/pink1.jpg" description="This is a pink color" /><portrait type="pink" image="images/pink2.jpg" thumb="/images/thumbs/pink2.jpg" description="This is also a pink color" /></images> The "default" when the page is loaded should load "/images/portrait[@type]" (to view "Show All" thumbnails.When Menu is click on "Yellow" the selected should load the thumbnails of "/images/portrait[@type=yellow]..."Blue" /images/portrait[@type=blue] ...and so on...When thumbnails are clicked loads data. Example: If yellow thumbnail (thumb="/images/thumbs/yellow1.jpg") is clicked opens "image" value ("images/yellow1.jpg") on the right along with the "description" value ("This is yellow").I can get a lot of this to work in XSL when the XML loads the external XSL but then I cannot make a Javascript that will work for this function and I think that this would work a lot better in PHP (which my server supports). I seriously need some real help I'm burnt out on this, it's driving me insane. I know someone out there has to know how to do this.(It's suppose to be "Show All" not "Show Al" in the image...whoops) Link to comment Share on other sites More sharing options...
dooberry Posted July 5, 2006 Share Posted July 5, 2006 I've done something similar but not using images.If you want to change the side menu based on the top menu, you need something to refresh the page after you've re-transformed it.What I would do is put something like this into effect:Have one xml element in the image document which stores the menu selection that the user clicked (i.e. Blue, Pink, Yellow etc). <images><portrait type="blue" image="images/blue1.jpg" thumb="/images/thumbs/blue1.jpg" description="This is blue " /><portrait type="blue" image="images/blue2.jpg" thumb="/images/thumbs/blue2.jpg" description="This is also blue! " /><portrait type="yellow" image="images/yellow1.jpg" thumb="/images/thumbs/yellow1.jpg" description="This is yellow" /><portrait type="pink" image="images/pink1.jpg" thumb="/images/thumbs/pink1.jpg" description="This is a pink color" /><portrait type="pink" image="images/pink2.jpg" thumb="/images/thumbs/pink2.jpg" description="This is also a pink color" />[b]<current>*</current>[/b]</images> You can then use the content of this document in the xsl sheet by using the following xsl <input type="button" onclick="Reloadpage('pink')">Pinks</input><xsl:variable name="selection" value-of select="current" /><xsl:for-each select="/images/portrait[@type=$selection]" ><image onclick="document.getElementById(mainimage).src=this.image"><xsl:attribute name="src"><xsl:value-of select="@thumb" /></xsl:attribute><xsl:attribute name="image"><xsl:value-of select="@image" /></xsl:attribute></image><br /></xsl:for-each> Then you write script to update the html property of the div/frame that you are using: <script type="text/javascript">var xmldoc, xsldocxmldoc = new ActiveXObject("Microsoft.XMLDOM")xsldoc = new ActiveXObject("Microsoft.XMLDOM")xmldoc.load("images.xml")xmldoc.async = "false"xsldoc.load("images.xsl")xsldoc.async = "false"function Reloadpage(itemvalue){xmldoc.selectSingleNode("current").text = itemvaluexmldoc.save()document.clear()document.write(xmldoc.transformNode(xsldoc))}</script> Ok, it's really hot and I'm exhausted!!If this doesn't help the let me know and I'll see what I can do.D Link to comment Share on other sites More sharing options...
kvnmck18 Posted July 5, 2006 Author Share Posted July 5, 2006 Is it possible to just: <html><head><script type="text/javascript">var xmlDoc, xslDocfunction imagesXSML(){if (window.ActiveXObject){xmlDoc = new ActiveXObject("Microsoft.XMLDOM");xslDoc = new ActiveXObject("Microsoft.XMLDOM");xmlDoc.load("images.xml")xmlDoc.async =false;xslDoc.load("images.xsl")xslDoc.async =false;}else if (document.implementation &&document.implementation.createDocument){xmlDoc= document.implementation.createDocument("","",null);xmlDoc.load("images.xml");xslDoc= document.implementation.createDocument("","",null);xslDoc.load("images.xsl");}else{alert('Error');}}</script></head><body onload="imagesXSML()"></body></html> But then have the XML loaded with the XSL formatting? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now