Prettyphoto 改变灯箱高度和宽度答案

【问题标题】：Prettyphoto changing lightbox height and widthPrettyphoto 改变灯箱高度和宽度
【发布时间】：2012-02-22 12:43:24
【问题描述】：

我正在尝试修改单击缩略图时打开的图像框的高度和宽度，但没有成功。

这是我目前的代码

@for (int i = 0; i < Model.count; i++)
{
    <a href= "@Url.Action("GetImage", "Image", new { id = i })" rel="prettyPhoto[pp_gal]">
    <img src= "@Url.Action("GetImage", "Image", new { id = i })" alt="Image @(i+1)" width="240" height="240" /></a>
}    
<script type="text/javascript">
    $(document).ready(function () {
        $("a[rel^='prettyPhoto']").prettyPhoto({
            autoplay_slideshow: false,
            show_title: true,
            default_width: 300, //I have tried playing with these values
            default_height: 200, //I have tried playing with these values
            theme: 'pp_default',
            overlay_gallery: false,                  
            social_tools: false
        });
    });
</script>

任何帮助将不胜感激。

【问题讨论】：

标签： jquery asp.net-mvc-3 prettyphoto

【解决方案1】：

我也试过了，但同样没有运气。

也有一些作弊:)

检查PrettyPhoto.css 文件/css/prettyPhoto.css 搜索div.pp_pic_holder 并使用!important 应用所需的宽度

Ex.width: 825px !important;

干杯！！！

【讨论】：

【解决方案2】：

在jquery.prettyPhoto.js中，你应该修改以下变量：

imageWidth = v-200;  // change to -30
imageHeight = d-200; // change to -90

【讨论】：

【解决方案3】：

使用css轻松控制的简单方法

div.pp_pic_holder { width: 300px!important; }
.pp_content { width: 275px!important; }
a.pp_close { right: 60%; }
div.pp_pic_holder { left: 40%!important; }

【讨论】：

【解决方案4】：

你可以使用allow_resize: false，点击后会显示你原来的图片大小。对于缩略图图像，您需要使用 CSS 类

allow_resize: false, /* 调整大于视口的照片大小。真/假 */

试试这个。这就是我让它为我工作的方式=)

【讨论】：