Zmena URL adresy bez reloadu stránky

Prezeráte si obrázok, chcete ho niekomu poslať no po skopírovaní URL adresy sa príjemcovi aj tak zobrazí prvý obrázok. Nevýhoda slideshow galérií typu lightbox alebo mnou použitou jGallery v tejto stránke. Začal som teda pátrať ako by sa dala URL adresa zmeniť bez refreshu.

Po dlhom hľadaní po fórach som našiel niečo čo mi vráti aktuálne použitý anchor, ak neviete čo to je, je to adresa v tvare http://www.example.com/#top čo znamená, že top stránky sa presunie k príslušnej značke. Viac o anchore si prečítajte na http://www.w3schools.com/tags/att_a_name.asp

K samotnému zápisu toho čo nám vráti ten anchor v javascripte:

window.location.hash

Rovnako ako nám vie aktuálny anchor vrátiť, vie nám ho aj zmeniť. Jednoduchým priradením zmeníme jeho hodnotu:

window.location.hash='Hello'

Túto vlastnosť som využil aj v mojej galérii. jGallery má tú výhodu, že viete nastaviť, na ktorom indexe sa obrázok ako prvý zobrazí. Do tejto vlastnosti som vložil to čo som získal predchádzajúcim. Návratovou hodnotou je ale string, navyše aj s #, ktorú musíme odstrániť a prevedieme na celé číslo.

var hash = window.location.hash;
var startIndex = parseInt(hash.replace("#", ""));

Premennú ešte uložíme do vlastnoti, ktorá určuje, ktorý obrázok sa zobrazí ako prvý. jGallery má callback afterImageVisible, ktorá je volaná pri každom zobrazení nového obrázka. V objekte location a do jeho premennej hash uložím aktuálny index obrázku, ktorý získam nad aktuálnym objektom galérie z vlastnosti current_index.

    var galleries = $('.ad-gallery').adGallery({
        start_at_index: startIndex,
        callbacks:{
            afterImageVisible:function(){
                window.location.hash = this.current_index;
            }
        }
    });

Takto jednoducho môžem meniť url aktuálneho obrázku bez refreshu :)

PS: Ak by ste vedeli o lepšom spôsobe, napríklad ako zmeniť tzv. query string bez refreshu napíšte mi.