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
  #21  
Old 09-07-2006, 12:38 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

PS -- I LOVE the auto image re-sizing when the main browser window is smaller than default... do you you know what exactly it is doing?

ALSO -- if we want to change the "Image 1", "Image 2" descriptors to the "alt tag name" -- I guess we can pick this up? I'll keep digging. Thanks.
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
Reply With Quote
  #22  
Old 09-07-2006, 01:29 PM
  Zaja's Avatar 
Zaja Zaja is offline
 

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

Default Re: ThickBox v2.0 implementation

Quote:
Originally Posted by carpeperdiem
The bad news: Firefox (both mac and win) has a minor display issue...

The product page in both win and mac firefox does not render correctly, and it tries to place the "thickbox" "click to enlarge" links ON TOP of the product description text.
Just tested in Firefox and the "thickbox" "click to enlarge" links are placed correctly, below image. Screenshot attached.
Attached Thumbnails
Click image for larger version

Name:	capture_07092006_232201.gif
Views:	623
Size:	37.3 KB
ID:	85  
__________________
_/ _/ _/ _/ _/ _/ _/ _/ _/

7dana.com
Reply With Quote
  #23  
Old 09-07-2006, 01:40 PM
  Zaja's Avatar 
Zaja Zaja is offline
 

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

Default Re: ThickBox v2.0 implementation

Quote:
Originally Posted by carpeperdiem
PS -- I LOVE the auto image re-sizing when the main browser window is smaller than default... do you you know what exactly it is doing?.
Yes, the ThickBox is able to resize images that are bigger than the browser window.



Quote:
Originally Posted by carpeperdiem
if we want to change the "Image 1", "Image 2" descriptors to the "alt tag name" -- I guess we can pick this up? I'll keep digging.
You can replace this code(thickbox_productpage.tpl):
Code:
{$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}
with:
Code:
{$images[image].alt|escape}
__________________
_/ _/ _/ _/ _/ _/ _/ _/ _/

7dana.com
Reply With Quote
  #24  
Old 09-07-2006, 02:26 PM
 
dfawdon dfawdon is offline
 

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

Default Re: Lightbox JS v2.0 implementation

Thanks for a great mod, nicer than lighbox and no java errors with variants in 4.0.17.

I had to comment out line 4 of the thickbox.css, it was squashing up the product Detailed description text and the category menu

