Prettyphoto changing lightbox height and width

Question

I am trying to modify the height and width of the image box that opens when I click on a thumbnail but have not had any success.

This is my code so far

@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>

Any help would be appreciated.

Answer 1

I tried too, but same no luck.

So did some cheating :)

Check PrettyPhoto.css file /css/prettyPhoto.css Search for div.pp_pic_holder and apply required width with !important

Ex.width: 825px !important;

Cheers!!!

Answer 2

In jquery.prettyPhoto.js, you should modify the following variables:

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

Answer 3

Simple method easily control using 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; }

Answer 4

You can use allow_resize: false, it will display your original image size after click. for thumbnail image you need to use CSS class

allow_resize: false, /* Resize the photos bigger than viewport. true/false */

try this. this is how i got it working for me =)