Предложить сценарий лайтбокса, который работает с <img src = "script.php" />? - PullRequest
Новая
       36

Предложить сценарий лайтбокса, который работает с <img src = "script.php" />?

2 голосов
/ 24 ноября 2011

У меня есть PHP-скрипт, который динамически генерирует изображения при каждом запросе. Эти изображения не сохраняются на сервере. Для этого я использую следующий HTML

<img src="script.php?parameter1=foo&parameter2=bar" width="50" height="50" />

Это вызывает запрос к script.php; который динамически создает изображения на основе параметров и просто echo данных изображения в следующем формате: 

$img = customFunction_generate_report_image($_POST['parameter1'],$_POST['parameter2']);
header('Content-type: image/png');
echo $img;

Это работает и отображает изображение в браузере, как и ожидалось. Теперь я хочу реализовать лайтбокс, когда пользователь нажимает на изображение в браузере. изображение расширяется и отображается в лайтбоксе.

Обычно я использую Colorbox для лайтбокса, но я думаю, что он ожидается как <img src="foo.png" и, более того, он, кажется, делает дополнительный запрос к серверу.

Я хочу метод, с помощью которого существующее изображение в DOM можно использовать для лайтбокса. Любой указатель на то, как это сделать, будет оценен.

Спасибо

Ответы [ 3 ]

2 голосов
/ 24 ноября 2011

Вы можете сделать это с помощью colorbox. Если вы уже используете это в другом месте на вашем сайте, мой также придерживаться этого. И он может работать без повторного запроса к серверу изображения (при первом открытии colorbox, однако, он делает запрос на файл overlay.png). Существует возможность использовать фотографии с расширением .php, но я добился большего успеха, просто воспользовавшись опцией inline:true, которая сообщает colorbox вытянуть содержимое из того, что уже есть.

В вашем случае требуется немного больше работы. Обычно вы можете сделать это только с одним тегом, но у вас есть небольшое изображение в содержимом страницы, а затем нужно увеличить размер в модальном окне. Таким образом, вам нужен сам тег миниатюрного изображения, а также тег большего размера, который будет использовать colorbox. Но пока оба атрибута src одинаковы, не должно быть проблем с несколькими запросами. Ваш тег уменьшенного изображения будет содержать ссылку на тег colorbox image, который я сделал здесь с data-cb: 

<img src="script.php?parameter1=foo&parameter2=bar" width="50" height="50" data-cb="img1-colorbox">

И затем для содержимого colorbox (может быть где угодно на странице, так как оно не видно за пределами colorbox): 

<div class="colorboxContent"> <!-- this class is given the rule "display:none" -->
    <img id="img1-colorbox" src="script.php?parameter1=foo&parameter2=bar">
</div>

Если вам нужен html для работы с изображением, вам нужно только обернуть этот тег <img> в <div> и переместить идентификатор в эту оболочку. И JS для colorbox: 

$(document).ready(function() {
    $("[data-cb]").colorbox({
        inline:true, 
        href:function() { return "#" + $(this).data("cb") }
    });
});
1 голос
/ 24 ноября 2011

Я всегда находил FancyBox действительно хорошим лайтбоксом, с хорошими документами тоже.

Он отлично справится с вашей ситуацией.

0 голосов
/ 24 ноября 2011

FancyBox имеет режим iframe, который может принимать изображения, страницы (htm, тоже должен быть php) и даже PDF.

http://fancybox.net

...