/*{ padding: 0; margin: 0; }
__________________
X-Cart Gold 4.0.17
X-AOM
Safetynet DSEFU
Easy Checkout
_________________
Reply With Quote
  #25  
Old 09-07-2006, 02:27 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

Whata great mod! Thank you!

I found the firefox problem -- I had previously modded the CSS for a 1-column product details page...

This was my new CSS for the PImgBox:

Code:
.PImgBox { padding-right: 8px; text-align: left; vertical-align: top; } .PImgBox img { FLOAT: left; PADDING-RIGHT: 4px; padding-bottom: 4px; } .PImgBox ul, .PImgBox ol { margin: 0px; padding: 0px; }
And that's what is broken in Firefox. I think the solution is to take thickbox_productpage.tpl and put it into its own table. I have to run out now -- but i will dig in in a few hours. I can't wait to get my detailed images uploaded now that I have a viable solution.

Oh -- one final question, any thought on how to make the "standard thumbnail image", a clickable link to the thickbox, image #1 ? The first thing my wife did when she saw the product page was click on the thumb... not the detailed image links (even though it is VERY clearly labeled). This is one thing a non-geek will do -- click on the picture, not the text. I have an idea how to do this... must run this instant.

THANKS!!!!

Jeremy
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
Reply With Quote
  #26  
Old 09-08-2006, 05: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

Goran,

I had a major formatting mess in 4.1.3 w/ Thickbox...

http://forum.x-cart.com/showthread.php?p=140060

Basically, enabling the Thickbox incude destroys my <p> tags in the "detailed product decriptions" - and causes the pulldown qty box to shrink (horizontally).

I am going to look into the CSS and see what's going on...

Disabling {include file="thickbox/thickbox_include.tpl" } restores the formatting.



I am sad. I was L-O-V-I-N-G this mod. Let's see if I can find something...
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
Reply With Quote
  #27  
Old 09-08-2006, 05:35 AM
 
dfawdon dfawdon is offline
 

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

Default Re: Lightbox JS v2.0 implementation

Quote:
Originally Posted by carpeperdiem
Goran,

Basically, enabling the Thickbox incude destroys my <p> tags in the "detailed product decriptions" - and causes the pulldown qty box to shrink (horizontally).

I am going to look into the CSS and see what's going on...

I had the same problem in 4.0.17, I commented out line 4 in the css file

Code:
*{ padding: 0; margin: 0; }
__________________
X-Cart Gold 4.0.17
X-AOM
Safetynet DSEFU
Easy Checkout
_________________
Reply With Quote
  #28  
Old 09-08-2006, 05:46 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

YEAH!!!

That's it...

ACTUALLY... looking at the thickbox.css file, the virgin code on lines 4-6 was:

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

The "*" at the start of line 4 really looks like a remnant of what should have been:

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

Goran, can you comment on this? This works for me and solves the mystery (and a couple hours of frustration.)

dfawdon: thank you! I missed your post entirely, since it looks like we both posted within minutes of each other...

onward!
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
Reply With Quote
  #29  
Old 09-08-2006, 06:04 PM
 
zardos zardos is offline
 

Senior Member
  
Join Date: Jun 2004
Location: UK England
Posts: 140
 

Default Re: Lightbox JS v2.0 implementation

Try this

Code:
html,body { min-height:100%; height:auto !important; } #TB_window { font:12px Arial, Helvetica, sans-serif; border:4px solid #525252; display:none; background:#fff; color:#000; text-align:left; position:absolute; z-index:102; } #TB_secondLine { color:#666; font:10px Arial, Helvetica, sans-serif; } #TB_window a:hover { color:#000; } #TB_overlay { width:100%; background-color:#000; position:absolute; z-index:100; height:100%; top:0; left:0; min-height:100%; filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; } #TB_window img { border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-top:1px solid #666; border-left:1px solid #666; display:block; margin:15px 0 0 15px; } #TB_caption { float:left; height:25px; padding:7px 30px 10px 25px; } #TB_closeWindow { float:right; height:25px; padding:11px 25px 10px 0; } #TB_closeAjaxWindow { margin-bottom:1px; float:right; text-align:right; padding:5px 10px 7px 0; } #TB_ajaxWindowTitle { float:left; margin-bottom:1px; padding:7px 0 5px 10px; } #TB_title { background-color:#e8e8e8; height:27px; } #TB_ajaxContent { clear:both; text-align:left; line-height:1.4em; overflow:auto; padding:2px 15px 15px; } #TB_ajaxContent p { padding:5px 0; } #TB_load { width:100px; display:none; position:absolute; height:100px; z-index:101; } #TB_HideSelect { width:100%; border:none; background-color:#fff; z-index:99; position:absolute; top:0; left:0; height:100%; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; } #TB_iframeContent { border:none; clear:both; } #TB_next a { font-weight:700; } #TB_window a:link,#TB_window a:visited,#TB_window a:active,#TB_window a:focus { color:#666; }
__________________
X-Cart V4.0.18
PHP 4.3.10
MySQL Server 4.0.22
Apache/1.3.33 (unix)
OS - Linux
Reply With Quote
  #30  
Old 09-08-2006, 09:08 PM
  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

Anyone tried implementing effects with Thickbox 2 similar to those that Lightbox has? I searched through the Thickbox 2 site and found a forum post by the author that points here:

http://jquery.com/docs/FxModule/

If anyone gives this a try and gets it working, maybe they could post here.

Cheers,
Jason
__________________
X-Cart Gold 4.4.3
Blog: www.flashinthepan.ca
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions



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 12:06 PM.

   

 
X-Cart forums © 2001-2020