mixing xslt and javascript

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Fredrik Esseen 610 posts 906 karma points

Mar 24, 2010 @ 14:41

Hi!

I know this can be made but not sure of the syntax. Im trying to make Jquery Crosslide Gallery and populate it from xslt.

<xsl:variable name="images" select="number($currentPage/data [@alias = 'bildspel'])"/>

       <xsl:for-each select="umbraco.library:GetMedia($images, 'true')/node">
  <xsl:variable name="theNode" select="."/>
  <xsl:variable name="picFile" select="./data[@alias='umbracoFile']"/>
  
          <xsl:value-of select="$picFile"/>
 </xsl:for-each>


<style type="text/css"> 
  #test3 {
    margin: 1em auto;
    width: 235px;
    height: 176px;
  }
</style>

<script type="text/javascript"> 
<![CDATA[
  $(function() {
    $('#test3').crossSlide({
      fade: 1
    }, [
      {
        src:  '/media/684/uterum2.JPG',
        href: 'http://flickr.com/photos/spacetrucker/94209642/',
        from: '100% 80% 1x',
        to:   '100% 0% 1.7x',
        time: 2
      }, {
        src:  '/media/689/uterum1.JPG',
        href: 'http://flickr.com/photos/hichako/1125341449/',
        from: 'top left',
        to:   'bottom right 1.5x',
        time: 2
      }
    ]);
  });
 ]]>
</script>


<div id="test3">Loading…</div>

How can I put the For each inside the javascript?

Copy Link

Dan 1288 posts 3921 karma points c-trib

Mar 24, 2010 @ 15:12

Hi Froad,

The basic idea is that you need XSLT to loop through your media and create the looping javascript code. Then embed a macro into the middle of your javascript which will output the looping media code.

Assuming your XSLT above is correct, but that you also have the rest of your settings (flickr URL, from, to, time) within the documenttype, create an XSLT file with a macro and add this to your XSLT file:

<xsl:variable name="images" select="number($currentPage/data [@alias = 'bildspel'])"/>
<xsl:for-each select="umbraco.library:GetMedia($images, 'true')/node">
   <xsl:variable name="theNode" select="."/>
   <xsl:variable name="picFile" select="./data[@alias='umbracoFile']"/>
    <xsl:variable name="flickrURL" select="./data[@alias='flickrURL']"/>
    <xsl:variable name="fromSettings" select="./data[@alias='fromSettings']"/>
  <xsl:variable name="toSettings" select="./data[@alias='toSettings']"/>
  <xsl:variable name="timeSettings" select="./data[@alias='timeSettings']"/>
      {
         src:  '<xsl:value-of select="$picFile"/>',
          href: '<xsl:value-of select="$flickrURL"/>',
            from: '<xsl:value-of select="$fromSettings"/>',
         to:   '<xsl:value-of select="$toSettings"/>',
           time: <xsl:value-of select="$timeSettings"/>
          },
</xsl:for-each>

Then in your template, replace the looping javascript with a reference to the macro:

<script type="text/javascript"> 
<![CDATA[
  $(function() {
    $('#test3').crossSlide({
      fade: 1
    }, [
      <umbraco:Macro Alias="yourMacroAlias" runat="server"></umbraco:Macro>
    ]);
  });
 ]]>
</script>

The syntax here might need some tweaking, but it should start you off at least. Hope it helps a little...

Copy Link

Thomas Kahn 602 posts 506 karma points

Nov 12, 2010 @ 16:13
0
Hi!

I'm working on a site where I'll make quite heavy use of javascript and at the same time I will need to fetch data from Umbraco. Yes, I could create an XSLT-script that generates javascript code and put it as a macro in the template. But if the macro just prints the javascript, it would be added to the page as a page script like this:
```
<script type="text/javascript">
//My script code goes here
</script>
```
...and browsers don't cache these scripts like they do when you have them in a separate file and included on the page like this:
```
<script type="text/javascript" src="myScript.js"></script>
```
The second idea I have is to use a regular .js file and have it load data using AJAX from a resource page that I set up in Umbraco. This page would just contain an XSLT-script that generates JSON. Still it would mean an extra call to the server.

Is there a smarter way that I haven't thought of?

Regards,
Thomas Kahn
Copy Link
is working on a reply...

Please Sign in or register to post replies