Как я могу сделать ссылку на определенное изображение в слайд-шоу лайтбокса?

Question

Я думаю, что я могу быть здесь над головой ...

Я использую пользовательский тип поста WP и вложения вместе с FancyBox для создания слайд-шоу / галереи.Ничего особенного, я не думаю.Вы можете увидеть это здесь: http://photo.convoke.info/galleries/test-gallery/

Кроме того, я хочу иметь возможность ссылки на определенное изображение.Итак, в этой галерее есть два изображения.Я хотел бы иметь возможность дать кому-то ссылку типа http://photo.convoke.info/galleries/test-gallery#1 и открыть ее на странице галереи, когда первое изображение уже открыто в лайтбоксе.# 2 для второго изображения и т. Д.

Возможно ли это?

Это не обязательно должен быть # 1 ... может быть любой вид идентификатора.Я довольно сентиментален в javascript / jQuery, поэтому, пожалуйста, прости меня ... Я попытался поискать, но ничего не нашел.

Спасибо!

Answer 1

Вы можете раздать URL со строкой запроса, чтобы выполнить это достаточно легко.

http://photo.convoke.info/galleries/test-gallery?fancybox=1

Затем используйте что-то вроде кода, найденного здесь ( credit ):

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

Вы можете легко проверить / сделать что-нибудь, если это значение существует.В вашем $(document).ready() проверьте значение и, если оно существует, запустите метод $.fancybox.jumpto( [index] ).

Вы можете расширить / сделать это настолько сложным, насколько захотите, например, если у вас было несколько галерей настранице, вы также можете включить другой ключ / значение в URL, чтобы указать, какая галерея.

http://photo.convoke.info/galleries/test-gallery?fbgallery=fanexpo&fbphoto=1

Answer 2

Вам нужно сделать две вещи с чистым JS или JQuery.

1) когда вы щелкаете изображение, установите для window.location.hash желаемое значение. (или используйте плагин истории Jquery, или используйте объект истории html5, выбирайте сами). Это поместит хеш в URL.

 <img onclick='setHash(this.id)' ...

где setHash - ваша функция для добавления хеша. Затем при изменении загрузки страницы / хэша вы захотите, чтобы обработчик вызывал лайтбокс с правильным изображением на основе хеша. Обычно я просто сопоставляю идентификатор своего изображения и использую его для передачи. Но, может быть, лучше сказать, как сказал созыв, внутри штуковины-фантазии.

Answer 3

Дракончик, после нескольких недель дурачения, я наконец все понял. Мне нужно было несколько функций:

 $(document).ready(function() {
               if (window.location.hash) { // if there is a hash
                       $.fancybox.open($('.fancybox'), {index : parseInt(location.hash.substring(1))});
               }
       });

Этот плохой парень проверяет хеш и открывает изображение, соответствующее указанному хешу, используя причудливую рамку ТОЛЬКО ПРИ ЗАГРУЗКЕ СТРАНИЦЫ.

function sethash(id)
{  
   top.document.location.hash = id;
}

Этот маленький парень вызван ссылками на каждое изображение в разметке галереи. Он устанавливает хэш страницы равным индексу любого изображения, на которое вы нажали.

<a onclick="sethash('$count')>Image</a>

Это не РЕАЛЬНЫЙ код, но вы поняли идею. У меня есть переменная count, которую я использую для индексации каждого изображения в галерее. Это число соответствует индексу изображения в слайд-шоу fancybox (т.е. оно начинается с 0 для первого изображения в галерее)

Это было много работы, но, наконец, она работает (почти) идеально. Последнее, что я собираюсь попробовать, это получить хэш для изменения / обновления, когда вы щелкаете по предыдущим / следующим стрелкам в fancybox. Но, честно говоря, если это не сработает, мне все равно.