Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

ThickBox help


Guest

Recommended Posts

Hi all

 

I just installed ThickBox as I was having a lot of issues with Lightbox that I just couldn't fix... like the add to cart buttons disappearing when viewed via IE.

 

Anyway... I've installed ThickBox and I have a few little bugs that I do not know how to fix...

IE on a PC = fine, no problems at all

 

Firefox on PC = Flash banner on my page overlays the image pop-up

 

Firefox on Mac = the pop-up remains at the bottom of the browser, thus doesn't move when you scroll up / down, and if image is larger than the browser window, you can not see the "close" button.

Also, on the Mac there is no blacked-out background.

 

Safari on Mac = Again, the pop-up is not fixed, it doesn't move when you scroll.

Also when you roll mouse over pop-up the flash banner then appears on top of the pop-up.

 

 

I know I am asking a lot, but any little tweaks anyone knows about would be appreciated.

Thanks,

Cat :)

Link to comment
Share on other sites

Hi Cat,

 

I found Slimbox2 while I was reading on the jQuery site yesterday and got it running on my test site pretty easily although I had problems with Thickbox and gave up on it. I haven't done a lot of testing with it but it seems to have more/better information/instructions and I think it can do more. It easily replaces Lightbox which I had running and Slimbox2 is simpler. I have this right before my closing head tag

 

<script type="text/javascript" src="includes/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="includes/js/slimbox2.js"></script>
<script type="text/JavaScript">
<!--
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
	return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
//-->
</script>

 

I simplified the image line and it works with just the php code with rel="lightbox" in the statement after target="_blank".

 

Anyway, you might install this faster and easier than fixing Thickbox.

John Wisdom

Link to comment
Share on other sites

  • 2 months later...

No help for thick box, but just to let you know a little more about slimbox2 and what John said about it being simpler and quicker(I think).

 

I had been struggling to install slimbox2. but eventually I used the install for lightbox

http://addons.oscommerce.com/info/6517

to get the code change in the body section of the products_info.php which is the same for slimbox2.

Basically it was

Find this code in products_info.php

 

document.write('<?php echo '<a href="java script:popupWindow(\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

 

Replace it with

 

document.write('<?php echo '<a href="images/' . $product_info['products_image'] . '" rel="lightbox" title="' . $product_info['products_name'] . '">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

 

 

 

The three lines in the HEAD section for slimbox2 are (for me)

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/slimbox2.js"></script>

<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

 

Instructions on the files and locations required in the js and css folder are here

http://www.digitalia.be/software/slimbox2

 

Only other issue I had was that when downloading and installing the jquery file from jquery.com, which is needed for slimbox2, the filename needed changing to jquery.js rather than the name that downloaded (jquery-1.3.2.min.js )

I am only using it with single images.

 

Andy

Link to comment
Share on other sites

Hi Andy,

 

My live site is a modded osc site but I have a regular osc site that I test things with too. Slimbox works great with less code. Here's how I have slimbox2 set up on my osc test site and it works with all browsers I've tested.

Before the </head> tag I have this on product_info.php, but I have it before my cssmenu.js code. Now, I defined in my configuration.php DIR_WS_BIG_IMAGES but I think you can just make it work using the code below like the regular lightbox but the other lightbox code may cause issues so you need to pull it out. It caused other issues for me with some other jQuery code which got me on slimbox2 in the firs place, but I'm glad that happened.

Note: I have the particular version listed to keep myself straight.

<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/javascript" src="includes/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="includes/js/slimbox2.js"></script>
<script type="text/JavaScript">
<!--
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
	return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
//-->
</script>

 

My image related line around line 151 is very simple now like this.

					  <td align="center" class="smallText"> <?php echo '<a href="' . tep_href_link(DIR_WS_BIG_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?> </td>

This works with javascript disabled also by going to a new window.

 

Hope this helps.

John Wisdom

Link to comment
Share on other sites

Hi Andy,

 

My live site is a modded osc site but I have a regular osc site that I test things with too. Slimbox works great with less code. Here's how I have slimbox2 set up on my osc test site and it works with all browsers I've tested.

Before the </head> tag I have this on product_info.php, but I have it before my cssmenu.js code. Now, I defined in my configuration.php DIR_WS_BIG_IMAGES but I think you can just make it work using the code below like the regular lightbox but the other lightbox code may cause issues so you need to pull it out. It caused other issues for me with some other jQuery code which got me on slimbox2 in the firs place, but I'm glad that happened.

Note: I have the particular version listed to keep myself straight.

<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/javascript" src="includes/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="includes/js/slimbox2.js"></script>
<script type="text/JavaScript">
<!--
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
	return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
//-->
</script>

 

My image related line around line 151 is very simple now like this.

					  <td align="center" class="smallText"> <?php echo '<a href="' . tep_href_link(DIR_WS_BIG_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?> </td>

This works with javascript disabled also by going to a new window.

 

Hope this helps.

 

Thanks John,

I managed to get it working before your post, but thanks for your help, you convinced me that if I stuck with it I would get it sorted.

As you say, and I agree, Slimbox2 works great with less code and is quick to load.

 

regards,

Andy

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...