Change the url of parent window using fancybox_问答_开发者

Change the url of parent window using fancybox

开发者 https://www.devze.com 2023-02-18 23:11 出处：网络

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

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>