Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows and more...

Knowledge Base support case for Likno Web Modal Windows,  abstracted and stripped of all user’s private info.

Initial Email From: Paolo
Initial Email Subject: modal builder 
Support Case Month: February 2013

Hello Kostas,

Is it a known issue to you that fancybox script is not working if modal window is in the same page??

Regards,
Paolo

Reply From: Likno Customer Support

Dear Paolo,

Fancybox is using a very old jQuery version that conflicts with the one we are using.

Please try replacing this:

<script type="text/javascript" language="javascript" src="fancybox/jquery.js"></script>

With this:

<script type="text/javascript" language="javascript" src="/bas2/bas-forms-en/modal/jquery.js"></script>

I assume that Fancybox will indeed run with the newer jQuery version. Let me know if this worked.

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Reply From: Paolo

Ok I shall try and let you know.
Many thanks,
Paolo

Knowledge Base support case for AllWebMenus,  abstracted and stripped of all user’s private info.

Initial Email From: Rich
Initial Email Subject: Open FancyBox Window from AllWebMenu
Support Case Month: February 2013

I am trying to open a FancyBox window from an AllWebMenus item.  As you may know, Fancy Box is a Javascript tool similar to LightBox.

With a normal text link, I would give the link an ID, then insert the FancyBox code in the header - see sample below.  However, I have tried doing this with AllWebMenus and have not been able to make it work.  Can you provide any insight? 

Thanks,
Rich

Sample FancyBox Code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
            $("#linkIDHere").fancybox({
                'width': 455,
                'height': 375,
                'padding': 1,
                'autoScale': true,
                'transitionIn': 'elastic',
                'transitionOut': 'none',
                'type': 'iframe'
            });
        });
</script>

Reply From: Likno Customer Support

Dear Rich,

This should work if the specific menu item is set to “HTML – Full Mode”:

Did you try this? If you did and it does not work, can you send me the URL so that I can check it?

Best Regards,
Aris Filokostas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Knowledge Base support case for Likno Web Modal Windows Builder,  abstracted and stripped of all user’s private info.

Initial Email From: Paolo
Initial Email Subject: modal builder 
Support Case Month: March 2013

Hello Kostas,

I have a question. Modal windows can be used to enlarge images like it does fancybox for example?
If yes how do I do it?

Many thanks,
Paolo

Reply From: Likno Customer Support

Dear Paolo,

Fancybox does not enlarge images itself. I guess what you mean is that you can click on a thumbnail and view the big image. Of course you must already have the images and thumbnails yourself.

In order to do this with Modal Windows you need to:

1) set the modal window to “Make certain links/forms in page open this window”:

2) For each image in your page, you need to have the following code:

<a href="#bigimage1" target="Modal_Window_1_single"><img src="thumbnail1.jpg"></a>
<img id="bigimage1" src="bigimage.jpg" style="display: none;">

If you the modal window to have all the images (multi-sheet) and open in the specific image sheet, then just change this:

<a href="#bigimage1" target="Modal_Window_1_single">
     <img src="thumbnail1.jpg">
</a>

into this:

<a href="#bigimage1" target="Modal_Window_1_multi_links">
     <img src="thumbnail1.jpg">
</a>

You will find more information and samples in the “Content” area.

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!