Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Fancy Pics - Fancy Image Popups / Previews


spooks

Recommended Posts

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 by spooks

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

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 }  ?>

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

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 by nudylady
Link to comment
Share on other sites

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.

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

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.

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

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

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

 

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.

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

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.

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 

 

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!

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

 

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 by spooks

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

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 !!

Link to comment
Share on other sites

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!!

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

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

Link to comment
Share on other sites

  • 4 weeks later...

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.

Link to comment
Share on other sites

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

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

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!

Link to comment
Share on other sites

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?

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

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:

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by spooks

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

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...