Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Lightbox JS v2.0 implementation

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #31  
Old 09-08-2006, 09:34 PM
 
inebriate inebriate is offline
 

eXpert
  
Join Date: May 2006
Posts: 301
 

Default Re: Lightbox JS v2.0 implementation

i am having trouble getting this to work...i changed the thickbox_productpage to match my site layout (items have front and rear images) and have it display on the products page rather than the product page

Code:
{if $products[product].have_front ne 'N'} {include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$config.Appearance.thumbnail_width product=$products[product].product logoid=$products[product].logoid img_type='F'} {if $products[product].logoid} <div style="white-space: nowrap;padding-left:10px;"> <a href="image.php?productid={$products[product].productid}&amp;imtype=F" title="{$lng.lbl_base_image}" class="thickbox" rel="[detailed]"> <img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$lng.lbl_base_image}</a></div> <div style="white-space: nowrap;padding-left:10px;"> <a href="image.php?productid={$products[product].productid}&amp;imtype=F&amp;logoid={$products[product].logoid}&amp;only_logo=Y" title="{$lng.lbl_logo_image}" class="thickbox" rel="[detailed]"> <img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$lng.lbl_logo_image}</a></div> {/if} {/if} {if $products[product].have_rear ne 'N'} {include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$config.Appearance.thumbnail_width product=$products[product].product logoid=$products[product].logoid img_type='R'} {if $products[product].logoid} <div style="white-space: nowrap;padding-left:10px;"> <a href="image.php?productid={$products[product].productid}&amp;imtype=R" title="{$lng.lbl_base_image}" class="thickbox" rel="[detailed]"> <img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$lng.lbl_base_image}</a></div> <div style="white-space: nowrap;padding-left:10px;"> <a href="image.php?productid={$products[product].productid}&amp;imtype=R&amp;logoid={$products[product].logoid}&amp;only_logo=Y" title="{$lng.lbl_logo_image}" class="thickbox" rel="[detailed]"> <img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$lng.lbl_logo_image}</a></div> {/if} {/if}

what happens is that when i click on the link for the detailed image, the screen darkens as though its going to load it, but no detailed image is displayed nor the loading image

can anyone think of something that i missed?
__________________
x-cart pro 4.0.18
linux
www.fabric8d.com (currently undergoing construction)
Reply With Quote
  #32  
Old 09-09-2006, 11:07 AM
 
Cpt.Crashtastic Cpt.Crashtastic is offline
 

eXpert
  
Join Date: Jan 2006
Posts: 219
 

Default Re: Lightbox JS v2.0 implementation

Great got it working showing thumbs instead of image 1.

http://www.embroideredcaps.info/4021-Brushed-Heavy-Cotton-with-Sandwich-Trim-p-3.html

