NC Software wrote:I implemented this last night, I use the custom fields to save the image info, then check for it in code and add a table below the image with javascript onClick code. Not hard to do at all. You just have to know a little VB to iterate the custom fields, and I believe there is sample code on this forum already for such.
Yup that's pretty much how it works. It checks for extra image fields in the database, and generates a table with 1 to 5 boxes. This gives flexibility to have a differing number of images.
I'm not a fan of scaling images dynamically, so I store a thumbnail (100 X 100px) and a full size (350 X 350). The javascript simply switches between them.
The block of code that does the work is as follows:-
<%
'display primary thumbnail - but only if there are other images
'added dg mar 05
Dim thumbone as string = objProduct.getCustomFields().Item("Thumb1")
Dim thumbtwo as string = objProduct.getCustomFields().Item("Thumb2")
Dim thumbthree as string = objProduct.getCustomFields().Item("Thumb3")
Dim thumbfour as string = objProduct.getCustomFields().Item("Thumb4")
Dim thumbfive as string = objProduct.getCustomFields().Item("Thumb5")
If Len (thumbtwo) > 0 or Len (thumbthree) > 0 or Len (thumbfour) > 0 or Len (thumbfive) > 0 then
Response.Write( "<TR><TD align = ""center"" width = 370><font color =""CCE377""><b>CLICK BELOW FOR ADDITIONAL VIEWS</b></font></TD><TD>  </TD></TR>" )
Response.Write( "<tr><td colspan=""2""><table width = ""100%""<tbody><tr><td>" )
' can use thumbone instead of standard thumbnail to prevent image loss on scaling
If Len (thumbone) > 0 then
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.Image2 & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & thumbone & """ width=100 border=0></A></SPAN>" )
Else
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.Image2 & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & objProduct.Image1 & """ width=100 border=0></A></SPAN>" )
End If
If Len (thumbtwo) > 0 then
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.getCustomFields().Item("Picture2") & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & thumbtwo & """ width=100 border=0></A></SPAN>" )
End If
If Len (thumbthree) > 0 then
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.getCustomFields().Item("Picture3") & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & thumbthree & """ width=100 border=0></A></SPAN>" )
End If
If Len (thumbfour) > 0 then
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.getCustomFields().Item("Picture4") & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & thumbfour & """ width=100 border=0></A></SPAN>" )
End If
If Len (thumbfive) > 0 then
Response.Write( "<span class=""image_bdr""><a href=""javascript:changeImage('" & objStore.StoreURL & objProduct.getCustomFields().Item("Picture5") & "')"">" )
Response.Write( "<IMG height=100 alt="""" vspace=5 hspace=5 src=""" & thumbfive & """ width=100 border=0></A></SPAN>" )
End If
Response.Write("</TD></TR></TBODY></TABLE></TD></TR>")
Else 'put in a blank line for cosmetics
Response.Write( "<TR><TD colspan =""2""><STRONG>   </STRONG></TD></TR>" )
End If
%>
And a small javascript script needed to flip between thumbnails and large pictures.
<SCRIPT language=javascript type=text/javascript>
function changeImage(picimage) {document['mainImage'].src=picimage; }
</SCRIPT>
I think the code is pretty straight forward.
a) Check if there is a thumbnail (checks for fields Thumb1 - Thumb5).
b) If field exists, then get it and the corresponding full size picture (picture 1 - Picture 5).
Yes I could have (and probably should have) done it in a loop, but if it ain't broken, why fix it
Fields Thumb1 - Thumb5 and Picture1 - Picture5 are added as custom fields in the product admin pages. Eventually I might mod the code to generate them automatically, but for now it works fine.
Whilst you can use any names, I found it simplier to use the same filename and add suffixes.
eg.
Product.jpg full size picture (350 X 350 for me)
Product-s.jpg Thumbnail for browsing (150 X 150 in my case)
Product-T2.jpg Thumbnail 2 (100 X 100)
Product-P2.jpg Picture 2 (350 X 350)
etc
etc
Product-T5
Product-P5
Hope this helps someone, as displaying multiple images seems to get asked a lot in these forums.
Darrin
