任何跨域Iframe的灯箱

时间:2011-01-25 20:30:16

标签: javascript jquery cross-domain lightbox

在这个主题上搜索很多但没有解决方案...... :( 在跨域环境中寻找图片的任何灯箱

提前谢谢。

1 个答案:

答案 0 :(得分:1)

我不确定你在这里问的是什么,但是如果你想要规避跨域JS限制,你总是可以在你的服务器上创建一个PHP页面(或类似的东西)来从中获取图像另一个域名并将其作为本地服务。

这是一些jQuery代码,用于更改图像对象的src属性以显示特定图片。让我们说我们想要显示图像http://www.someotherdomain.com/images/pictureofbacon.png ....

var urlStr = 'http://www.someotherdomain.com/images/pictureofbacon.png';

//encode the image's url for passing 
var url_enc = encodeURIComponent(urlStr); 

$('#imageBacon').attr(
    'src', 'http://www.yourdomain.com/getPhoto?url=' + url_enc
); //call your php page, passing to it the encode image url 

然后,在您的PHP页面中,您可以获取URL并在本地处理图像。这个PHP经过测试可以工作(需要GD2),假设你传递了一个有效的图像URL。

<强> getPhoto.php

<?php
    $url = $_REQUEST['url'];
    SendImageToBrowser ($url); 

    function SendImageToBrowser($file){
     $info = getimagesize($file);
  $final_width=$info[0];
  $final_height=$info[1];

     switch ( $info[2] ) {
       case IMAGETYPE_GIF:
         $image = imagecreatefromgif($file);
        break;
       case IMAGETYPE_JPEG:
         $image = imagecreatefromjpeg($file);
        break;
       case IMAGETYPE_PNG:
         $image = imagecreatefrompng($file);
        break;
       default:
         return false;
     }
     imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $final_width, $final_height, $width_old, $height_old);
        $mime = image_type_to_mime_type($info[2]);
        header("Content-type: $mime");
        $output = NULL;

     switch ( $info[2] ) {
       case IMAGETYPE_GIF:
         imagegif($image, $output);
       break;
       case IMAGETYPE_JPEG:
         imagejpeg($image, $output);
       break;
       case IMAGETYPE_PNG:
         imagepng($image, $output);
       break;
       default:
         return false;
     }
     return true;
 }
?>