load content via hashchange + jquery based on file name not in hash

Question

I am using jquery + the hashchange plugin from ben alman. Below is a standard way to grab the hash name and load in content

$(window).hashchange(function() {
var hash = location.hash;
var array_url = hash.split('#');
var page = $(array_url).last()[0];
$('#content').load( page + '.php', function(){
});
});

But is there any way to do this by grabbing some other variable assigned on a click function or sorted through php, perhaps?

I am working with a multi-artist portfolio site that hands out unique three-four letter codes to images

I'd like to serve these images up through unique urls. This has to be through ajax for many reasons.

I had difficulty adding other ajax history options because this page is already using ajax pagination (to load this content) and lots of htaccess url modrewrites.

I am thinking this might just be impossible.

Here is my current code

$('a.photo').click(function () {
    var url = $(this).attr('href'),
    image = new Image();
    image.src = url;
    var clickedLink = $(this).attr('id');
    location.hash = clickedLink;
    image.onload = function () {
         $('#content').empty().append(image);
    };
    image.onerror = function () {
       $('#content').empty().html('That image is not available.');
    }
    $('#content').empty().html('Loading...');
    return false;
});

$(window).hashchange( function(){
    var hash = location.hash;
    var url = ( hash.replace( /^#/, '' ) || 'blank' );
    document.title = url;
})

$(window).hashchange();

and my html / php :

$thethumb = customuniqueidfunc();

<a href="[IMG URL]" 
class="photo gotdesc nohover" rel="<?php echo $row['description'] ?>" 
id="<?php echo $thethumb; ?>">

This works insofar as the image from the href attr loads into the #content div and the hash from the id attr is added as a hash to the url and to the title of the page, but I am lacking any mechanism to combine the click and the hashchange function, so that each hash actually corresponds to the image.

Answer 1

One method I've used for this before is to run a hash polling function. You can see it in action at this page:

http://www.webskethio.com/#services

Here is the javascript for that page:

http://www.webskethio.com/ws.js

Relevant code:

function pollHash() {

    //exit function if hash hasn't changed since last check
    if (window.location.hash==recentHash) {
        return; 
    }
    //hash has changed, update recentHash for future checks 
    recentHash = window.location.hash;

    //run AJAX to update page using page identfier from hash 
    initializeFromUrl(recentHash.substr(1));

}

$(document).ready(function(){

    /* code removed for readability */ 

    setInterval('pollHash()',100); // Important piece

    /* code removed for readability */


});

and

//AJAX function to update page if hash changes
function initializeFromUrl(fromLink) {

    /* code removed for readability */


    //take hash from function call or from the URL if not
    input = fromLink || window.location.hash ;

    //remove # from hash
    output = input.replace("#","");



    //get the URL of the AJAX content for new page
    pageId = output;






var url = $(this).attr('href'),
image = new Image();
image.src = url;
var clickedLink = $(this).attr('id');
location.hash = clickedLink;
image.onload = function () {
     $('#content').empty().append(image);
};
image.onerror = function () {
   $('#content').empty().html('That image is not available.');
}
$('#content').empty().html('Loading...');       




}

[EDIT :] Here is the full code for your page that should work, provided you can create a page that just outputs the image's location from the database.

var recentHash = "";
var image_url ="";

$(document).ready(function() {

    $('a.photo').click(function (event) {
        var clickedLink = $(this).attr('id');
        location.hash = clickedLink;

        event.preventDefault();
    });


    setInterval('pollHash()',100);

});

function pollHash() {

    //exit function if hash hasn't changed since last check
    if (window.location.hash==recentHash) {
        return; 
    }
    //hash has changed, update recentHash for future checks 
    recentHash = window.location.hash;

    //run AJAX to update page using page identfier from hash 
    initializeFromUrl(recentHash.substr(1));

}


//AJAX function to update page if hash changes
function initializeFromUrl(fromLink) {

    /* code removed for readability */


    //take hash from function call or from the URL if not
    input = fromLink || window.location.hash ;

    //remove # from hash
    output = input.replace("#","");



    //get the URL of the AJAX content for new page
    pageId = output;
    if(pageId != ""){
        var temp_url = 'http://whitecu.be/user/mountain/'+pageId+'.html';
        $.get(temp_url, function(data) {

            image_url = data;
            image = new Image();
            image.src = image_url;

            image.onload = function () {
                $('#content').empty().append(image);
            };
            image.onerror = function () {
                $('#content').empty().html('That image is not available.');
            }
            $('#content').empty().html('Loading...');       

        });



    }else{

        window.location = "http://whitecu.be/user/mountain";

    }

}