In prettyphoto.js script change the code
pp_dimensions = _fitToViewport(imgPreloader.width,imgPreloader.height);
to this code -
pp_dimensions = _fitToViewport(800, 800);
Question
I have a prettyphoto implementation in my site.And my problem is that according to the size of image prettyphoto layout always changes.I would like to make it a fixed size.
I have tried making the href
of link to a specific size image.But it is not working.
The code as far as i tried
<a class="zoom" id="zoom-image" height="290" width="267" href="/images/imagehandler.ashx?path=/product-images/334.jpg" >
<img id="large-image" src="/images/imagehandler.ashx?path=/product-images/334.jpg&width=267&height=290">
</a>
Solution
In prettyphoto.js script change the code
pp_dimensions = _fitToViewport(imgPreloader.width,imgPreloader.height);
to this code -
pp_dimensions = _fitToViewport(800, 800);
OTHER TIPS
Apply the @soheil solution :
pp_dimensions = _fitToViewport(700, 550);
This fixes the width but when you navigate through the slides it appears a awful animation on the right margin, it shrinks and expand 20px for a second.
The solution is to change the _showContent function, from :
$pp_pic_holder.animate({
'top': projectedTop,
'left': ((windowWidth/2) - (pp_dimensions['containerWidth']/2) < 0) ? 0 : (windowWidth/2) - (pp_dimensions['containerWidth']/2)
,width:pp_dimensions['containerWidth']
},...
to
$pp_pic_holder.css('width', pp_dimensions['containerWidth']);
// Resize picture the holder
$pp_pic_holder.animate({
'top': projectedTop,
'left': ((windowWidth/2) - (pp_dimensions['containerWidth']/2) < 0) ? 0 : (windowWidth/2) - (pp_dimensions['containerWidth']/2)
/*,width:pp_dimensions['containerWidth']*/
This code deletes the animation on the right margin.
If you fix the width of the window you have also to manage the responsiveness. I also added these rules:
.pp_content {min-height: 400px;}
.pp_content_container .pp_details {
margin-top: 5px;
text-align: center;
position: absolute!important;/*this positions the navigation bar in the same place on the bottom*/
bottom: 10px;
}
@media all and (min-width:480px) and (max-width:700px)
{
div.pp_pic_holder {width: 80%!important;}
.pp_content {
width: 100%!important;
height: 70%!important;
}
#pp_full_res {zoom:0.8;}
.pp_content_container .pp_details {
width: 100%!important;
}
}
@media all and (max-width:480px)
{
div.pp_pic_holder {width: 80%!important;}
.pp_content {
width: 100%!important;
height: 80%!important;
}
#pp_full_res {zoom:0.7;}
.pp_content_container .pp_details {
width: 100%!important;
}
}
I hope it helps.
Try this instead
<a class="zoom" id="zoom-image" href="/images/imagehandler.ashx?path=/product-images/334.jpg">
<img height="290" width="267" id="large-image" src="/images/imagehandler.ashx?path=/product-images/334.jpg&width=267&height=290" alt="">
</a>
I moved the width and height attributes from your a link (which won't work) to the image element (I also added an alt attribute to make it 100%).
add this css in your style sheet
#large-image{ width: 267px; height: 290px}
remove height and width from tag