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
  #41  
Old 09-10-2006, 02:30 PM
 
dfawdon dfawdon is offline
 

Advanced Member
  
Join Date: Feb 2006
Location: UK
Posts: 82
 

Default Re: Lightbox JS v2.0 implementation

For clickable thubmnails, here is my thickbox_productpage.tpl

Code:
{if $images ne ""} <div style="white-space:nowrap;color:#D90000;font-weight:bold;padding:2px;margin:10px 0 4px;">{$lng.lbl_detailed_images} &not;</div> {section name=image loop=$images} {if $images[image].avail eq "Y"} {if $images[image].tmbn_url} <div style="white-space: nowrap;padding-left:10px;"><a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"><img src="{$images[image].tmbn_url}" width="75" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /></a></div> {else} <div style="white-space: nowrap;padding-left:10px;"><a href="{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"><img src="{$images[image].tmbn_url}" width="75" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /></a></div> {/if} {/if} {/section} {/if}
__________________
X-Cart Gold 4.0.17
X-AOM
Safetynet DSEFU
Easy Checkout
_________________
Reply With Quote
  #42  
Old 09-10-2006, 03: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

Quote:
Originally Posted by dfawdon
For clickable thubmnails, here is my thickbox_productpage.tpl

Dfawdon, thank you for your code, however, it does not do what I need for version 4.1 - since it totally blows out variant thumb images (let's say I have a product with 11 colors [i do] - when the customer pulls down the select color menu, the thumb changes! This is a very cool feature and causing me to lose sleep & hair.)

The code I posted before allows each variant to have its own thumb (this is right out of xcart 4.1.3) - I am satisfied with how the images are displayed, and how they appear -- I just need to be able to click on the primary thumb and have it behave as if it were the first thickbox link.

Anyone else?

Thanks!

Jeremy
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
Reply With Quote
  #43  
Old 09-11-2006, 10:16 AM
 
chastie chastie is offline
 

Member
  
Join Date: May 2006
Posts: 17
 

Default Re: Lightbox JS v2.0 implementation

What a GREAT mod! ANybody have any idea why it's not working for me though? I did exactly what the instructions said to no and no-go - the loading animation keeps twilrling....

I am using 4.0.18 - any ideas as to what I could be doing wrong?

http://www.homegrownmarket.com/product.php?productid=16143&cat=317&page=1

Thanks in advance!

xo
__________________
4.0.18
Reply With Quote
  #44  
Old 09-12-2006, 10:04 AM
  Zaja's Avatar 
Zaja Zaja is offline
 

X-Adept
  
Join Date: Mar 2004
Location: The Universe is my home
Posts: 420
 

Default Re: Lightbox JS v2.0 implementation

Xo, I can't find anything Thickbox related on this page.
__________________
_/ _/ _/ _/ _/ _/ _/ _/ _/

7dana.com
Reply With Quote
  #45  
Old 09-13-2006, 07:27 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

The reason dfawdon's code did not work for me -- the img src tag was not needed...

My next post will be my COMPLETE mod to Thickbox, for 4.1.3, including clickable thumbnail images.

Thanks to all...
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
Reply With Quote
  #46  
Old 09-13-2006, 07:29 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

OK... I paid X-Cart to help me figure this out... and I am now presenting my final mod...

This revision to Goran's free contribution is "optimized" for 4.1.3 and allows unique variant thumbnail images (that is, if you have assigned unique thumbs to variants) to be CLICKABLE, and the thumbnail link will call THICKBOX.

This is ONLY for 4.1 and later...

First, install Thickbox as described in Goran's instructions. Then:

1. Enable Detailed Product Images options (4.1 admin settings)

2. Change this code in product.tpl:

FIND:
Code:
{if $active_modules.Detailed_Product_Images ne "" && $config.Detailed_Product_Images.det_image_popup eq 'Y' && $images ne '' && $js_enabled eq 'Y'} {include file="modules/Detailed_Product_Images/popup_image.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}
REPLACE WITH:
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}

3. /skin1/thickbox/thickbox_productpage.tpl -- this is the new code. REPLACE what you have with this:

Code:
{section name=image loop=$images} {if $images[image].avail eq "Y" && $smarty.section.image.index eq 0} {if $images[image].tmbn_url} <div style="white-space: nowrap; padding-left: 10px;"> <a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"> {else} <a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"> {/if} {/if} {/section} {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"} {section name=image loop=$images} {if $images[image].avail eq "Y" && $smarty.section.image.index eq 0} </a> </div> {/if} {/section} {if $images ne ""} <div style="white-space:nowrap;color:#FF1493;font-weight:bold;padding:2px;margin:10px 0 4px;">{$lng.lbl_detailed_images} &not;</div> {section name=image loop=$images} {if $images[image].avail eq "Y"} {if $images[image].tmbn_url} <div style="white-space: nowrap;padding-left:10px;"><a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"><img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}</a></div> {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="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}</a></div> {/if} {/if} {/section} {/if}

4. You will probably need to make a minor adjustment to /skin1/thickbox/files/thickbox.css

Comment out lines 4-6 - to look like this:

Code:
/* { padding: 0; margin: 0; } html, body { min-height: 100%; height: auto !important; height: 100%; } */ /*

5. You could stop here, but then when you call Thickbox, the display will say "image 2 of 2" if you have a single detailed image, or "image 2 of 3" if you have 2 images, etc... so this required one last edit -- in /skin1/thickbox/files/thickbox.js

Line 70 -- FIND:
Code:
TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);
REPLACE WITH:
Code:
TB_imageCount = "Image " + (TB_Counter) +" of "+ (TB_TempArray.length - 1);

That's that. Please alert me if you find any issues... This code works perfectly for me in 4.1.3

Goran, feel free to use this or add this to the distribution.

Jeremy
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
Reply With Quote
  #47  
Old 09-19-2006, 06:54 AM
 
ranger82nd ranger82nd is offline
 

Senior Member
  
Join Date: Jan 2006
Posts: 159
 

Default Re: Lightbox JS v2.0 implementation

Has anyone tried to implement this with TelaFirma's image mod?
__________________
X-Cart Gold v4.0.17 ~ EWD Hosting!
Reply With Quote
  #48  
Old 10-12-2006, 10:08 PM
 
cyberdriveway cyberdriveway is offline
 

Advanced Member
  
Join Date: Aug 2004
Location: California
Posts: 32
 

Thumbs up Re: ThickBox implementation

THANK YOU Zaja!

This mod works great, and it was a real time saver.
__________________
Tyson McPherson
X-Cart version 4.1.8
PHP 4.3.9
MySQL server 4.1.12-log
MySQL client 4.1.12
Web server Apache/2.0.52 (Red Hat)
Operation system Red Hat 3.4.6-2
Reply With Quote
  #49  
Old 10-22-2006, 01:06 PM
 
Rocate Rocate is offline
 

Member
  
Join Date: Jul 2006
Posts: 12
 

Default Not working on 4.0.18

Hi,

I've just done a fresh install of 4.0.18 and Thickbox does not work.

The loading image just rotates and nothing happens.

Could some have a look here?

http://www.rocasoft.co.uk/product.php?productid=167&cat=111&page=1

cheers
__________________
Rocate
4.0.18
Windows XP
Linux
UK
Reply With Quote
  #50  
Old 10-22-2006, 05:03 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

Did you remove thickbox? All I see on your site is a mega supersized detailed image.
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
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 07:09 AM.

   

 
X-Cart forums © 2001-2020