Change the url of parent window using fancybox
I have this issue in my recent project. I have gallery page using php (gallery.php) which have jquery fancybox to pop up ea开发者_开发知识库ch photo in the gallery. And I use seperate page details.php to display each photo in fancybox. (deatils.php?id=xxx)
Its all working fine but the thing is URL of the background window remain the gallery.php when user click on each photo. I wanted to change the url to (gallery.php?id=xxx) so user may share the url on facebook.
I have also got the code to show up the correct photo when id is pass into gallery page. e.g (when facebook share link back to gallery.php?id=xxx, its pop up the right details page in fancybox) but when fancybox close url remain the same.
I know this sound correct but is there anyway to mask or changes in url whenever fancybox pop-up. Please help...
You can use history.pushState() but support is not great as of writing.
The more compatible way is to use the hash, window.location.hash.
On a callback for each image, you could do...
function() {
window.location.hash = index;
}
...where index is the index of the current image.
Update Fancybox doesn't appear to have a callback for next or prev buttons, but you could hack them on. You could attach a click handler to the buttons $('#fancybox-right') and $('#fancybox-left') respectively.
Then on page load, because you already have it set up with a GET param, you could do...
var fragment = window.location.hash.substring(1);
if (fragment) {
window.location = 'details.php?id=' + fragment;
}
That way, if someone gives someone else the link http://example.com/gallery.php#4, their browser (provided they have JavaScript enabled) will take them to http://example.com/details.php?id=4.
I solved this by just refreshing the another form using some of my own trick :D so that way user won't be sharing wrong id as the url will be just www.myurl.com/gallery.php...
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<?php
$id=$_REQUEST['id'];
$postid=$_POST['postid'];
if($id!="") {
?>
<script>
$(document).ready(function () {
$('#testform').submit();
});
</script>
<?php } ?>
</head>
<body>
<?php
echo $postid;
echo "<form id='testform' name='testform' method='post' action='testpost.php'>";
echo "<input type='hidden' name='postid' value='".$id."'>";
echo "<input type='submit' value='submit'>";
echo "</form>";
?>
</body>
</html>
加载中,请稍侯......
精彩评论