Thickbox mod for V1.3.4 r2

[COLOR=red]THICKBOX MOD FOR V1.34r2 & 1.34r3



UPDATED 29/04/2007 - 01:00 GMT


****************************************

[/COLOR][COLOR=red][COLOR=seagreen]All my addittions from the following pages have been added to this post to [/COLOR][COLOR=seagreen]keep it all in one place





[/COLOR][/COLOR]This mod is a thickbox Javascript popup mod based on the 1.3.3 version created by Sculptingstudio



FULLY TESTED INSTALLED ON A CLEAN STORE WORKS IN IE7, FIREFOX 2

With Dynamic menu style or Emenu style., Images in Database or Images in file system



I have installed this mod in the same way to Default Blue & Aquarelle without a single problem, in less than 1 minute !!


  1. Download and unzip the file attached to this post !



    Follow the instructions below, we have already included some modified files in the zip to make it easier to install. No .tpl files are included so any current mods will not be over-written.





    [COLOR=red][COLOR=seagreen][COLOR=red]DYNAMIC E-MENU FIX : - Now included by default below ![/COLOR][/COLOR][/COLOR]

    ********************************************************



    The download contains a folder called customer, upload this to your chosen skin directory



    Edit your main.tpl file and add the following 3 lines of code underneath {include file=“meta.tpl”}


```php



{if $settings.Modules.ads == ‘Y’}

{include file=“addons/ads/ads.tpl” location=“R” show_order=“A”}

{/if}




{/if}

[COLOR=Red]


[/COLOR]






```


[B]Next goto common_templates and edit image.tpl[/B]

Replace the entire following code
```php

[COLOR=green]{assign var="detailed_href" value="javascript:fn_open_popup_image('$image_index?object_type=detailed&image_id=`$images.detailed_id`&window=popup', `$images.detailed.image_x`, `$images.detailed.image_y` + 30);"}[/COLOR]

```

with the following

```php

[COLOR=red][COLOR=red]
[/COLOR][/COLOR][COLOR=red]{if $settings.General.images_location == "database"}
{assign var="detailed_href" value="$image_index?object_type=detailed&image_id=`$images.detailed_id`"}
{else}
{assign var="detailed_href" value="`$images.detailed.image_path`"}
{/if}

[/COLOR]
```


next change the following lines :

```php

{if $images.icon.image_type != 'application/x-shockwave-flash'}
{if $detailed_href}
[/COLOR]
{/if}

```

TO : [COLOR=red](scroll to see changes in red)[/COLOR]

```php

[COLOR=red][COLOR=black]{if $images.icon.image_type != 'application/x-shockwave-flash'}[/COLOR]
[COLOR=black]{if $detailed_href}[/COLOR]
[COLOR=black]

[/COLOR][COLOR=black]{/if}[/COLOR]

```

Then this section

```php

{if $detailed_href}






{$lang.view_larger_image}

{$lang.view_larger_image}
{/if}

```

to the following : [COLOR=red](scroll to see changes in red)[/COLOR]

```php

{if $detailed_href}
[COLOR=black][/COLOR]
[COLOR=black][/COLOR]
[COLOR=black][/COLOR]
[COLOR=black][/COLOR]
[COLOR=black][/COLOR]
[COLOR=black]
[/COLOR]
[COLOR=black]<[/COLOR]img src="{$images_dir}/view_larger.gif" width="12" height="12" alt="{$lang.view_larger_image}" border="0" />
[/COLOR]
[COLOR=black]{$lang.view_larger_image}
{/if}[/COLOR]

```

* ALL OF THE INFORMATION BELOW HAS ALREADY BEEN INCLUDED IN THE DOWNLOAD FILES, SKIP THESE STEPS IF YOU ARE UPLOADING THE ZIP !!!
*******************************************************

[B]next to stop your cellpadding being messed up edit thickbox.css and remove the following line completely[/B]

[COLOR=red]*{padding: 0; margin: 0;}[/COLOR]


Final Piece of the puzzle - * Already changed in the zip file *

edit skins/..../customer/products_pages/exceptions.js

Replace the following line (its near middle of entire code)
```php

[COLOR=seagreen]new_ref[id] = "javascript:fn_open_popup_image('"+image_index+"?object_type=detailed&image_id="+pr_i[id][row]['detailed_id']+"&window=popup', "+pr_i[id][row]['detailed']['image_x']+", "+pr_i[id][row]['detailed']['image_y']+"+ 30);"[/COLOR]

```


with this one if your [B]images are stored in the file system[/B]
```php

[COLOR=red]new_ref[id] = ""+pr_i[id][row]['detailed2']+""[/COLOR]

```

Or this one if your[B] images are stored in the database[/B]

```php

[COLOR=red]new_ref[id] = ""+image_index+"?object_type=detailed&image_id="+pr_i[id][row]['detailed_id']+""[/COLOR]

```

Next edit product_options.tpl

and add the following code as shown in red

```php

pr_i[{$id}][{$smarty.foreach.ii.iteration}-1]['detailed_id'] = '{$imag.detailed_id}';
[COLOR=red]pr_i[{$id}][{$smarty.foreach.ii.iteration}-1]['detailed2'] = '{$imag.detailed.image_path}';
[/COLOR]pr_i[{$id}][{$smarty.foreach.ii.iteration}-1]['options'] = '{$imag.options}';

```

