Lightbox JS v2.0 implementation

inebriate · #31 09-08-2006, 09:34 PM

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 · #32 09-09-2006, 11:07 AM

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 · #33 09-09-2006, 11:21 AM

Quote:

Originally Posted by Cpt.Crashtastic

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

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 · #34 09-09-2006, 04:12 PM

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 · #35 09-10-2006, 10:14 AM

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 · #36 09-10-2006, 11:09 AM

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 · #37 09-10-2006, 12:27 PM

Quote:

Originally Posted by carpeperdiem

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!

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 · #38 09-10-2006, 12:39 PM

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 · #39 09-10-2006, 01:07 PM

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 · #40 09-10-2006, 02:10 PM

Quote:

Originally Posted by carpeperdiem

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

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>