X-Cart forums - Lightbox JS v2.0 implementation

Page 1 of 6

Show 40 posts from this thread on one page

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)

Zaja	08-04-2006 01:53 PM

ThickBox implementation

7.9.2006: Lightbox is replaced with Thickbox 2.1!

Here's the X-cart implementation of the Thickbox 2.1 image scripts for detailed image module:
http://www.7dana.com/106.84.0.0.1.0.phtml (4.0.x and 4.1.x versions available)

( tested with X-cart version 4.1.6 and 4.0.19 )

Dongan

08-04-2006 09:38 PM

simple. Nice share. very useful.

Thanks

carpeperdiem

08-05-2006 03:56 AM

Hi Goran,

Thanks for posting the 4.0 fix.

PS -- I am really liking the template that I bought from you... although I have modified the daylights out of it, because you coded it to spec, other mods and functions simply look perfect, without extensive re-writing... just wanted to say thanks, in public.

Cpt.Crashtastic

08-13-2006 09:27 AM

I'm trying to get the thumbnails to show of the detailed images instead of links.

Code:

$images[image].tmbn_url

returns the detailed image url

why can't I use

Code:

str_replace("/D","/T",$images[image].tmbn_url)

I get a Smarty compiler error

This is on 4.1

Thanks in advance

Ant

Jayk	08-22-2006 09:53 PM

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by Cpt.Crashtastic

I'm trying to get the thumbnails to show of the detailed images instead of links.

Did you manage to find a solution to accomplish this?

Cheers,
Jason

Zaja	08-23-2006 03:34 AM

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by Jayk

Did you manage to find a solution to accomplish this?
Cheers,
Jason

Yes, open lightbox/lightbox_productpage.tpl and replace the entire content with the following code:

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}" rel="lightbox[detailed]"><img src="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" width="50" 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}/image.php?id={$images[image].imageid}&amp;type=D" title="{$images[image].alt|escape}" rel="lightbox[detailed]"><img src="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" width="50" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /></a></div>

{/if}

{/if}

{/section}

{/if}

Jayk	08-23-2006 09:16 AM

Re: Lightbox JS v2.0 implementation

Works great! Thanks!

Jason

leorulz

08-24-2006 08:39 AM

Re: Lightbox JS v2.0 implementation

This is a great mod. I have installed it with no problems.
Does anybody know how to get rid of javascript error on the bottom of internet explorere.
You can view an example here: http://www.dreamindiamonds.com/store/product.php?productid=16212&cat=252&page=1

Thank you.

Cpt.Crashtastic

08-28-2006 10:28 AM

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by leorulz

Did you get to the bottom of this one. I get a JS error too but only when an option is selected.

Error variants[...].1.length is not a null or not an object

Selecting a quantity in Firefox completely trashes the wholesale table and fills it with NaN

I'm not sure what to guess or where to start with this one

Can be seen here http://www.embroideredcaps.info/product.php?productid=2&cat=1&page=1

leorulz

08-28-2006 10:36 AM

Re: Lightbox JS v2.0 implementation

i am still trying to figure it out. I wrote an email to 7dana.com, maybe he can help out. By the way nice website you have. How did you manage to have clickable thumbnails on product page?

Cpt.Crashtastic

08-28-2006 11:15 AM

Re: Lightbox JS v2.0 implementation

hand coded it and if i remember correctly i put the html into the welcome text.

I think there may be a clash of names somewhere between common.js and the lightbox js. Too tired to look though at the moment.

Cpt.Crashtastic

08-29-2006 01:25 PM

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by leorulz

i am still trying to figure it out. I wrote an email to 7dana.com, maybe he can help out. By the way nice website you have. How did you manage to have clickable thumbnails on product page?

Any joy with 7dana yet? I'd really like to have this working properly within a fortnight when we launch the site even if costsmoney.

It's interesting what happens in Firefox. I have (weird and wonderful) wholesale prices activated. As soon as you change the colour option the array of colours is wiped and the wholesale array is filled with nothing. This must be a clue. At the moment I'm totally clueless with this, and can't afford to strain the few remaining cells I have left on it.

Ant

leorulz

08-29-2006 02:52 PM

Re: Lightbox JS v2.0 implementation

7dana replied, this was their reply:

Hi Alex,

Unfortunately I don't have a fix for this problem ...too many pending jobs.

Regards,
Goran
www.7dana.com"

At this point, i dont know what to do. Perhaps, i ll just leave it the way it is for now.

Zaja	08-30-2006 02:12 AM

Re: Lightbox JS v2.0 implementation

Guys, I'm working on that isuue...please be patient....;-)