[B]The above allows images that change with 'additional product options' to work correctly.

[/B]*******************************************************

My Sample product with sample images / options



Hope you all enjoy and thanks for the inspiration from [COLOR=red]sculptingstudio[/COLOR]

thickbox_mod.zip

thanks for working on this. i have been sick but have been trying to get this work having a heck of a time failing.



it looks great =)

bug:



i just tried to load thickbox on your site and the thickbox loaded without the car image. it looks like the content didn’t load.

Great! Saves me time! :wink:

Sorry ive been playing on sizes… .cant keep away from it.



I have updated above code, all working fine now…

If anybody knows the correct way to add 20 to the following line, please post below… this needs doing to add padding around the box.



[COLOR=#ff0000]{assign var=“detailed_image_width” value=$images.detailed.image_x}[/COLOR]

[COLOR=#ff0000][/COLOR]

[COLOR=#ff0000]I will figure it out, but for now… sleeeeep time ![/COLOR]

Awesome! Thanks you both guys!

I’m bookmarking this for future use!

Good stuff.



Let me just point some stuff out! :wink:



The “close text”, can you replace it to a language variable? {$lang.close_window} ? (ok, noticed this is hardcoded in the javascript, might be hard to fix)



And also if you look at sculpingstudios website, you can press next to view the other images. Can you implement that aswell? Would be great.



Also when you click on the image it doesn’t close. That would be handy.



Thanks.

Dont worry im going to keep going…



If sculpting has any hints… they are more than welcome as I couldnt get the thickbox to work using “gallery” as the setting like he did, it simply stayed on the loading page and didnt show any images…



Ive integrated this into my other static site so know my code works but cannot get cs-to work, maybe something to do with it loading the image via image.php - [URL=“SWS Solutions (UK) Ltd | Garage Assistant Screenshot Gallery | Garage Assistant GA4”]http://www.sws-solutions.co.uk/software_gallery.php[/URL]



It appears on the older versions, the link through image.php shows the image with no html code as if you where direct linking to it,

in 1.3.4 it shows the image through html using

hi sws,



yes, looks like you fixed the loading bug.



good work on this. i am going to use it. btw does the forward/back links work if you have more than one picture?



peace,

SEE ABOVE FOR UPDATED CODE - Works with Gallery Mode (Prev / Next) buttons

and can handle images stored in database or stored in file system

thank you for sorting this out. i greatly appreciate it. i am going to implement this right now.



again, thank you.



peace =)

Not a problem !



The issue was that my images are stored in the file system and not the database, so when I was trying to use the same link to retrieve it I would receive a blank image



It would have worked right from the start if my images where in the database but im not fond of adding extra dbase queries…



All it needs now is the [COLOR=#ff0000]title=“{$product.product|strip_tags}”[/COLOR] adding to each link after rel=“gallery”



Ive not tested that yet and forgot to do that as I was more concerned about it functioning first



Another good use of the thickbox mod will be to place your Terms and Conditions on the checkout page.

Allowing people to view them without pop-up blockers getting in the way or them having to leave the checkout page !



Just adding SOURCE for ThickBox 2.1 code

[URL=“http://jquery.com/demo/thickbox/”]http://jquery.com/demo/thickbox/[/URL]

hi sws



that is a really good idea to use it for terms and conditions.



i am having some problems with the thickbox mod.


  1. the “snake” does not load



    [url]http://mirkury.com/shop/index.php?target=products&product_id=82[/url]


  2. the thumbs are loaded not the larger image



    [url]http://mirkury.com/shop/index.php?target=products&product_id=82[/url]


  3. it renders wrong in ie



    [url]http://mirkury.com/shop/index.php?target=products&product_id=82[/url]


  4. some of the pictures do not open in thickbox but gets redirected to a blank html page with a thumb



    [url]http://mirkury.com/shop/index.php?target=products&product_id=41[/url]





    any thoughts?



    cheers,



    matt

correction this bug is only in ie



4. some of the pictures do not open in thickbox but gets redirected to a blank html page with a thumb



[url]http://mirkury.com/shop/index.php?ta...&product_id=41[/url]

this is a great mod if i can get it working properly. i love the way it looks.

looks like i fixed



3. it renders wrong in ie



[url]http://mirkury.com/shop/index.php?ta...&product_id=82[/url]





i just had to add



width:100%;



to this in css



#TB_overlay {

position: absolute;

z-index:100;

top: 0px;

left: 0px;

width:100%;

background-color:#000;

filter:alpha(opacity=60);

-moz-opacity: 0.6;

opacity: 0.6;

}











i am going to see if this is why the images are loading small as well.

so these are the issues i am having.


  1. the “snake” does not load


  2. the thumbs are loaded not the larger image


  3. some of the pictures do not open in thickbox but gets redirected to a blank html page with a thumb



    this last one is funny. this only happens sometimes. odd???

[quote name=‘mpjbay’]

  1. the “snake” does not load

    [/QUOTE]



    You need to download the file:

    [url]http://www.sculptingstudio.com/images/loadingAnimation.gif[/url]



    And place it at the same location in your cart.

oops. thanks =)