overLIB - HowTo?

[MissterX]

Hi!

This one is per request.

How do you implement overLIB in Zen-Cart? This is how I did it...

Installation:
1) Download the overLIB package from http://www.bosrup.com/web/overlib/?Download
2) Extract the files and copy overlib.js to includes/templates/template_default/jscript/ directory
3) IMPORTANT: Rename overlib.js to jscript_overlib.js
4) IMPORTANT: Copy includes/templates/template_default/common/tpl_header.php to includes/templates/*my_template*/common/ directory
5) Edit includes/templates/*my_template*/common/tpl_header.php
5a) Find text: <!--bof-header logo and navigation display-->
5b) On the next row (before start-php-tag) insert: <div id="overDiv" style="position:absolute; visibility:hidden; z-index:10000;"></div>
5c) Save

Now, implemetation:
6) Choose a text, it might be the header of the sideboxes, the site's slogan, image or whatever as long as you can apply the anchor tag around it.
7a) Type before item selected in 6) <a href="javascript:void(0)" onMouseOver="return overlib('This text shows on mouseover');" onMouseOut="return nd();">
7b) Type after item selected in 6) </a>
7c) Save and test

NOTE: In 7a, the default action when clicking on a overLIBbed link is "no action". The text "javascript:void(0)" can (and sometimes is desired) to link to a page. That's OK - just replace it with your ULR and click it.

Common trap - try to avoid it:
Since it's a javascript function and you might want to insert the ' or the " qutoation character in the text 'This text shows on mouseover' it will generate a javascript-error.

Common trap solution:
Use javascript in appropriate place, i.e.
<script type="text/javascript">
var display_text = "This text shows on mouseover 'til I remove the mouse";
</script>
Replace the text 'This text shows on mouseover' (including the ') with display_text and you'r on the road again.

Customizing overLIB:
RTFM (Read The Fine Manual) @ http://www.bosrup.com/web/overlib/?Documentation

[kebeid]

Hey Thanks MissterX that solved my overlib problem. It now works with all the options and stuff.

[voltage]

Hate to be a party pooper, but take into consideration that the javscript for this is 50+kb which is a pretty hefty price to pay for a little cool feature. I did a quick google for javascript tooltip and here is a much more simplized one that is about 2kb (if you just want the tooltip feature).

http://www.felgall.com/jstip18.htm

[MissterX]

Hate to be a party pooper, but take into consideration that the javscript for this is 50+kb which is a pretty hefty price to pay for a little cool feature. I did a quick google for javascript tooltip and here is a much more simplized one that is about 2kb (if you just want the tooltip feature).

http://www.felgall.com/jstip18.htm

That's not the way I see it.

What you pointed out is another - allas smaller, without all the bells and wistles - version.

Thanks!

[MissterX]

Over 7 minutes has gone on the coffe break...

...the way I see it.

What you pointed out is another - allas smaller, without all the bells and wistles - version.

One thing to take in consideration of overLIB - despit it's size - is the functionality: in IE you have to hide certain form elements to have the tooltip appear OVER the elements. IE bug #??? The tooltip you pointed out has not solved that - and other problems.

I'm not pro overLIB or Extended Tooltips. I just use the tool that solves my problem best, in this case it's overLIB - which I Zenned :)

Thanks!

[voltage]

Yeah, it seems like if you want anything to work properly in IE it requires big code and lots of fixes . My only point was with this and with other things like big, bloated javascript dhtml menus, make sure you can justify the large increase in size. If it is necessary for your site, and for some it is, then by all means use it. But if it is only for the cool effects, from a business standpoint, its worth reconsidering. Cool menus and effects have not been proven to make sales and $$$ (unless you are a webdesigner :)), but smaller, more accesible websites do.

Anyways, Good luck!

[dontknowwhatimdoing]

I'm currently trying to find a function like Overlib to use on my product listing pages

I figure I'll need to edit:
this => tpl_modules_product_listing.php
& / or maybe this => product_listing.php (the sub-file)

I tried to customize the image swap function, but it's just too much for me. It doesn't do exactly what I want either.

The challenge here is to get something like Overlib to work on the product listing page--not the product info page. This way the user can preview many products, without the need to go to the product detail page in order to view the larger image.

I figure there may be other zen cart users out there that want to do this; however, I've searched & I can't find a mod for this.

I'm only going to use 2x images per SKU (there's thousands of SKUs in my case), so I think the code for the pop-up image can be generic, and I can probably just edit the string of the image name to insert _LRG before .jpg on each image preview javascript function (I will only use 2 images sizes, so to include the large image in a function, I only need to insert _LRG before the ".jpg".

Is there already an existing module to allow an image popup on mouseover? Or has anyone else implemented overlib on the product listing page to display previews of many/ multiple prodcuts?

[Dasha]

I'm having trouble with this. http://www.zen-cart.com/forum/showth...345#post617345

[dontknowwhatimdoing]

I'm currently trying to find a function like Overlib to use on my product listing pages

I figure I'll need to edit:
this => tpl_modules_product_listing.php
& / or maybe this => product_listing.php (the sub-file)

I tried to customize the image swap function, but it's just too much for me. It doesn't do exactly what I want either.

The challenge here is to get something like Overlib to work on the product listing page--not the product info page. This way the user can preview many products, without the need to go to the product detail page in order to view the larger image.

I figure there may be other zen cart users out there that want to do this; however, I've searched & I can't find a mod for this.

I'm only going to use 2x images per SKU (there's thousands of SKUs in my case), so I think the code for the pop-up image can be generic, and I can probably just edit the string of the image name to insert _LRG before .jpg on each image preview javascript function (I will only use 2 images sizes, so to include the large image in a function, I only need to insert _LRG before the ".jpg".

Is there already an existing module to allow an image popup on mouseover? Or has anyone else implemented overlib on the product listing page to display previews of many/ multiple prodcuts?

I wrote my own module to do this. It turns out Zen Cart had nothing like what I needed. My script is quite short/ concise, although unfortunately it added a significant amount of overhead since zen cart doesn't store image sizes.

[Dasha]

I really really appreciate you trying to help me - it is actually on my attributes page that we are wanting this (product details page...sort of) - we have tabbed browsing so it is a but confusing to explain unless you go to the page. Check it out for yourself if you don't mind - it will help you understand what my issue is -

http://www.planet3press.com/brochure...brochures.p.91

just "roll over" the question marks by the attributes. I am dynamically loading the content fine - just none of my styles are applying and it is showing up ALL crazy in different browsers.