HoverBox 3 - Official Thread

I love Hoverbox. So... I'd like to make a pie-in-the-sky feature request.

I'm again trying to think of good ways to allow my customers to view larger images -- namely sample comic book pages I would like them to read -- using HoverBox.

One thing I've seen are the use of iframes.

http://www.nickstakenburg.com/projects/lightview/

Would it be possible to add this to Hoverbox for extra large images? Ideally as a button, like a fullscreen mode, on the regular automatically sized images?

(Another very cool thing I've seen in a light-box is a true full-screen mode:

http://digital.marquecreative.com/2008/08/introducing-swf-lightbox/

but I think that uses different coding that Hoverbox....)

Obviously, it's a lot easier to ask for a feature than it would be to code it, but perhaps if others are interested we can make it happen. :smile:

cwcgroup:

I'm sorry, but being new to ZEN-cart, I find the uploading/installation instructions vague :blink::

There are many folders and files in the unzipped folder. What gets uploaded and to where. I am assuming the the root of the store? replacing the template folde with the currently active template folder escapes me :huh:. Can you please clarify this. I am just setting this up on a test site on my local system using XAMPP, etc, and that is all good. Just need some assistance at putting things where they should be.

Thanks in advance.

Dave

I am very new to Zencart and I really dont understand the instructions to get this feature onto my site. Are there any more simpler instructions?

Hi, quick question for you. I recently posted this thread for Lightbox support

A new user here, we have a new zencart that has been implemented and i installed he zen lightbox yesterday. Works like a charm, however i have 1 issue, that perhaps someone could shed some light

1- If my product has no attributes defined, the lighbox works fine. ex here

2- However if my product has attributes defined, the image still opens up in a pop up. Ex here

We use the same product image for the attributes but for some reason the lighbox wont be triggered for these products.

Please any suggestions would be great

Thanks

I was wondering if I use the Hover Light bow, Would that solvethis issue. I can't seem to get any products with Attribute images come up in the Lightbox. I am hoping that with your software I would be able to.

Also, are you able to click on the product image rather than the button?

Please let me know

Ameet

Firstly, GREAT contrib!!!

Secondly, is there any way to change the speed that the window "zooms" at (IE: Make it faster) ?

Forgot to add :

As well as wanting to speed up the window hoverbox opening if possible I have also noticed the following bug :

If you have scirpting disabled in IE the, on a product info page, you get two product images instead of one.

dealbyethan; How did you get it to work on the whole page ? :blush: Also you have a great site ! :thumbsup:

I really like this mod from what I have seen on the other sites using it. Being new to Zen I am trying to understand the directions.

*"Upload the files in their existing structure, **replacing YOUR_TEMPLATE_FOLDER with your currently active template *folder."

1. What is the location of the folder I would upload to (I am using the iC_AthemeV1.3 template)

A newby version of this would be great!
I read through the thread but if I messed it that would be awesome !!!:clap:

Hi there,

I got a problem which I am not sure if it is related to Hoverbox3 or IH2.

could you take a look at my site: https://www.electronicgiftshop.co.uk

When you hold the mouse over an image it displays it in the top left hand corner instead of next to the image.

Its the same for IE7 and FF

Thanks in advance for any help.

Regards

Lee

I read this thread almost line by line. I have Image handler and HoverBox3 installed along with other mods. The hover affect in image handler works fine, but I also use the image handler to upload additional images to the products. Now the Additional images are not showing in the product info page. I tried to remove the script for this mod and they showed up again but I lost the hoverbox. Is it possible to have both of the additional images and the hoverbox to work in the same environment.

Also when the image is enlarged the window the navigation will display 1/2images when there is only one image for the product. That applied to every single product on the store.

Upgraded my ZC v. 1.3.7 from HoverBox 2 to HoverBox 3.

Everything works nice (I also have IH 2 installed) - no conflicts.
The only problem (someone did have the same problem in this forum but it never got answered) that I get no rounded corners in Internet Explorer, they do work fine in Firefox. I tried to clear cache but it didn't help.

