Using Lightbox V4 on Section pages.

Adds a Lightbox slideshow to your products.
Post Reply
norman
Site Admin
Posts: 1238
Joined: Sat Feb 07, 2004 9:55 pm

Using Lightbox V4 on Section pages.

Post by norman » Tue Nov 08, 2016 6:13 pm

If you are only using Section page where each page shows several products, Lightbox won't display. Lightbox isn’t designed to work on such pages as they are meant to be concise. It only works on Product Pages that display a single product in more detail.

It can be tweaked to show on Section pages as follows:

Go to Design / Library / Layouts / Product Image.
Right-click Small Product Image and choose Copy. This makes a copy of that layout.
Go back to Small Product Image and double-click it to open the Edit Layout Code pane.
Replace all code there with the following:

Code: Select all

<!-- LBOX prefix V412R -->
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22LightboxImage1%22%20%2f%3e%20%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage2%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage3%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage4%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage5%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage6%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage7%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage8%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage9%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage10%22%20%2f%3e%29%20%21%3d%20%22%22" >
	<actinic:block if="%3cactinic%3avariable%20name%3d%22LightBoxProductIconsPosition%22%20%2f%3e%20%3d%3d%20%22Above%22" ><span class="lbo-ptab-icons-above"><actinic:variable name="Lightbox" value="Lightbox Image List" /></span><br></actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22LightBoxProductIconsPosition%22%20%2f%3e%20%3d%3d%20%22Left%22" ><span class="lbo-ptab-icons-left"><actinic:variable name="Lightbox" value="Lightbox Image List" /></span></p><p class="product-image set-left"></actinic:block>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e" >
   <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22">
      <a href="<actinic:variable name=ExtendedInfoPageEncoded />" target="ActPopup" onclick="return ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
   </actinic:block>
   <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
      <a href="<actinic:variable name="ExtendedInfoPageName" />">
   </actinic:block>
</actinic:block>

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%20%28%3cactinic%3avariable%20name%3d%22ProductListImageLink%22%20%2f%3e%20%3d%3d%201%29" ><a href="<actinic:variable name="ProductPageName" />#SID=<actinic:variable name="SectionID" />">
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
   <img src="<actinic:variable name="ProductImageFileName" />"
      border="0"
      width="80"
      title="<actinic:variable name="ProductName" encoding="strip"/>"
      alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
   <img src="<actinic:variable name="DefaultProductImage" />"
      border="0"
      title="<actinic:variable name="ProductName" encoding="strip"/>"
      alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e%20OR%0d%28%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22ProductListImageLink%22%20%2f%3e%20%3d%3d%201%29%29" >
   </a>
</actinic:block>

<!-- LBOX suffix V412R -->
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22LightboxImage1%22%20%2f%3e%20%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage2%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage3%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage4%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage5%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage6%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage7%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage8%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage9%22%20%2f%3e%0d        %2e%20%3cactinic%3avariable%20name%3d%22LightboxImage10%22%20%2f%3e%29%20%21%3d%20%22%22" >
	<actinic:block if="%3cactinic%3avariable%20name%3d%22LightBoxProductIconsPosition%22%20%2f%3e%20%3d%3d%20%22Below%22"><br clear="all"><br><span class="lbo-ptab-icons-below"><actinic:variable name="Lightbox" value="Lightbox Image List" /></span></actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22LightBoxProductIconsPosition%22%20%2f%3e%20%3d%3d%20%22Right%22" ></p><p class="lbo-ptab-icons-right"><actinic:variable name="Lightbox" value="Lightbox Image List" /></p></actinic:block>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
	<actinic:variable name="PinterestButtonLayout" value="Product Pin It Button Layout" />
</actinic:block>
OK out and Lightbox should now work on Section page products.
Norman

Post Reply