How do perform this code in actinic?

[shaloy]

The following piece fo code generates a enlarged view of the image when clicked .It does not open up the image in a pop window and allows to view when enlarged.

How could get this working in Actinic version 8?Also i am aware of the extended info page which generates a pop-up page ,but i do not want to have that.

Could any one please help me?

Many Thanks
shankar

<!-- InstanceBeginRepeat name="productsthumbnailpic" --><!-- InstanceBeginRepeatEntry --><div>
<div class="prodsimg"><!-- InstanceBeginEditable name="thumbnail" -->
<a id="thumb1" href="mainimages/ikon/ikon.jpg" class="highslide" onClick="return hs.expand(this)">
<img src="mainimages/ikon/ikon.jpg" alt="Ikon Spindle"
title="Click to enlarge" height="50" width="50" /></a>
<div class='highslide-caption' id='caption-for-thumb1'>Ikon</div>

[jont]

Assuming the code works you will need to replace the image file name with the Actinic product image code - typically <actinic:variable name="ProductImageFileName" /> .. you will also need to automate the larger view file somehow - possibly using the thumbnail field to populate the large image.

[shaloy]

could you please tell me how to modify the code ?

Hi thaks for the help ,
below is piece of code that has been given in the advanced guide that tells me to add athumbnail to the image .i have looked into the code and included a varibale called class called highg slide ,but this does not seem to work?

is this right or how should this be modified??

Thanks
shankar

 <actinic:block if="%28%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%21%3d%20%22%22%29%20AND%20%28%3cactinic%3avariable%20name%3d%22ProductThumbnailImageFileName%22%20%2f%3e%20%3d%3d%20%22%22%29" >

<img src="<actinic:variable name="ProductImageFileName" />" width="75" alt="<actinic:variable name="ProductName" class=”highslide” onclick=”return hs.expand(this)” title=”click to enlarge” />" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductThumbnailImageFileName%22%20%2f%3e%20%21%3d%20%22%22" >

<img src="<actinic:variable name="ProductThumbnailImageFileName" />" alt="<actinic:variable name="ProductName" class=”highslide” onclick=”return hs.expand(this)” title=”click to enlarge” />" />
</actinic:block>

[jont]

Not entirely sure what you are doing there but I think you are confusing yourself.

Taking your original code all that is happening is it is using 1 images and shrinking it to size 50 x 50 - this is not the best way as it will reduce the quality .. if you want to go this route simply replace the <img> tag with:

<actinic:variable name="ProductImageFileName" />

If you want to have a better quality thumbnail use

<actinic:variable name="ProductThumbnailImageFileName" />

instead of shrinking to 50 x 50px on the fly

[shaloy]

Hey sorry for the dupication of the thread ,

and yea i want to shrink the size of the image ,and when i thne perform a click on the image i want a larger view of the image.

i dont want to use the pop up page facility.i want the onclick property

thanks

[NormanRouxel]

Yoour post #1 contains 3 <div> tags but only one </div>. Best get that correct before adding any complexity.

[shaloy]

hey sry for that i have misd that but i have tried doing this but does not seem to work except for it shows me the picture with the specified height and width and the thumnail.

i am looking for the property click to enlarge which would enlarge my picture when clicked.the onclick property !

!!<<a id="thumb1" href="Corporate site additions photos\Apprentice.jpg" class="highslide" onClick="return hs.expand(this)">>!!
!!<<img src="Corporate site additions photos\Apprentice.jpg" alt="Ikon Spindle"
title="Click to enlarge" height="50" width="50" /></a> >>!!

[NormanRouxel]

I suggest you get a simple non-Actinic demo page working. Then upload it and post a link to it so we can see what you're describing.

Only then can we give suggestions as how to incorporate that into Actinic.

[shaloy]

i have attached a screen shot of what i want ,could you please have look at it and then tell me how to go about it.

Thanks

[Duncan Rounding]

Seems like you need this from Norman:

http://www.drillpine.biz/v8multiprod...tproducts.html
http://drillpine.biz/actinicstuff/index.html

[NormanRouxel]

Actually here's a very simple way of making the Product Image expandable.

Go to Design / Library Layouts / Product Image. Right-click Standard Product Image and choose Copy. Rename that copy to be Expanding Product Image. Open Expanding Product Image and replace all code there with the following:

<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="javascript: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="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
   <img src="<actinic:variable name="ProductImageFileName" />"
      border="0"
      width="50"
      style="cursor:pointer"
      onclick="if(this.width == 50){this.width=<actinic:variable name="ProductImageWidth" />;}else{this.width=50;}"
     alt="<actinic:variable name="ProductName" encoding="strip"/> - Click to change size" />
</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"
      alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
   </a>
</actinic:block>

OK out.

Now, in your Product Details / Layout / Product / Product Image Layout; select Expanding Product Image and that's that.

You can set your entire site to use this by going to Setting / Site Options / Layout / Product / Product Image Layout and selecting Expanding Product Image.

The browser will resize the product image so it'll be somewhat rough. As the icons are really the main image (scaled in the browser) they'll still add to the page load time.

[shaloy]

hey thanks very much for the help and let me just try that out and let you know

cheers
shankar

[shaloy]

hey i tried that what basically happened is that since i have subsection to the products images ,the main products have got their size increased drastically. and then on clicking the products takes me to the next detailed level of the products.

[NormanRouxel]

It works fine here. I don't understand what you're reporting. I thought you were talking about Product Images. URL of problem page please?

[shaloy]

I would like to have an enlarged picture when clicked.I am still on the process of creating a website ,so i am afraid i would not be able to provide you with the link.

this is how my site is been designed .if you could have a look at the screen shot and tell me how is it possible in actinic?

Thanks
shankar.