Guest Posted February 5, 2009 Share Posted February 5, 2009 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 :) Quote Link to comment Share on other sites More sharing options...
John Wisdom Posted February 7, 2009 Share Posted February 7, 2009 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. Quote John Wisdom Link to comment Share on other sites More sharing options...
andyd64 Posted April 29, 2009 Share Posted April 29, 2009 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 Quote Link to comment Share on other sites More sharing options...
John Wisdom Posted April 30, 2009 Share Posted April 30, 2009 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. Quote John Wisdom Link to comment Share on other sites More sharing options...
andyd64 Posted April 30, 2009 Share Posted April 30, 2009 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.