Jquery插件简单的Lightbox IE Bug

Question

我在我的网站上下载并安装了 Jquery 简单灯箱插件 (http://dbrekalo.github.io/simpleLightbox/)。现在我才发现，当我上传纵向图片时，IE 将图片旋转了 90°：刚刚发现IE也支持插件中的所有类。但是，如果我直接打开图片，它在 IE 中也会以 90° 角显示，但在 Chrome

中不会正确显示

有没有人遇到过这种情况？我必须在我的 Apache 服务器中更改它吗？

Answer 1

您肯定需要为 Internet Explorer 添加一些修复程序，因此请执行以下操作：

onShown: function(){
       if(isInternetExplorer){
           $('.ekko-lightbox').addClass('iefix');
       }
   }
});

但首先你要看看为什么在IE浏览器中转90度，应该有一些classIE不支持，所以我建议在IE中检查元素，将其与chrome 或它正在运行的浏览器，然后将 CSS 中的修复应用到 class 'iefix'，然后添加带有上述代码的 class。

Answer 2

我发现了，它与服务器或CSS无关。上传的图片仍然有一些 Exif 数据，图片旋转了 90°。我通过将它旋转到莱特角并从图片中删除所有 Exif 数据来修复它：

function autoRotateImage($image) {
    $orientation = $image->getImageOrientation();

    switch($orientation) {
        case imagick::ORIENTATION_BOTTOMRIGHT: 
            $image->rotateimage("#000", 180); // rotate 180 degrees
            break;

        case imagick::ORIENTATION_RIGHTTOP:
            $image->rotateimage("#000", 90); // rotate 90 degrees CW
            break;

        case imagick::ORIENTATION_LEFTBOTTOM: 
            $image->rotateimage("#000", -90); // rotate 90 degrees CCW
            break;
    }

    // Now that it's auto-rotated, make sure the EXIF data is correct in case the EXIF gets saved with the image!
    $image->setImageOrientation(imagick::ORIENTATION_TOPLEFT);
}

function fixuploadedimg($image) {
    autoRotateImage($image);//rotate and fix Exif rotation
    $image->stripImage();//remove all EXIF data

    //resize image if necessary
    $xWidth = $image->getImageWidth();
    $xHeight = $image->getImageHeight();
    if($xWidth > 1000)
    {
        $image->resizeImage(1000, ($xHeight*1000/$xWidth), imagick::FILTER_GAUSSIAN, 1); 
    }
    else if($xHeight > 1000)
    {
        $image->resizeImage(($xWidth*1000/$xHeight), 1000, imagick::FILTER_GAUSSIAN, 1); 
    }

    $image->writeImage($uploadimg_title);
}

function get_file_extension($file_name) {
    return substr(strrchr($file_name,'.'),1);
}


$img_ext_title = get_file_extension($_FILES['titelbild']['name']);
//$uploadimg_title_temp = $ordner.$foldername."/title_temp.".$img_ext_title;
$uploadimg_title = $ordner.$foldername."/title.".$img_ext_title;

if(move_uploaded_file($_FILES['titelbild']['tmp_name'], $uploadimg_title)){ 
    $img_title = new Imagick($uploadimg_title);
    fixuploadedimg($img_title);
    $img_title->clear();
    $img_title->destroy();
}
else
{
    echo "upload failed";
    exit();
}

Jquery插件简单的Lightbox IE Bug

Jquery Plugin simple Lightbox IE Bug

css

jquery

plugins