One thing I'd like to do is rather than it loading the detailed image and scaling it, I'dlike it toload a thumbnail from the /files/T directory. Is there a value like "image_name" I can use so instead of calling
image.php?id={$images[image].imageid}&amp;type=D
I can call
files/T/{$images[image]."image_name"

Obviously this means ensuring there are images in the T and D folders with the same name but it will help the page load faster.

Ant
__________________
Xcart 4.4.?
Xcart Next
Litecommerce with Drupal
http://www.corbywebworx.com

Custom Mods, Hosting and Support for Xcart-Next and LiteCommerce
Reply With Quote
  #33  
Old 09-09-2006, 11:21 AM
  Jayk's Avatar 
Jayk Jayk is offline
 

eXpert
  
Join Date: Nov 2003
Location: Calgary, Alberta, Canada
Posts: 333
 

Default Re: Lightbox JS v2.0 implementation

Quote:
Originally Posted by Cpt.Crashtastic
Great got it working showing thumbs instead of image 1.

http://www.embroideredcaps.info/4021-Brushed-Heavy-Cotton-with-Sandwich-Trim-p-3.html

One thing I'd like to do is rather than it loading the detailed image and scaling it, I'dlike it toload a thumbnail from the /files/T directory. Is there a value like "image_name" I can use so instead of calling
image.php?id={$images[image].imageid}&amp;type=D
I can call
files/T/{$images[image]."image_name"

Obviously this means ensuring there are images in the T and D folders with the same name but it will help the page load faster.

Ant

That would be a nice feature. My detailed images tend to be around 640 x 480 and that makes for larger size thumbnails without them being resampled.

Cheers,
Jason
__________________
X-Cart Gold 4.4.3
Blog: www.flashinthepan.ca
Reply With Quote
  #34  
Old 09-09-2006, 04:12 PM
 
carpeperdiem carpeperdiem is offline
 

X-Guru
  
Join Date: Jul 2006
Location: New York City, USA
Posts: 5,399
 

Default Re: Lightbox JS v2.0 implementation

I have been living with this mod now for 2 days and it is a home run. Fantastic.

Thank you, Goran for bringing this to us.

I have been trying to figure out how to improve this -- I want to make it so that clicking on the thumbnail image opens up the thickbox, image #1. I am REAL CLOSE to figuring this out, but I am obviously missing one (essential) concept.

So far, I have done the following:

1. enabled Detailed Product Images options (4.1 admin settings) - and then changed this code in product.tpl:
Code:
{if $active_modules.Detailed_Product_Images ne "" && $config.Detailed_Product_Images.det_image_popup eq 'Y' && $images ne '' && $js_enabled eq 'Y'} {* comment out the include for the stock popup_image.tpl *} {* {include file="modules/Detailed_Product_Images/popup_image.tpl"} *} {* then add the include for thickbox *} {include file="thickbox/thickbox_productpage.tpl" } {else} {include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"}&nbsp;{/if}

2. OK, so far so good... then I copied this code from the no longer in use, modules/Detailed_Product_Images/popup_image.tpl:
Code:
<a href="javascript: void(0);" onclick="javascript: popup_image('D', '{$product.productid}', '{$max_x}', '{$max_y}', '{$product.product|escape:"url"}');">{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"}</a>

This is the code that displays the thumbnail, and there is js to call the OLD detailed popup image.

3. I pasted this code at the top of thickbox_productpage.tpl (in its own table) -- and then removed:

Code:
<a href="javascript: void(0);" onclick="javascript: popup_image('D', '{$product.productid}', '{$max_x}', '{$max_y}', '{$product.product|escape:"url"}');"> and </a>

SO, now the thumbnail appears, but we need a way to call on thickbox.

I tried simply copying the code from later down in thickbox:

Code:
<a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"> and </a>

and insert it around:
Code:
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"}

But that only called the thickbox, but did not load the desired image.

I AM SO FREAKING CLOSE TO FIGURING THIS OUT... Anyone who actually knows what they are doing want to chime in and set me straight?

Thanks!!!!!!!!!

Jeremy
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
Reply With Quote
  #35  
Old 09-10-2006, 10:14 AM
 
Cpt.Crashtastic Cpt.Crashtastic is offline
 

eXpert
  
Join Date: Jan 2006
Posts: 219
 

Default Re: Lightbox JS v2.0 implementation

Quote:
Originally Posted by Jayk
That would be a nice feature. My detailed images tend to be around 640 x 480 and that makes for larger size thumbnails without them being resampled.

Cheers,
Jason

This is my first attempt at proper coding shoot me down if it's bad.

I added this function to /skin1/common.js

Code:
function build_thumb(images,langLabel,imgNum,imgUrl,imgTitle) { var obj = document.getElementById('thumbDiv'); if (!obj) return false; /* Clear thumbnail Div Object */ if (!images || images.length == 0) { obj.innerHTML = "nothing"; return false; } /* Build Thumbnail String */ var thumbStr = images; var imageStr = ""; var langLabelStr = langLabel; var imgNumStr = imgNum; var imgUrlStr = imgUrl; var imgTitleStr = imgTitle; /* Change Folder */ thumbStr = thumbStr.replace(/D/,"T"); imageStr = '<br /><div style="text-align:center;color:black;font-weight:bold;padding:2px;">' +langLabelStr + "&nbsp" + imgNumStr +'&nbsp;</div><br /><div style="white-space: nowrap;padding-left:10px;"><a href="' + imgUrlStr + '" title="' + imgTitle + '" class="thickbox" rel="[detailed]"><img src="'; imageStr += thumbStr; imageStr += '" width="150"/></div><br /<br />' obj.innerHTML += imageStr; }

and chopped thickbox_productpage.tpl to look like this

Code:
{if $images ne ""} <div style="white-space:nowrap;color:black;font-weight:bold;padding:2px;margin:10px 0 4px;">{$lng.lbl_detailed_images} &not;</div><br /><br /> {section name=image loop=$images} {if $images[image].avail eq "Y"} {if $images[image].tmbn_url} <div id="thumbDiv"></div><br/><br /> <script type="text/javascript" language="JavaScript 1.2"> <!-- build_thumb("{$images[image].image_path}","{$lng.lbl_image}","{math equation="value+1" value=$smarty.section.image.index}","{$images[image].tmbn_url}","{$images[image].alt|escape}"); --> </script> {else} <div style="white-space: nowrap;padding-left:10px;"><a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"><img src="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" width="135" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /></a></div><br /><br /> {/if} {/if} {/section} {/if}

It appears to be working for me.

http://www.embroideredcaps.info/4021-Brushed-Heavy-Cotton-with-Sandwich-Trim-p-3.html


Ant
__________________
Xcart 4.4.?
Xcart Next
Litecommerce with Drupal
http://www.corbywebworx.com

Custom Mods, Hosting and Support for Xcart-Next and LiteCommerce
Reply With Quote
  #36  
Old 09-10-2006, 11:09 AM
 
carpeperdiem carpeperdiem is offline
 

X-Guru
  
Join Date: Jul 2006
Location: New York City, USA
Posts: 5,399
 

Default Re: Lightbox JS v2.0 implementation

Quote:
Originally Posted by Cpt.Crashtastic
Not quite --

I'm viewing your page in Safari (and Firefox) - mac - and I see 3 artifacts:

the alt names appear as:

"Image&nbsp1 "
"Image&nbsp2"
(which means you probably left off the trailing ";" of "&nbsp;" )

Also, in thickbox, the images appear as "image 2 of 4" and "image 4 of 4" -- where are images 1 & 3?

Finally, the "quantity" pulldown in Firefox appears to be "squashed" horizontally -- and that could be attributed to the thickbox css -- scroll up a few posts.... I solved it by commenting out the "body" css code. You may have a different workaround... but just thought you should know.

What part of the code enables the click on the thumb? Thanks for your contributions!
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
Reply With Quote
  #37  
Old 09-10-2006, 12:27 PM
 
Cpt.Crashtastic Cpt.Crashtastic is offline
 

eXpert
  
Join Date: Jan 2006
Posts: 219
 

Default Re: Lightbox JS v2.0 implementation

Quote:
Originally Posted by carpeperdiem
Not quite --

I'm viewing your page in Safari (and Firefox) - mac - and I see 3 artifacts:

the alt names appear as:

"Image&nbsp1 "
"Image&nbsp2"
(which means you probably left off the trailing ";" of "&nbsp;" )

Also, in thickbox, the images appear as "image 2 of 4" and "image 4 of 4" -- where are images 1 & 3?

Finally, the "quantity" pulldown in Firefox appears to be "squashed" horizontally -- and that could be attributed to the thickbox css -- scroll up a few posts.... I solved it by commenting out the "body" css code. You may have a different workaround... but just thought you should know.

What part of the code enables the click on the thumb? Thanks for your contributions!

Correct, one missing ";" after &nbsp. Very hard to spot things in string cocantinations. I think I may have to do browser specific versions to get around the Safari and Firefox problems. Possibly something to dowith the innerHTML bit. Just tried it in Firefox on XP pro and the whole page left aligns. Odd about the image 2 of 4 bit. Will have a look when I get time.

The clickable thumb is just a HREF. the url is passed via {$images[image].tmbn_url} and assigned to imgUrlStr and joined up with the other bits.

Thanx for looking

Ant
__________________
Xcart 4.4.?
Xcart Next
Litecommerce with Drupal
http://www.corbywebworx.com

Custom Mods, Hosting and Support for Xcart-Next and LiteCommerce
Reply With Quote
  #38  
Old 09-10-2006, 12:39 PM
 
Cpt.Crashtastic Cpt.Crashtastic is offline
 

eXpert
  
Join Date: Jan 2006
Posts: 219
 

Default Re: Lightbox JS v2.0 implementation

Something I found yesterday on the forum

http://forum.x-cart.com/showthread.php?t=10116

This is well worth a look at and should be made sticky somewhere I think!

If I'd seen this on monday I'd wouldn't of gone bald trying to work out the lowest price on my catergory display page.

Very Useful!!
__________________
Xcart 4.4.?
Xcart Next
Litecommerce with Drupal
http://www.corbywebworx.com

Custom Mods, Hosting and Support for Xcart-Next and LiteCommerce
Reply With Quote
  #39  
Old 09-10-2006, 01:07 PM
 
carpeperdiem carpeperdiem is offline
 

X-Guru
  
Join Date: Jul 2006
Location: New York City, USA
Posts: 5,399
 

Default Re: Lightbox JS v2.0 implementation

Quote:
The clickable thumb is just a HREF. the url is passed via {$images[image].tmbn_url} and assigned to imgUrlStr and joined up with the other bits.

I'm good, but not that good! You lost me at: "and assigned to imgUrlStr"

IF -- my code to display the thumb is:

{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"}

Then I would want to surround it with: <a href="THE CONTENT" /></a>

I have tried all kinds of stings -- starting with the obvious.

If you wanted THIS code that displays the thumbs (variants and all) and make it clickable INTO "thickbox" -- how would you do this?

I really appreciate your feedback.

Thanks,

Jeremy
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
Reply With Quote
  #40  
Old 09-10-2006, 02:10 PM
 
inebriate inebriate is offline
 

eXpert
  
Join Date: May 2006
Posts: 301
 

Default Re: Lightbox JS v2.0 implementation

Quote:
Originally Posted by carpeperdiem
I'm good, but not that good! You lost me at: "and assigned to imgUrlStr"

IF -- my code to display the thumb is:

{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"}

Then I would want to surround it with: <a href="THE CONTENT" /></a>

I have tried all kinds of stings -- starting with the obvious.

If you wanted THIS code that displays the thumbs (variants and all) and make it clickable INTO "thickbox" -- how would you do this?

I really appreciate your feedback.

Thanks,

Jeremy

going off of memory...if you want a clickable thumbnail just move the include after the <img src.../> but keep it inside the <a href...> and </a>
__________________
x-cart pro 4.0.18
linux
www.fabric8d.com (currently undergoing construction)
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 04:07 AM.

   

 
X-Cart forums © 2001-2020