Adding Dynamic Choice Images to a site using Lightbox Images

Images added to each Choice. Images displayed as scaled down icons. Main image swaps when the Choice is selected.
Post Reply
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Adding Dynamic Choice Images to a site using Lightbox Images

Post by norman »

Dynamic Choice Images and Lightbox Images can be used together.

These instructions are for adding Dynamic Choice Images to a site already using Lightbox Images.

Install Dynamic Choice Images as per its instructions.

Go to Design / Library / Layouts / Product Image / Small Product Image.
Replace the contents 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" />"
		<actinic:block if="%3cactinic%3avariable%20name%3d%22DCI%2dScrollToMainImage%22%20%2f%3e">
			data-scrollto="<actinic:variable name="DCI-ScrollToTime" selectable="false"/>"
		</actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22ShowDynamicChoices%22%20%2f%3e%20%26%26%20%28%3cactinic%3avariable%20name%3d%22RestoreMainImageOnMouseover%22%20%2f%3e%20%3d%3d%20true%29" >
			data-originalsrc=""
			onmouseover="dcirestoremain(this)"
		</actinic:block>
      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>
Go to Design / Library / Layouts / Product Image / Standard Product Image.
Replace the contents 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 style="max-width: <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%3d%3d%20%22%22%20OR%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3c%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageWidth" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageMaxWidth" /></actinic:block>px;" src="<actinic:variable name="ProductImageFileName" />"
		id="im-<Actinic:Variable Name="EncodedProductAnchor" />"
		<actinic:block if="%28%3cactinic%3avariable%20name%3d%22LightBoxResponsiveMaxScaleDown%22%20%2f%3e%20%3c%201%29%0d%26%26%0d%28%28%3cactinic%3avariable%20name%3d%22LightboxImage1%22%20%2f%3e%20%0d%20%20%20%20%20%20%20%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage2%22%20%2f%3e%0d%20%20%20%20%20%20%20%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage3%22%20%2f%3e%0d%20%20%20%20%20%20%20%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage4%22%20%2f%3e%0d%20%20%20%20%20%20%20%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage5%22%20%2f%3e%0d%20%20%20%20%20%20%20%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage6%22%20%2f%3e%0d%20%20%20%20%20%20%20%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage7%22%20%2f%3e%0d%20%20%20%20%20%20%20%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage8%22%20%2f%3e%0d%20%20%20%20%20%20%20%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage9%22%20%2f%3e%0d%20%20%20%20%20%20%20%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage10%22%20%2f%3e%29%20%21%3d%20%22%22%29" >
			data-lbpimgw="<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%3d%3d%20%22%22%20OR%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3c%3d%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageWidth" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageMaxWidth" /></actinic:block>"
			data-lbpmaxs="<actinic:variable name="LightBoxResponsiveMaxScaleDown" />"
      </actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22DCI%2dScrollToMainImage%22%20%2f%3e">
			data-scrollto="<actinic:variable name="DCI-ScrollToTime" selectable="false"/>"
		</actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22ShowDynamicChoices%22%20%2f%3e%20%26%26%20%28%3cactinic%3avariable%20name%3d%22RestoreMainImageOnMouseover%22%20%2f%3e%20%3d%3d%20true%29" >
			data-originalsrc=""
			onmouseover="dcirestoremain(this)"
		</actinic:block>
      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%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
   <img style="max-width: <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%3d%3d%20%22%22%20OR%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3c%3d%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageWidth" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageMaxWidth" /></actinic:block>px;" 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 that should be the add-ons merged.
Norman
Top
Post Reply

Return to “Dynamic Choice Images”