Hola amigos, resulta que quiero cargar contenido dinámico mediante jquery en un determinado div de mi web. Hasta ahí bien, el problema es que no puedo compartir las url, ni tampoco funcionan los botones de adelante/retroceso del navegador, ni el botón refrescar, ya que si lo hago, siempre vuelve al index.php.

Me gustaría implementarlo como en esta web de ejemplo, ahí la url cambia y funciona todos los controles del navegador:

http://html5.gingerhost.com/

¿Cómo podría adaptarlo a mi código jquery? Aviso que soy casi nula con javascript y jquery. A ver quien me puede echar una mano. :(

Aquí el código jquery de mi sitio:

Código :

 // Fn to allow an event to fire after all images are loaded

 $.fn.imagesLoaded = function () {

        $imgs = this.find('img[src!=""]');
        // if there's no images, just return an already resolved promise
        if (!$imgs.length) {return $.Deferred.resolve().promise();}

        // for each image, add a deferred object to the array which resolves when the image is loaded
        var dfds = [];  
        $imgs.each(function(){

            var dfd = $.Deferred();
            dfds.push(dfd);
            var img = new Image();
            img.onload = function(){dfd.resolve();}
            img.src = this.src;

        });

        // return a master promise object which will resolve when all the deferred objects have resolved
        // IE - when all the images are loaded
        return $.when.apply($,dfds);

    }

      var disc = function(div,of){

      $(div).hide();  

      $('#loading-discografia').show();

      var ajax = $.ajax({url : of, type : "GET", cache: false});

      ajax
        .done(function(response){
          Commons.sorDone(div, response);

        })
        .fail(function(){
          Commons.sorFail(div); //you didn't show a fail fn - this fn call fails
        });
      }

      Commons = {
        sorDone : function (div, response) {
          $(div).html(response).imagesLoaded().then(function(){
             FB.XFBML.parse(document.getElementById('#comentarios-disco'));
           twttr.widgets.load();
            //now that all images have loaded, hide the loading gif
            $('#loading-discografia').hide();
            //show the loaded content
            $(div).show();

          });
        },
      }


index.php:


Código :

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <title>Example</title>
    <link href="<?php $_SERVER['DOCUMENT_ROOT']?>/estilo.php" rel="stylesheet" type="text/css" />

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></script>
</head>

<body>


<div id="center">
<div id="buttons">
 <a href="#one" onClick="disc('#contenido','one.php')" >1</a>
<a href="#two" onClick="disc('#contenido','two.php')" >2</a>
<a href="#three" onClick="disc('#contenido','three.php')" >3</a>
<a href="#four" onClick="disc('#contenido','four.php')" >4</a>
<a href="#five" onClick="disc('#contenido','five.php')" >5</a>
<a href="#six" onClick="disc('#contenido','six.php')" >6</a>
<a href="#seven" onClick="disc('#contenido','seven.php')" >7</a>
</div>

<div id="contenido">

<div id="loading-discografia">
<div class="gif-cargando">
<img src="/discografia/load/progress.gif"   alt=""/>

</div>

</div>

</div>

</body>
</html>


Muchas gracias. :D