Изображение лайтбокса / URL ссылки

Question

В основном у меня есть немного нестандартная реализация FancyBox.По умолчанию вы должны включить ссылку на большую версию изображения, чтобы лайтбокс мог ее отобразить.Однако в моей реализации URL-адреса ссылок на изображения указывают на сценарий, а не непосредственно на файл изображения.Так, например, вместо:

<a href="mysite/images/myimage.jpg" rel="gallery">

у меня есть:

<a href="mysite/photos/view/abc123" rel="gallery"> 

Приведенный выше URL-адрес указывает на функцию:

public function actionPhotos($view)
{
    $photo=Photo::model()->find('name=:name', array(':name'=>$view));

    if(!empty($photo))
    {           
        $this->renderPartial('_photo', array('photo'=>$photo, true));
    }
}

"$ this-> renderPartial () "bit просто вызывает файл макета, который включает в себя стандартный HTML-тег для вывода.

Теперь, когда пользователь нажимает на миниатюру, вызывается вышеуказанная функция, и большое изображение отображается в Lightbox.

Теперь, если пользователь щелкнет правой кнопкой мыши на миниатюре и выберет «открыть в новой вкладке / окне», тогда изображение будет отображаться в браузере как обычно, т.е. только изображение.Я хочу изменить это так, чтобы оно отображало изображение в макете.

В приведенном выше коде я могу включить следующее и вставить его в оператор IF:

$this->render('photos', array('photo'=>$photo));

Это вызоветфайл макета "photos", который содержит макет для отображения изображения.

У меня есть для этого особое ограничение - URL-адрес изображения должен оставаться прежним, то есть никаких дополнительных переменных GET в URL-адресе.Однако, если мы можем передать переменную GET в фоновом режиме, тогда все в порядке.

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

РЕДАКТИРОВАТЬ: Чтобы продемонстрировать, что именно я пытаюсь сделать, проверьте следующее:

http://www.starnow.co.uk/KimberleyMarren

Перейдите на вкладку фотографий и наведите курсор на миниатюру - запишите URL.Нажмите на миниатюру, и она откроется в лайтбоксе.Затем щелкните правой кнопкой мыши на том же миниатюре и выберите «открыть в новой вкладке / новом окне».Вы заметите, что изображение теперь отображается в макете.Так что тот же URL-адрес используется для отображения изображения в лайтбоксе и на его собственной странице.

Способ, которым StarNow сделал это, использует некоторую сумасшедшую длинную функциональность JavaScript, которую я не слишком заинтересован в репликации.

Answer 1

Ссылка html должна указывать на макет, показывающий изображение на новой странице по умолчанию, например ::

<a href="mysite/images/show/123" rel="gallery">

Перед открытием лайтбокса добавьте строку запроса к URL, чтобы отличить ее от обычной ссылки, и загрузите макет для лайтбокса. Как только изображение будет загружено в лайтбокс, верните ссылку в исходное состояние.

$("a[rel=gallery]").fancybox({
'onStart': function (selectedArray, selectedIndex, selectedOpts) {
    var el = $(selectedArray[selectedIndex]);
    el.attr('href', el.attr('href') + '?mode=lightbox');
},
'onComplete': function (currentArray, currentIndex, currentOpts) {
    var el = $(currentArray[currentIndex]);
    el.attr('href', el.attr('href').split("?")[0]);
}
});

Затем вам нужно будет обработать следующую ссылку для возврата макета лайтбокса:

<a href="mysite/images/show/123?mode=lightbox" rel="gallery">

Answer 2

Если вам нужна та же функциональность, которую использует демонстрационный сайт, который вы разместили, то это легко сделать, но имейте в виду, что сайт НЕ использует один и тот же URL как для всплывающего окна, так и для отдельной страницы с изображениями.

Нажмите на любую миниатюру с открытой консолью Firebug, и вы заметите, что она делает запрос Ajax, чтобы получить изображение с другого URL! что является очевидным поведением.

http://www.starnow.co.uk/profile/PhotosTrackView.aspx?photo_id=2129864

Пока ссылка указывает на:

http://www.starnow.co.uk/KimberleyMarren/photos/2129864/

вы видите, что ваши ссылки должны указывать на правильное изображение страница , в случае, если JS отключил просмотр или щелчок правой кнопкой мыши (как вы упомянули) И ИСПОЛЬЗОВАНИЕ JS для отмены поведения ссылки по умолчанию (которое перенаправляет вас изображение страницы).

Так, например, у вас может быть метод, который сгенерирует ваше изображение layout / page , и его следует использовать как href; и переопределите событие click ссылки, чтобы вызвать подобный метод (используя ajax), но на этот раз он получит само изображение, чтобы использовать его в вашем лайтбоксе.

Answer 3

Вы должны иметь возможность изменить функцию JavaScript, которая генерирует HTML, с тегом <img />, чтобы связать изображение с такой страницей. Хотя, если вы пытаетесь сделать так, чтобы при выборе «Открыть изображение в новой вкладке» была открыта страница, подобная этой, то это могло бы быть невозможно (если не существует какой-то сумасшедшей реализации cookie / сеанса для чередования сценария изображения, просто передаваемого изображение и создание страницы, которая, я думаю, могла бы быть возможной). Назначить новую href для ссылки, которая будет при нажатии «Открыть ссылку в новой вкладке», вполне возможно, просто изменив функцию JavaScript.

Не могли бы вы уточнить, что именно вы пытаетесь сделать? Открыть ссылку в новой вкладке или открыть изображение в новой вкладке?

Редактировать: Похоже, что скрипт FancyBox изменяет href вашей ссылки, чтобы указывать непосредственно на изображение. Вам нужно будет найти, где в скрипте он выбирает каждый тег ссылки с rel="gallery" и заменяет href, чтобы указать на изображения; вы хотите, чтобы он не изменил href, если вы хотите оставить его, например, как «mysite / photos / view / abc123».