Site:
http://www.capresso-store.com/

Did anyone had the same problem? Solution? Thanks.

all4coffee:

Upgraded my ZC v. 1.3.7 from HoverBox 2 to HoverBox 3.

Everything works nice (I also have IH 2 installed) - no conflicts. The only problem (someone did have the same problem in this forum but it never got answered) that I get no rounded corners in Internet Explorer, they do work fine in Firefox. I tried to clear cache but it didn't help.

Site:
http://www.capresso-store.com/

Did anyone had the same problem? Solution? Thanks.

Never mind. While working with this updated version HoverBox3 I notices that it also generates page errors in IE, also slightly misalligns product page spacing, causing a tiny glitch there when it is loading. Too bad that iChoze people are in general not very responsive to issues... I reversed back to HoverBox2 which is working fine (no rounded corners though but I wasn't getting them anyway in IE...)

I'm using jQuery on the site I'm working on. I noticed that when I added hoverBox3 it started giving errors. I looked at the js for HB3 and it was all base62 encoded. After decoding it, I found that the larger js file is simply Prototype+Sciptaculous.

Prototype also uses the $() function.

I resolved the issue by renaming all instances of $() to $PT() in both HB3 js files and repacking them.

I'd like to convert HB3 to jQuery if I get the time, though I don't think I plugin should really include an entire JS framework in it. It should just be listed on the pre-reqs that so and so framework is required.

Just thought I'd mention it since HB3 is nice and jQuery is popular. I searched the forums and couldn't find a solution right away. Hopefully someone may find this useful.

Magnificent add on...works amazingly...

Thanks a lot...

Hi all,

I have had Hoverbox 3 working superbly now for some time... until now!

I decided I wanted some of my banners to be rotating images that fade in and out using jscript.

I decided to use the "Ultimate Fade-In Slideshow" script available here : http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I placed the main function in my jscript director (after removing the <script> tags) and called the function from the banner HTML code.

It worked just fine but only for the index page! Whenever you tried to click on a product it would crash IE7 with an "Operation Aborted" error. However it worked fine with Firefox and Safari!

With the help of a fellow zenner (cheers Tony) we managed to whittle it down to a conflict with mootools being used by Hoverbox. If you disable Hoverbox 3 it works just fine in IE!

He even went as far as finding a link with instructions on how to fix the problem.

Here is the link : LINKY

Now my question is, how can this fix be integrated into Hoverbox 3?

Thanks so much in advance for any help with this!

Is there a fix to IE 8, looks like it does not work with IE8

I've met some weird situation.

When I click "larger image," Some large pictures come with Product Titles & Product Prices normally, but some large pictures don't.

I've try to uninstall & reinstall, but it doesn't help.

Having an issue with Hover Box 3, the rounded corners and the close do not show up in firefox or IE...

heavy construction so please wear your hard hat. lol..
this is the only product that has an image at this time..

https://www.police-equipment-worldwide.com/store/general-gun-locks-racks-c-1_10/universal-lock-p-1

in fact the product name doesnt show up like in all the examples I see either.

I am getting the same problem - any ideas / solutions ?

TIA.

manzili:

Hi all,

This is a great contribution.

However, I have problem on installing it.

1. when i installed the sql codes, there wasn't a success message but instead, these came out from the screen:

Query Results:
SET @hoverboxold=0;
SELECT (@hoverboxold:=configuration_group_id) as hoverboxold FROM configuration_group WHERE configuration_group_title= 'HoverBox2';
DELETE FROM configuration WHERE configuration_group_id = @hoverboxold;
DELETE FROM configuration_group WHERE configuration_group_id = @hoverboxold;
SET @hoverbox=0;
SELECT (@hoverbox:=configuration_group_id) as hoverbox FROM configuration_group WHERE configuration_group_title= 'HoverBox 3';
DELETE FROM configuration WHERE configuration_group_id = @hoverbox;
DELETE FROM configuration_group WHERE configuration_group_id = @hoverbox;
INSERT INTO configuration_group VALUES (NULL, 'HoverBox 3', 'HoverBox 3 Configuration Options', '1', '1');
UPDATE configuration_group SET sort_order = last_insert_id() WHERE configuration_group_id = last_insert_id();
SET @hoverbox=0;
SELECT (@hoverbox:=configuration_group_id) as hoverbox FROM configuration_group WHERE configuration_group_title= 'HoverBox 3';
INSERT INTO configuration (configuration_id, configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, last_modified, date_added, use_function, set_function) VALUES (NULL, 'Enable HoverBox?', 'HOVERBOX_ENABLED', 'true', 'If set to true, all your product images will display using the HoverBox effect when viewing larger images.
If additional products exist, they will be presented in a slideshow fashion. Customers have the option to go through them manually or via the autoplay function.

Default: true
', @hoverbox, 10, NOW(), NOW(), NULL, 'zen_cfg_select_option( array(''true'', ''false''), '), (NULL, 'Include Product Title?', 'HOVERBOX_DISPLAY_TITLE', 'true', 'If set to true, the title of your product will be included below your product image.

Default: true
', @hoverbox, 20, NOW(), NOW(), NULL, 'zen_cfg_select_option( array(''true'', ''false''), '), (NULL, 'Include Product Price?', 'HOVERBOX_DISPLAY_PRICE', 'true', 'If set to true, the price of your product will be included below your product image.

Default: true
', @hoverbox, 30, NOW(), NOW(), NULL, 'zen_cfg_select_option( array(''true'', ''false''), '), (NULL, 'Include Product Description?', 'HOVERBOX_PRODUCT_DESC', 'false', 'If set to true, the products description will be included below your product image. You can limit the number of characters as well.

Default: false
', @hoverbox, 40, NOW(), NOW(), NULL, 'zen_cfg_select_option( array(''true'', ''false''), '), (NULL, 'Product Description Limitation', 'HOVERBOX_MAX_DESC_LENGTH', '200', 'Limit the number of characters for the product description displayed, if enabled.

Default: 200
', @hoverbox, 50, NOW(), NOW(), NULL, NULL), (NULL, 'Z-Index of HoverBox?', 'HOVERBOX_ZINDEX', '5000', 'This is the layer at which HoverBox resides on the page while viewing your product images. Change this to a higher value if your having problems with anything protruding into your effect.

Default: 5000
', @hoverbox, 60, NOW(), NOW(), NULL, NULL), (NULL, 'Use Smart Image Resizing?', 'HOVERBOX_SMART_RESIZE', 'true', 'If smart resizing is enabled, HoverBox will resize the image if it is to big to fit within the viewable browser area. Basically this keeps the entire image within view, even if it is too big for the screen.

Default: true
', @hoverbox, 70, NOW(), NOW(), NULL, 'zen_cfg_select_option( array(''true'', ''false''), '), (NULL, 'Background Color of HoverBox Contents?', 'HOVERBOX_BACKGROUND_COLOR', '#ffffff', 'This is the background color for the HoverBox itself. Where your product image resides when viewing a larger view.

Default: #ffffff
', @hoverbox, 80, NOW(), NOW(), NULL, NULL), (NULL, 'Enable Overlay?', 'HOVERBOX_OVERLAY_ENABLE', 'true', 'While viewing a product image, your store is overlayed with a background color (or image on the Mac, overlay.png). You can enable/disable this functionality if you so choose.

Default: true
', @hoverbox, 90, NOW(), NOW(), NULL, 'zen_cfg_select_option( array(''true'', ''false''), '), (NULL, 'Background Color of Page Overlay?', 'HOVERBOX_OVERLAY_BACKGROUND', '#000000', 'This is the background color for the overlay that covers your page while HoverBox is active, for compatibility purposes FireFox & Safari on the Mac use overlay.png located in your template images folder inside the hoverbox folder.

Default: #000000
', @hoverbox, 100, NOW(), NOW(), NULL, NULL), (NULL, 'Overlay Background Opacity?', 'HOVERBOX_OVERLAY_OPACITY', '0.85', 'The opacity of the overlay used while HoverBox is active. If the number is less than one, be sure to include the leading zeroes.
Default: 0.85
', @hoverbox, 110, NOW(), NOW(), NULL, NULL), (NULL, 'Padding for HoverBox Contents?', 'HOVERBOX_BORDER_SIZE', '10', 'The padding, or spacing of the inner-contents of HoverBox

Default: 10
', @hoverbox, 120, NOW(), NOW(), NULL, NULL), (NULL, 'Radius of Rounded Corners?', 'HOVERBOX_CORNER_RADIUS', '10', 'Without using images, HoverBox has the ability to have rounded corners. The higher the value, the more rounded the corners will render. Set to 0 for no rounded corners.

Default: 10
', @hoverbox, 130, NOW(), NOW(), NULL, NULL), (NULL, 'HoverBox Close Button Opacity - Normal?', 'HOVERBOX_CLOSE_NORMAL', '0.65', 'The initial opacity of the close button used by HoverBox.

Default: 0.65
', @hoverbox, 140, NOW(), NOW(), NULL, NULL), (NULL, 'HoverBox Close Button Opacity - Hover?', 'HOVERBOX_CLOSE_HOVER', '1', 'The opacity of the close button used by HoverBox during mouseover.

Default: 1
', @hoverbox, 150, NOW(), NOW(), NULL, NULL), (NULL, 'Additional Images - End-to-Beginning?', 'HOVERBOX_END_BEG', 'false', 'Allow customers to loop to the beginning of the images from the last image. This does not pertain to the autoplay function.

Default: false
', @hoverbox, 160, NOW(), NOW(), NULL, 'zen_cfg_select_option( array(''true'', ''false''), '), (NULL, 'Enable Slideshow Feature?', 'HOVERBOX_SHOW_SLIDE', 'true', 'If you have additional product images or other views of your product, this option enables/disables the slideshow functionality.

Default: true
', @hoverbox, 170, NOW(), NOW(), NULL, 'zen_cfg_select_option( array(''true'', ''false''), '), (NULL, 'Slideshow Interval (seconds)?', 'HOVERBOX_SLIDE_DELAY', '5', 'The time, in seconds, to display each image in the slideshow.

Default: 5
', @hoverbox, 180, NOW(), NOW(), NULL, NULL), (NULL, 'Additional Image Text - Image 1 of 10?', 'HOVERBOX_IMG_NUMBER', 'Image #{position} of #{total}', 'Sets the "Image 1 of 2" text when there is more than one image.

The text is replaced with a regular expression: #{position} is the number of the current image, #{total} is the total number of images.

Examples:
Image #{position} of #{total} - default English
Image #{position} (of #{total}) - English variation
Imagen #{position} de #{total} - Espanol
Immagine #{position} di #{total} - Italian
Bild #{position} von #{total} - German
Image #{position} de #{total} - French
イメージ #{position} の #{total} - Japanese

Default: Image #{position} of #{total}
', @hoverbox, 190, NOW(), NOW(), NULL, NULL);

> 
> 
> 2. I am new to Zen + reading the ReadMe  was a bit confusing. Can you please clearly explain on how to install this mode? On which destination are the folders to be copied to.
> 
> 3. [\*\*My site\*\*](http://www.myfirstep.com/store)
> 
> Hope u can help ASAP.
> 
> THANKS..

Ok, I tried the uninstall script and then the install script again and it worked !
Previously I was not getting the HB3 link in the Configurations menu at all.

wallp:

I am getting the same problem - any ideas / solutions ?

TIA.

jgdovin:

Having an issue with Hover Box 3, the rounded corners and the close do not show up in firefox or IE...

heavy construction so please wear your hard hat. lol..
this is the only product that has an image at this time..

https://www.police-equipment-worldwide.com/store/general-gun-locks-racks-c-1_10/universal-lock-p-1

in fact the product name doesnt show up like in all the examples I see either.

The produce name started showing up but still no rounded corners or close button, anyone have any ideas?