carpeperdiem

09-07-2006 07:17 AM

Re: Lightbox JS v2.0 implementation

Goran,

Any word on getting Lightbox working w/ 4.1 and variants?

I have been exploring every "detailed image" mod, including:

X-Magnifier (flash based -- slow to load images - bloated with code)
PhilJ's "Zoomify Multiple Images" (I'm not a fan of the "zoomify" concept)
Tela Firma (not compato w/ 4.1 - also based on "zoomify")

Lightbox is simply cool.

I know the code originated elsewhere -- can a developer re-package this code as a commercial product if they add value (make changes)? In this case, could it be worth the price of a mod to you (or someone) if you can solve the js conflict issue in MSIE 6 (with variants)?

Has anyone figured this out?

Thanks,

Jeremy

Zaja	09-07-2006 10:23 AM

Re: Thickbox 2.0 implementation

Ok, Lightbox is replaced with Thickbox 2.0!

In my opinion, this is a far better option than Lightbox which is more bloaty.

The ThickBox.js + jQuery.js + CSS file only add an additional 28kb vs 105kb from Lightbox.
Thickbox 2.0 can display any inline content, iframed content, or content served through AJAX on the current page, not only images.

I have tested on x-cart 4.1.3 and product variants and Add to cart buttons works fine...and no javascripts errors.

Demo and download:
http://www.7dana.com/106.84.0.0.1.0.phtml

Jayk	09-07-2006 10:44 AM

Re: Lightbox JS v2.0 implementation

This sounds great. I will replace the Lightbox implementation. I like the idea of being able to add other content besides images.

Cheers,
Jason

carpeperdiem

09-07-2006 10:59 AM

Re: Lightbox JS v2.0 implementation

AWESOME!

Thank you, Goran!

2 minor edits may be needed...

1. the directory, /thickbox/images is not in the distributive. I used the directory from lightbox, and it seems to be ok...
2. In file, /thickbox/thickbox_productpage.tpl

FIND:

<img src="{$SkinDir}/lightbox/

REPLACE WITH:

<img src="{$SkinDir}/thickbox/

yes?

THANKS A ZILLION. I am configuring and testing right now.

Zaja	09-07-2006 12:13 PM

Re: ThickBox 2 implementation

Jeremy, that's right, please download package again.

btw. The images directory is not needed any more, zoom.gif is placed inside thickbox/files folder.

carpeperdiem

09-07-2006 12:34 PM

Re: Lightbox JS v2.0 implementation

OK! Now we're cooking with fire...

The good news: Safari (mac), MSIE 6 (winxp) and Opera (both mac/win) look and function great.
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.

Could this be a problem with my product.tpl formatting, or do others also see this?

It very well may be just me -- but I thought I'd toss this out to the community.

Goran, I was getting frustrated with the detailed image display options and you have come to the rescue (again). Hopefully, this is only a minor display issue... I'll keep testing and if i figure out why Firefox is displaying things poorly, I'll report back ASAP.

Thanks!

Jeremy

carpeperdiem

09-07-2006 12:38 PM

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.

Zaja	09-07-2006 01:29 PM

Re: ThickBox v2.0 implementation

1 Attachment(s)

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.

Zaja	09-07-2006 01:40 PM

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}

dfawdon

09-07-2006 02:26 PM

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

carpeperdiem

09-07-2006 02:27 PM

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

carpeperdiem

09-08-2006 05:27 AM

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

dfawdon

09-08-2006 05:35 AM

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

carpeperdiem

09-08-2006 05:46 AM

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!

zardos

09-08-2006 06:04 PM

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;

}

Jayk	09-08-2006 09:08 PM

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

inebriate

09-08-2006 09:34 PM

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?

Cpt.Crashtastic

09-09-2006 11:07 AM

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

Jayk	09-09-2006 11:21 AM

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by Cpt.Crashtastic

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

carpeperdiem

09-09-2006 04:12 PM

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

Cpt.Crashtastic

09-10-2006 10:14 AM

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

carpeperdiem

09-10-2006 11:09 AM

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by Cpt.Crashtastic

It appears to be working for me.

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

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 " " )

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!

Cpt.Crashtastic

09-10-2006 12:27 PM

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by carpeperdiem

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

Cpt.Crashtastic

09-10-2006 12:39 PM

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

carpeperdiem

09-10-2006 01:07 PM

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

inebriate

09-10-2006 02:10 PM

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by carpeperdiem

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>

All times are GMT -8. The time now is 07:08 PM.

Page 1 of 6

Last »

Show 40 posts from this thread on one page