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

Quote:

Originally Posted by Zaja

btw.new version of thickbox mode(based on Thickbox 3) is attached.

Goran,

Looks like you left out thickbox_include.tpl, and the CSS looks like vers 2, not vers 3 (at least from the file that you posted). Is it me? Thanks,

Jeremy

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by carpeperdiem

Goran,
Looks like you left out thickbox_include.tpl,

The code for thickbox_include.tpl is now integrated within thickbox_productpage.tpl

Regards

Shafiq :sK

Re: Lightbox JS v2.0 implementation

Quote:

The code for thickbox_include.tpl is now integrated within thickbox_productpage.tpl

I see it now. I may move it back to an include, so that thickbox can be used on non-product pages (and just call the include as needed).

Goran, can I ask why you integrated this? Is there a technical reason?

Also, the slight differences in the jquery-compressed.js - did you make any changes here? I downloaded the most recent, and there are some minor diffs. Should I be concerend? Thanks.

Jeremy

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by carpeperdiem

Hi Jeremy, the advantages with the new release is a simplier install process, you only need to include this code; {include file="thickbox/thickbox_productpage.tpl" } in product page.

Quote:

Originally Posted by carpeperdiem

Also, the slight differences in the jquery-compressed.js - did you make any changes here? I downloaded the most recent, and there are some minor diffs. Should I be concerend? Thanks.
Jeremy

I have created this new version 2 weeks ago (using version 1.1.3), you can replace the jquery-compressed.js file with the most recent version 1.1.3.1, but this is not important.

Edited: The mod is just updated with the most recent jQuery file.

Re: Lightbox JS v2.0 implementation

Do you also have this update for the 4.0.X version.
On your site I see only the 4.1.X version.

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by NightFire

Do you also have this update for the 4.0.X version.
On your site I see only the 4.1.X version.

Unfortunately no, but I will prepare the 4.0.X version soon.

Re: Lightbox JS v2.0 implementation

I am using 4.1.8. Looking at the install txt I am having some issues with the instructions.

Quote:

2. The same file(product.tpl), add following code right after product_thumbnail line(after {/if}):
{include file="thickbox/thickbox_productpage.tpl" }

I'm not familiar w/ with one is the thumbnail line... can an example of what this is be posted?

Quote:

3. The same file(product.tpl), comment this out with a {* *}:

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}
<p />
{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}

I don't have this code in my file at all...

Any ideas?

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by OpheliaPayne

I'm not familiar w/ with one is the thumbnail line... can an example of what this is be posted?

Open skin1/customer/main/product.tpl in notepad/ultraedit and search for product_thumbnail text. Add required code right after after {/if} tag. (first {/if} after product_thumbnail).

Quote:

I don't have this code in my file at all...

I can't help you, maybe you have custom product.tpl.

Re: Lightbox JS v2.0 implementation

We have this working now... however, I have some questions.

1. I want to upload one photo, that is 600x600. I want that one photo to be used for the thumbnail (150x150) and I want it to be used as the product image (300x300 with the option to click on it to see full version).

2. On the full version popup window, I want the browser window to be 600x600.

3. Instead of text links for the detailed images, I want 150x150 images below the product page that you can click on and see the full version in the popup window.

Are either of these things possible? If so, can anyone point me to instructions on how to do these things?

Thank you.

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by OpheliaPayne

3. Instead of text links for the detailed images, I want 150x150 images below the product page that you can click on and see the full version in the popup window.

To do this, use this code in your thickbox_productpage.tpl:

Quote:

{if $images ne ""}
<div style="white-space:nowrap;color:#D90000;font-weight:bold;padding:2px;margin:10px 0 4px;">{$lng.lbl_detailed_images} ¬</div>
<table width="250"><tr>
{section name=image loop=$images}
<td>
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}
<div style="white-space: nowrap;padding:0 0 1px 3px;"><a href="{$images[image].tmbn_url}" title=" {$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$images[image].tmbn_url}" width="150" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}{if $images[image].alt|escape eq ""} {$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}{/if}</a></div>
{else}
<div style="white-space: nowrap;padding:0 0 1px 3px;"><a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&type=D" title=" {$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}{if $images[image].alt|escape eq ""} {$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}{/if}</a></div>
{/if}
{/if}
</td>
{/section}</tr>
</table>
<script type="text/javascript" src="{$SkinDir}/thickbox/files/jquery-compressed.js"></script>
<script type="text/javascript" src="{$SkinDir}/thickbox/files/thickbox.js"></script>
<style type="text/css" media="all">@import "{$SkinDir}/thickbox/files/thickbox.css";</style>
{/if}