Измените URL-адрес родительского окна с помощью fancybox

У меня есть эта проблема в моем недавнем проекте. У меня есть страница галереи с использованием php (gallery.php), у которой есть jquery fancybox для отображения каждой фотографии в галерее. И я использую отдельную страницу details.php для отображения каждой фотографии в fancybox. (deatils.php?id=xxx)

Все работает нормально, но дело в том, что URL-адрес фонового окна остается в галерее.php, когда пользователь нажимает на каждую фотографию. Я хотел изменить URL-адрес на (gallery.php?id=xxx), чтобы пользователь мог поделиться URL-адресом на Facebook.

У меня также есть код для отображения правильной фотографии, когда идентификатор передается на страницу галереи. например (когда facebook делится ссылкой обратно на Gallery.php?id=xxx, появляется всплывающая правая страница сведений в fancybox), но когда fancybox закрывает URL-адрес, он остается прежним.

Я знаю, что это звучит правильно, но есть ли возможность маскировать или изменять URL-адрес всякий раз, когда появляется всплывающее окно fancybox. Пожалуйста помоги...


php jquery fancybox
person zaw    schedule 23.03.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать history.pushState(), но поддержка на момент написания статьи невелика.

Более совместимый способ — использовать хэш window.location.hash.

При обратном вызове для каждого изображения вы можете сделать...

function() {
   window.location.hash = index;
}

...где index - индекс текущего изображения.

Обновить Похоже, у Fancybox нет обратного вызова для кнопок "Далее" или "Предыдущий", но вы мог взломать их. Вы можете прикрепить обработчик кликов к кнопкам $('#fancybox-right') и $('#fancybox-left') соответственно.

Затем при загрузке страницы, поскольку она уже настроена с параметром GET, вы можете сделать...

var fragment = window.location.hash.substring(1);

if (fragment) {
   window.location = 'details.php?id=' + fragment;
}

Таким образом, если кто-то даст кому-то ссылку http://example.com/gallery.php#4, его браузер (при условии, что у него включен JavaScript) перенаправит его на http://example.com/details.php?id=4.

person alex    schedule 23.03.2011
comment
спасибо за ответ, Алекс, не могли бы вы показать мне пример его использования, я немного новичок в js. - person zaw; 23.03.2011
comment
@zaw Пример выше. - person alex; 23.03.2011
comment
Способ #id работает, но я использую причудливую рамку внутри страницы галереи, поэтому страница с подробностями может появляться только с помощью fancybox, когда пользователь нажимает на изображение в галерее. Сам detail.php отображается как html-страница. На самом деле вы можете попробовать этот URL bigyolk.com/canon2011/gallery.php?id =62 откроется правильная страница, но при закрытии и открытии другого изображения появится правильное изображение, но URL тот же. - person zaw; 23.03.2011

arrow_upward
0
arrow_downward

Я решил это, просто обновив другую форму, используя свой собственный трюк: D, чтобы пользователь не делился неправильным идентификатором, поскольку URL-адрес будет просто 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>
person zaw    schedule 24.03.2011
comment
У вас есть XSS-дыра (или две). Попробуйте этот URL gallery.php?id="><script>alert(document.cookie)</script><img src=". - person alex; 24.03.2011