X-Cart forums - Lightbox JS v2.0 implementation

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Lightbox JS v2.0 implementation (https://forum.x-cart.com/showthread.php?t=23858)

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.

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.

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}

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; }

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

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...

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; }

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!

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;

}

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