Anchor navigation /like facebook

crashmaster · December 25, 2009

[using JQuery]

Hi there,

I am trying to find some plugin, which can make AJAX request's by

parsing ANCHOR value, from URL...

For example I have an ajax gallery and I want to make navigation like

this

www.example.com/gallery.php#photo=1

www.example.com/gallery.php#photo=2

www.example.com/gallery.php#photo=3

Any suggestions ?

jamesbarnhill · April 19, 2010

Hello crashmaster, did you ever find anything?

If not, try this:

a file named callbacks.php, with

<?php 
//Captures the petition and load the suitable section
$file = $_GET['section'];


if(file_exists("$file"))
   {
print("<img src=$abc></img>"); 
  }
else
  {
  die('<title>404 | YOUR_SITE_NAME</title><h1>Ooops...</h1>
<p>You hit a 404: You either have an old bookmark or took a bad link.</p>');
  }

Another file named core.js with:

//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
var currentAnchor = null;
//Function which checks to see if there are any anchor changes, if there are, it sends the ajax petition
function checkAnchor(){
//Check if it has changes
if(currentAnchor != document.location.hash){
	currentAnchor = document.location.hash;
	//if there is not anchor, the loads the default section
	if(!currentAnchor)
		query = "section=home";
	else
	{
		//Creates the  string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2
		var splits = currentAnchor.substring(1).split('&');
		//Get the section
		var section = splits[0];
		delete splits[0];
		//Create the params string
		var params = splits.join('&');
		var query = "section=" + section + params;
	}
	//Send the petition
	$.get("callbacks.php",query, function(data){
		$("#content").html(data);
	});
}
}

And of course, your index.php file, with:

<head>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="core.js"></script>
</head>
<body>
<a href="#photo.jpg">Photo1</a>
</body>

NOTE: You'll have to download jQuery, and place it in your working directory.

You can also have a link point to a file in a subdirectory, ie: #photos/photo1.png.

If you have any questions, speak up. ~James

Sign In

Anchor navigation /like facebook

Recommended Posts

crashmaster

Link to comment

Share on other sites

jamesbarnhill

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information