Solved: Images stretching across product page

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>

Thanks

jmargel wrote:

use
int intNumberOfItems =4;
if ( x % intNumberOfItems == 0 )

then u can use more then 8 items

You could also try; /Presentation/Nop.Web/Views/Catalog/_ProductDetailsPictures.cshtml: Line 16 replace old Image Table code with below;

Please note: data-gallery="lightbox-p" is a reference to updated slimbox2 file found in codeplex Change set:73df59e95500 which is an update post NopCom v2.5. You could use rel="lightbox-p" instead or remove the hyper link altogether. Change the number 6 to the number of images to want NopCom to display before starting a new line. You could replace the number 6 with a reference to a setting string in the DB to allow you to alter it within admin.

/* CODE START */

    @if (Model.PictureModels.Count > 1)
    {  
        //If first image in collection i.e. feature image hide from thumbnail collection, but include in lighbox collection
        <a href="@Model.PictureModels.ElementAt(0).FullSizeImageUrl" data-gallery="lightbox-p" title="@Model.Name" style="visibility:hidden;"></a>

        <table style="margin-top: 10px;">
            <tr>
                @for (int i = 0; i < Model.PictureModels.Count(); i++)
                {
                    var picture = Model.PictureModels.ElementAt(i);
                    
                        if (i != 0)
                        {
                            //If NOT first image in collection i.e. feature image  
                            //Output thumbnail collection, which may be clicked to open in a lightbox collection
                            <td>
                                <a href="@picture.FullSizeImageUrl" data-gallery="lightbox-p" title="@Model.Name">
                                <img src="@picture.ImageUrl" alt="@picture.AlternateText" title="@picture.Title" /></a>
                            </td>
                        }
                    
                        //Start new row after every 6th image in collection %(modulus) NOT last image or First Image
                        if (i % 6 == 0 && i != (Model.PictureModels.Count() - 1) && i != 0)
                        {
                            @Html.Raw("</tr><tr>")
                        }
                }
            </tr>
        </table>
    }

/* CODE END */