spooks Posted August 28, 2009 Share Posted August 28, 2009 (edited) Fancy Pics This simple contribution replaces your existing image popups in Product Info etc with some fancy ones, like lightbox, but with better lighter code. It can be used with multi image contribs like Easy Thumbnail with modification, but I prefer to use OscThumb, then you only need to upload a single large image for the product, osCThumb will sort out the small one for you. If you want an easy to install better product preview function for your pictures of the goods on your site then look no further! One reason for writing this was the compatibility issues with lightbox & other contributions, lightbox will not work with mootools based scripts for example. Further this contrib. actually includes two different solutions, firstly Fancybox which is very similar to lightbox, just better lighter code, it has the more options of the two here, but as it is based on the jquery script, which is again incompatible with mootools, you may have an issue should you use mootools already. The other option here is Slimbox, which has less display options, but being mootools based you wont have issues with the likes of the bookmarking Socializer . You will find details and examples for Fancybox here and for Slimbox here. The contribution is found here I hope many find this easy to install and use. :) Edited August 28, 2009 by spooks Joe234 1 Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
spooks Posted August 28, 2009 Author Share Posted August 28, 2009 If you are using berts Easy Thumbnail these are the changes to product_info.php you must do: 1. add: , p.large_products_image to the products query 2. then instead of: <div id="fancy"> <?php echo '<a rel="lightbox" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . 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>'; ?> </div> put: <?php if (tep_not_null($product_info['large_products_image'])) { ?> <div id="fancy"> <?php echo '<a rel="lightbox" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['large_products_image']) . '" target="_blank">' . 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>'; ?> </div> <?php } else { ?> <div id="fancy"> <?php echo '<a rel="lightbox" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . 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>'; ?> </div> <?php } ?> Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
nudylady Posted September 3, 2009 Share Posted September 3, 2009 (edited) great contribution! I tried Slimbox on a clean 2.2ra2. worked like charm. Tried fancybox on a clean 2.2ra2, white blank popup. Tried both on STS enabled, both not work. the STS is now my headache. Edited September 3, 2009 by nudylady Quote Link to comment Share on other sites More sharing options...
spooks Posted September 3, 2009 Author Share Posted September 3, 2009 great contribution! I tried Slimbox on a clean 2.2ra2. worked like charm. Tried fancybox on a clean 2.2ra2, white blank popup. Tried both on STS enabled, both not work. the STS is now my headache. Thats odd, I`ve also tried both on a clean rc2a and both worked fine, I have no installs with STS, so I cant say with that, sorry. Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
spooks Posted September 4, 2009 Author Share Posted September 4, 2009 Uploaded new version V1.1 This makes the pop image with a scroller option, buttons will appear on the image (left &/or right) enabling you to browse images of all products in the current products category, the images will have captions showing the product name. This will only work with Fancybox. Currently the images have no additional functionality, an option to click on the image you want so that it will redirect to that product is planned, but appears not possible with the current version of Fancybox. If you only require 'static' images use V1 Please note, if a product image is missing you will get a continuous 'loading' gif. Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
PiLLaO Posted September 4, 2009 Share Posted September 4, 2009 I install this contribution to view it and... is wonderful :) A little thing, scroller option to browse other categories images on facybox can by disabled? Thanks!!! Quote Link to comment Share on other sites More sharing options...
spooks Posted September 4, 2009 Author Share Posted September 4, 2009 I install this contribution to view it and... is wonderful :) A little thing, scroller option to browse other categories images on facybox can by disabled? Thanks!!! Sort of, install v1 instead of v1.1 Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
PiLLaO Posted September 5, 2009 Share Posted September 5, 2009 ooops!!! sorry :) Thanks!!! Quote Link to comment Share on other sites More sharing options...
spiky_ Posted September 7, 2009 Share Posted September 7, 2009 hello here mano i installed fancy pics and its working fine with me, thing is i need to know which multi images add-on is used with tomatocart and can i use it with fancybox? as shown here http://www.tomatocart.com/demo/products.ph...28f3719acad2f30 than Q Quote Link to comment Share on other sites More sharing options...
spooks Posted September 7, 2009 Author Share Posted September 7, 2009 any multi images add-on can be used with fancybox there are just minor code variations if using Multiple Images for Products you would add after: <?php echo '<a rel="lightbox" title="'.$product_info['products_name'].'" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . 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>'; ?> add: <div style="display:none;"> <?php for ($i = 2; $i < 8; ++$i) { if ($product_info['product_image_' . $i] != "") { echo '<a rel="lightbox" title="' . $product_info['products_name'] . '" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['product_image_' . $i] ) . '" target="_blank"> </a>'; } } ?> </div> Note: if u use that contrib u would not need to add the javascript it adds. Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
bavautoM3 Posted September 7, 2009 Share Posted September 7, 2009 great contribution! I tried Slimbox on a clean 2.2ra2. worked like charm. Tried fancybox on a clean 2.2ra2, white blank popup. Tried both on STS enabled, both not work. the STS is now my headache. I had the exact same issue as a previous user posted, the fancybox popup was showing no image during popup. I knew the image was there because if you deleted some of the code in the header script, a standard window pops up with the image, so the correct image is being called and dislayed, just not using the jquery scripting. I went back to the fancybox website(I must have been there a dozen times) and under the usage page is the very first sentence on how to implement(I overlooked this every time I was there). http://www.fancybox.net/howto It reads... "How to implement First, make sure you are using valid DOCTYPE, this is required for FancyBox to look and function correctly." Then there is a link for what this all means, and how it needs to be on your page. Sure enough, my DOCTYPE for the product_info.php was not complaint(ie the line was missing something). http://www.alistapart.com/articles/doctype/ If you follow the link for valid DOCTYPE, there is a section for valid DOCTYPES that you should use. WARNING, because you will be specifying proper DOCTYPES, your formatting may get thrown off as mine did, this is because the browser was self correcting much if it for me before the correct DOCTYPE was used, now I had to go back and fix some references to my stylesheet.css. So keep that in mind, it may throw off your stylesheets. Do your research, back up your code, and then proceed with caution. This was a solution for me and it worked. I like the look of fancybox better than lightbox or slimbox and was determined to do it, even if it meant reading the instructions !!!!!!!! You know what they say...."If all else fails, read the directions" :) Hope this helps those who struggled so much that they gave up on fancybox. Quote Link to comment Share on other sites More sharing options...
spiky_ Posted September 7, 2009 Share Posted September 7, 2009 Mano, wt im looking for is not the popup contribution, i wanna have the same look for the extra images as the one in tomato cart !! small thumbnails under the main picture + the fancy box effect also, i used slim box and not fancy box bcz fancy box popup is always blank ! Quote Link to comment Share on other sites More sharing options...
bavautoM3 Posted September 7, 2009 Share Posted September 7, 2009 Mano, wt im looking for is not the popup contribution, i wanna have the same look for the extra images as the one in tomato cart !! small thumbnails under the main picture + the fancy box effect also, i used slim box and not fancy box bcz fancy box popup is always blank ! Did you not read my post? I had the same problem, it was always blank until I read how to properly reference the DOCTYPE Quote Link to comment Share on other sites More sharing options...
spooks Posted September 7, 2009 Author Share Posted September 7, 2009 Thanks for that, I was aware of this issue, but as I also knew it works with the default osC doctype I was unconcerned, clearly my error! :blush: Though I do not see why people would change it,unless they go to xhtml,which would be fine too! Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
spooks Posted September 7, 2009 Author Share Posted September 7, 2009 (edited) Yes check your doctype, I can confirm that all the following osC doctypes work, use one that suites: <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html <?php echo HTML_PARAMS; ?>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html <?php echo HTML_PARAMS; ?>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <?php echo HTML_PARAMS; ?>> Edited September 7, 2009 by spooks Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
spiky_ Posted September 8, 2009 Share Posted September 8, 2009 Did you not read my post? I had the same problem, it was always blank until I read how to properly reference the DOCTYPE what abt u ? Did u read my post ? i dont care if its slim box or fancy box or lighbtbox !! i'm looking for a multi image add on like the one in tomatocart !! small thumbnails under the main picture !! Quote Link to comment Share on other sites More sharing options...
spooks Posted September 8, 2009 Author Share Posted September 8, 2009 i dont care if its slim box or fancy box or lighbtbox !! You don`t seem to be reading!! You said popup is always blank which bavautoM3 replied 'its your doctype' (making it blank) which is the correct diagnosis. And I posted the valid doctypes, so change your doctype, add the code I gave & hey presto it will work!! Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
spiky_ Posted September 8, 2009 Share Posted September 8, 2009 You don`t seem to be reading!! You said popup is always blank which bavautoM3 replied 'its your doctype' (making it blank) which is the correct diagnosis. And I posted the valid doctypes, so change your doctype, add the code I gave & hey presto it will work!! okay, after pasting the right code for fancybox, will i have the same multi images add-on im looking for ? NO, it will not !! please read well before talking to me with that bad tone !! Than Q any ways Quote Link to comment Share on other sites More sharing options...
Guest Posted October 6, 2009 Share Posted October 6, 2009 Excellent contribution. Thanks Mr Spooks :D One note for anyone using OSCThumbs - Do not enable encryption. It will cause the popup to be filled with garbage text. Quote Link to comment Share on other sites More sharing options...
spooks Posted October 6, 2009 Author Share Posted October 6, 2009 using OSCThumbs - Do not enable encryption. It will cause the popup to be filled with garbage text. Yes this is an issue I will resolve as soon as I`ve found the solution Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
kinnikinnikbear Posted October 12, 2009 Share Posted October 12, 2009 Hi, I've had "On the Fly Auto Thumbnailer with GD library" installed on my store for awhile, and recently installed "Multiple Images with Products". Then installed "Fancy Pics- Fancy Image Popups" - Which works great except my enlarged pics are not as smooth as with the standard javascript popup. The enlarged pics with the Fancy box effect are more pixilated and appear to be randomly sized (???)- not the image sizes I have saved - the path it's pulling from should be a sized, sharp pic. Question - does On the Fly Thumbnailer work with this contribution? I like the Fancy Box effect - just not the images I'm seeing. Thanks for any information! Quote Link to comment Share on other sites More sharing options...
spooks Posted October 12, 2009 Author Share Posted October 12, 2009 I've had "On the Fly Auto Thumbnailer with GD library" installed on my store for awhile, and recently installed "Multiple Images with Products". Then installed "Fancy Pics- Fancy Image Popups" - Which works great except my enlarged pics are not as smooth as with the standard javascript popup. The enlarged pics with the Fancy box effect are more pixilated and appear to be randomly sized (???)- not the image sizes I have saved - the path it's pulling from should be a sized, sharp pic. Question - does On the Fly Thumbnailer work with this contribution? I like the Fancy Box effect - just not the images I'm seeing. The final image is un-altered from the file given, so it would be On the Fly Thumbnailer causing your issue, I have had problems with other packages with that b4 due to some of the coding used & the way it some times ignores parameters past!! I only recommend osCthumb for thumbnailing (without its filename encryption option) currently. There is Simple Multi Image Add-on (Un-Limited) with Fancy Popups http://addons.oscommerce.com/info/7008 which uses the same popup, plus allows browsing multi images within same popup, perhaps that would solve your issue? Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
kinnikinnikbear Posted October 12, 2009 Share Posted October 12, 2009 Thank you Spooks! Thought that was most likely the issue - I've also previously had "On the Fly thumbnailer" cause a conflict with another contribution. At this point I will uninstall "On the Fly" and either install "OsCthumb" or make my own thumbnails. Didn't realize it at the time but I did install your "Simple Multi Image Add-on (Un-Limited) with Fancy Popups" before I installed Multiple Images and was having problems with the Fancy popup pictures then. Now I'm sure it was "on the Fly" conflicting there too. I'll revisit "Simple Multi Image Add-on (Un-Limited) with Fancy Popups" once I get "on the fly" uninstalled. Thanks for both contributions!Very Nice :thumbsup: Quote Link to comment Share on other sites More sharing options...
kinnikinnikbear Posted October 13, 2009 Share Posted October 13, 2009 I recently uninstalled "on the Fly thumbnailer", and installed osCthumb because of the FancyBox popups showing a pixilated and rezied image. Still seeing the same issue with FancyPics BUT only in IE, in FireFox the pics look great. I've already added the "fixes" for the IE8 showing a blank popup/black borders. Has anyone seen this issue? Doing a search on Google shows other sites having the same problem with IE/Fancy box showing degraded pics, but have seen a solution. Quote Link to comment Share on other sites More sharing options...
spooks Posted October 13, 2009 Author Share Posted October 13, 2009 (edited) I recently uninstalled "on the Fly thumbnailer", and installed osCthumb because of the FancyBox popups showing a pixilated and rezied image. Still seeing the same issue with FancyPics BUT only in IE, in FireFox the pics look great. I've already added the "fixes" for the IE8 showing a blank popup/black borders. Has anyone seen this issue? Doing a search on Google shows other sites having the same problem with IE/Fancy box showing degraded pics, but have seen a solution. I don't see this issue in my tests, what I do note is that if the viewport is smaller than the image then fancybox will scale it proportionally, whether firefox or ie (though it does scale slightly smaller for ie) Are your images bigger than your viewport? you can turn off this feature with: 'imageScale': false, Edited October 13, 2009 by spooks Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. 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.