Drujax alows that all page requests are loaded through ajax. This module is useful when you want page to page transitions without compromising on SEO.

How does it work?

Drujax uses an additional content.tpl.php file that will be loaded into your page.tpl.php. When an ajax request happens the content.tpl.php file will be loaded through a json object. It is also possible to add variables to the json object from within your template files.
On the frontend, all content links are collected with jQuery address which causes the links to be load through ajax.

Installation

  1. Download jQuery Address from http://www.asual.com/jquery/address/
  2. Add Jquery.address.min.js to /sites/all/libraries/jquery_address/
  3. Add content.tpl.php to your templates folder
  4. Cut the main contents from your page.tpl.php and copy to your content.tpl.php file
  5. Put "print $content" in your page.tpl.php where your main content used to be
  6. Enable the Drujax module

Dependencies

- libraries API

Customization

Ajax complete Handler

    <script>
        Drujax.setHandler(yourHandler);// calls yourHandler(json,path)
    </script>

Example:

    <script>
        Drujax.setHandler(function(data,path){
            $("#drujax-main").animate({marginLeft:-$(window).width()},500,function(){
                for(var i in data.content){
                 $(i).html(data.content[i]);
                }
                $(this).animate({marginLeft:0},500);
            });
        })
    </script>

Add variables to the json reponse

    <?php 
        // in your content.tpl.php
        drujax_var("key","value"); 
        ...

this json response will look like this

    {
        "title":"page title",
        "key":"value",
        "content":{
            "#drujax-main":"your content.tpl.php output"
        }
    }

Project information

Releases