If you have multiple images, they scroll across the page, I made a temporary fix that will put them in rows of four. Just edit the /Views/Catalog/_ProductDetailsPictures.cshtml. Replace all of the code with this:
@model Nop.Web.Models.Catalog.ProductModel
@{
Html.AddScriptParts(@Url.Content("~/Scripts/slimbox2.js"));
}
<div class="picture">
@if (Model.DefaultPictureZoomEnabled)
{
<a href="@Model.DefaultPictureModel.FullSizeImageUrl" rel="lightbox-pd" title="@Model.Name">
<img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" style="border-width: 0px;" />
</a>
}
else
{
<img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" style="border-width: 0px;" />
}
@{ var x = 1; }
@if (Model.PictureModels.Count > 1)
{
<table style="margin-top: 10px;">
@foreach (var picture in Model.PictureModels)
{
if ((x==1) || (x==5))
{
<text><tr></text>
}
if (x==5)
{
x=1;
}
<td align="left">
<a href="@picture.FullSizeImageUrl" rel="lightbox-p" title="@Model.Name">
<img src="@picture.ImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
</a>
</td>
x=x+1;
}
</table>
}
</div>