New snippet Fancy-Box

[vyni]

Hi there!

For all non-german-speaking users:

I would like to inform You that Maruk made a new snippet, called Fancy-Box.
See the Website here.

Here is the original thread in german.

With this package You are able to use this amazing script in any page You like. Just download and install as usual in WB. On the page wehre You want to use it, set a section code and call the function. That´s it.
For the design and saving space I modified the code-appearence. See the screenshot.
I included the modified file. Just copy the modify.html to the folder modules/code in Your server and You are done. This will change the code-section to a single-line-view, but not affect any code, if in use somewhere in Your site. - For further code sections with more lines You should use CODE2 - if You don´t have it already, download it here.

There are 5 classes already predifined:

fb - use fancy-box with standard-values
pic_fb - for pictures, closing on klick into the pic or cross
pic1_fb - for pictures, closing on klick into the pic or cross, darkens the background
page_fb - for urls, closing only with click on the cross, some pages braek out when surfing, some stay in
video_fb - set link to anchor, size predifined to 425 x 355 px

and further more, there is a sample-configuration for a <div id="use_fb">
all links innert this <div> will be displayed by Fancy-box, no matter if class is set or not. The default-configuration will be used (size, effect) - if You want specific effects, use classes. Or make Your own configuration in the include.php

For now I didnot make display-groups, for "surfing" the links, but this is also possible.

More configurations can be stored in the include.php

Example how to use to display a YouTube-video:

The first section of the page must be type CODE - in this section write

Code:

use_fancy_box();

and save. In a wysiwyg-section add a link.
Add the corresponding class to the link.
Code:

<a class="video_fb" href="#testube">See this video</a>

save. Add a further section - type CODE2, set it to html and insert the following code

Code:

<div style="display: none;" id="testube" />
<object height="355" width="425" />
<param name="movie" value="http://www.youtube.com/v/nnpv3FhIVXk" />
<param name="wmode" value="transparent" />
<embed height="355" width="425" src="http://www.youtube.com/v/nnpv3FhIVXk" type="application/x-shockwave-flash" wmode="transparent" />
</embed></object>
</div>

and save. Finished.


Example how to use fancy-box with an image-link:

The first section of the page must be type CODE - in this section write

Code:

use_fancy_box();

and save. In a wysiwyg-section add a link.
Add the corresponding class to the link.

Code:

<p><a href="http://localhost/wb/media/testfotos/kugelsunsetglow.jpg" class="pic_fb"><img height="171" border="0" width="200" src="http://localhost/wb/media/testfotos/Bar_kl.jpg" alt="" /></a></p>

save. Finished.


regards from Himberg, next to Vienna

[Argos]

Cool! Thanks 

I wonder... this would be nice to use together with the News module as well. Click on a title link, and the complete news item pops up. Would this be possible to do somehow?

[vyni]

Hi Argos,

Yes, no problem.

Just try it out.

Create a usual link (<a href="http://DOMAIN/pages/news.php" class="seite" >News</a>), activate FB as explained, and the news are shown in a Box.

As long as You read the news, even You follow links, it stay´s inside this box. If You click annother menu-link, the box dissapears. (Because of the framebraking feature of WB I think)

regards from Himberg

[chio]

I am not very happy with the class names.

they should be something like "fb_mode1" or "fb_page"
Why not use the original names?

There might be classes like "bild" in templates allready and - of course - "bild" is quite german.

[vyni]

Jo, chio
however - You could change this to whatever You like in the include.php.

If german or not - "bild" will be in classes only, if someone uses german.


Annother example for fancy-box combined with anynews

Just be creative and share Your results.


regards from Himberg

[Argos]

Annother example for fancy-box combined with anynews

Hi vyni,

this shows the complete site in a popup, but I meant to show only the long content of the news item 
Do you know how to do that?

[Ruud]

this shows the complete site in a popup, but I meant to show only the long content of the news item 
Do you know how to do that?

Use a blank template for the newspage?

@vyni

I installed the snippet and like it
I put it on a new customer website, and the site didn't show anymore

I will try to explain what happened:

The snippet start with a blank line before the <?php
This causes WB to send data (a blank line) before a page is ever built.
My customers website starts with a menu-link page that executes a redirect to the /nl/ pages.
The redirect failed because PHP said that there was already data being sent.
The production site has PHP errors off, so all I got was an empty page.

Solution, always make sure that snippets have no data between outside <?php and ?>

Ruud

[vyni]

Thank You, Mr. Ruud

for making me a little bit more clever. 

This only could happen, because Maruk isn´t that experienced in making snippets or modules. Me for myself, I don´t even understand the differnce between snippet and modul. I´m just a helping hand.

But now I am appeased, because You had a look on it.
I will clean up and renew the description, also using more FB-specific class-names as chio propound.

At least - this is really a very very nice thing.

@Argos
Ruud had the answer - for the news itself use a blank template and put them on a hidden page. Create a normal page type code and use the snippet anynews for displaying the overview and extend the include.php as described. The resullt will be what ever You want. See a Demo

regards from Himberg

[albatros]

Hi all,

and again, a blind man talking about colors. 

I love the fancy-box, but I also whant to get valid pages. here is, how it works for me:

I took this

Code:

<link rel="stylesheet" href="<?php echo WB_URL; ?>/modules/fancy_box/box/fancy_css.php?wbp=<?php 

echo WB_URL; ?>" type="text/css" media="screen" />

from the include.php of the modul to the index.php of my template.

And then I changed the syntax in the inlude.php here and there a little bit

Code:

<?php
$debug = false;
if (true == $debug ) {
    ini_set('display_errors', 1);
    error_reporting(E_ALL);
}
if (!function_exists("use_fancy_box") ) {
    function use_fancy_box() {
    ?>
    <script language="JavaScript" type="text/javascript" src="<?php echo WB_URL; ?

>/modules/fancy_box/box/jquery.js"></script>
    <script language="JavaScript" type="text/javascript" src="<?php echo WB_URL; ?

>/modules/fancy_box/box/jquery.fancybox.js"></script>
    <script language="JavaScript" type="text/javascript" src="<?php echo WB_URL; ?

>/modules/fancy_box/box/jquery.pngFix.js"></script>
     
    <script language="JavaScript" type="text/javascript">
    $(document).ready(function() { $("a.fb").fancybox();
    $("a.page_fb").fancybox({ 'hideOnContentClick': false,
                            'zoomSpeedIn':0,
                               'zoomSpeedOut':300 });
    $("a.pic_fb").fancybox({ 'hideOnContentClick': true });
    $("a.pic1_fb").fancybox({ 'hideOnContentClick': true,
                            'overlayShow': true });    
    $("a.video_fb").fancybox({ 'overlayShow': true,
                               'frameWidth': 425,
                               'frameHeight': 355 });
    $("div#use_fb a").fancybox();
    });
    </script>
    <?php
    }
}
?>

The result is "This document was successfully checked as XHTML 1.0 Transitional!" 

[vyni]

Great,

have You tested it in google-chrome?

It isn´t working for me right now.
Do You have an url where to see ??

But remember: If You call it directly from the template - You will get troubles with one or annother modul! Maybe Lightbox, maybe Imageflow, maybe annother?

regards from Himberg

[albatros]

Hi vyni,

you got a pm.

[vyni]

Great - it works in chrome!

[albatros]

I use Lightbox2 on the second page of the site "aufteilung..." and there seem to be no problems.

[albatros]

But remember: If You call it directly from the template - You will get troubles with one or annother modul! Maybe Lightbox, maybe Imageflow, maybe annother?

Just forgotten,

the general solution for that is the use of a frontend.css, as matthias tould you in the german thread about fancy-box.

Regards

Uwe (going to eat now)

[albatros]

Hi Vyni,

one question. I tested fancybox successfully with "Code". You prefer "Code2". What is the reason?

Thanks in advance!

Uwe

Edit: and a second qustion. I had a closer look at fancybox in Opera and the effect was different from IE and FF3. The popups are opening in a different position, much closer to the bottom. 
My changes or the js or opera?

Edit01: I tried the examples at http://fancy.klade.lv/ in Opera and none of them is working in Opera. 

[albatros]

Hi Vyni,

one question. I tested fancybox successfully with "Code". You prefer "Code2". What is the reason?

Thanks in advance!

Uwe

Edit: and a second qustion. I had a closer look at fancybox in Opera and the effect was different from IE and FF3. The popups are opening in a different position, much closer to the bottom. 
My changes or the js or opera?

Edit01: I tried the examples at http://fancy.klade.lv/ in Opera and none of them is working in Opera. 

Edit2: WHAT is that? The are working, but they are opening much, much deeper, much closer to the bottom of the (long) page. So you only can see them, when you are scrolling down. Mysterios!

[vyni]

Hi Albatros,

For the issue in opera: I really don´t have a clue. But there are a lot more browsers out there....
And if there is something in the "owners-page", than I guess, it is something with the Javascript itself. Or just a failure from opera. Who know´s?

  I´m thinking of a script which identifies the browser and in case it isn´t FF or IE there must be a big red line saying:

It´s time to use a decent browser!

And the difference between code and code2:, or why I prefer to use code2 and use code rarely:

code2 has the option to set the mode, if html, javascript, php or just internal comment. So You have always clear which code You are using. Also it is a superb way to give some help and explanation to unexperienced users. If You want to comment a section or just write down the different parameters which could be set, this is perfect.
And this module I use very often - unchanged - full sized. But when You need a section code for only one line, for anynews or fancy_box or whatever, I was fed up of the space-wasting textarea. So I modified the output of this code-module. Now I´m happy with the look and feel of the backend, use it when I need only one line and prefer code2 for all other needings.

regards from Himberg

[mr-fan]

hi all,

i've a short question for the fancy box...

are there any minimum requires on the webserver to run it...

for my projekt it runs on XAMP... it runs on vynis server....with my template!

but it doesn't run under my webserver (different templates, anynews is correct configuered?)

are theire any serverside settings what can dissable the fb???

regards martin

edit here is the link to the example video from the threat : http://start.mr-vilsbiburg.de/pages/fb-test.php

[Luckyluke]

Great - it works in chrome!

I think there are some troubles in the new version of Chrome. I've got this

Code:

$(document).ready(function() { $("a.fb").fancybox(); $("a.page_fb").
fancybox({ 'hideOnContentClick': false, 'zoomSpeedIn':0, 'zoomSpeedOut':300 });
$("a.pic_fb").fancybox({ 'hideOnContentClick': true });
$("a.pic1_fb").fancybox({ 'hideOnContentClick': true, 'overlayShow': true });
$("a.video_fb").fancybox({ 'overlayShow': true, 'frameWidth': 425, 'frameHeight': 355 });
$("div#use_fb a").fancybox(); });

Strange...

Grtz,
Luc

[doxynder]

Hi Luckyluke!
I have the same problem! Maybe you have a solution ? I´ve tried to put the code into head-no chance but i have to say that i´m not sure if i have done it in the right way.
This site http://www.rvb.bplaced.net/pages/fancy.php works fine in chrome altough there are error messages in the javascript console. Code is in body!

best regaard
peter

[doxynder]

hab die include so abgeändert (<script---/></script -> <script></script)

Code:

<?php
$debug = false;
if (true == $debug ) {
    ini_set('display_errors', 1);
    error_reporting(E_ALL);
}
if (!function_exists("use_fancy_box") ) {
    function use_fancy_box() {
    ?>
    <script type="text/javascript" src="<?php echo WB_URL; ?>/modules/fancy_box/box/jquery.js"></script>
    <script type="text/javascript" src="<?php echo WB_URL; ?>/modules/fancy_box/box/jquery.fancybox.js"></script>
    <script type="text/javascript" src="<?php echo WB_URL; ?>/modules/fancy_box/box/jquery.pngFix.js"></script>
     <link rel="stylesheet" href="<?php echo WB_URL; ?>/modules/fancy_box/box/fancy_css.php?wbp=<?php echo WB_URL; ?>" type="text/css" media="screen">
    <SCRIPT type=text/javascript>
    $(document).ready(function() { $("a.fb").fancybox();
    $("a.page_fb").fancybox({ 'hideOnContentClick': false,
                            'zoomSpeedIn':0,
                               'zoomSpeedOut':300 });
    $("a.pic_fb").fancybox({ 'hideOnContentClick': true });
    $("a.pic1_fb").fancybox({ 'hideOnContentClick': true,
                            'overlayShow': true });    
    $("a.video_fb").fancybox({ 'overlayShow': true,
                               'frameWidth': 600,
                               'frameHeight': 400 });
    $("div#use_fb a").fancybox();
    });
    </script>
    <?php
    }
}
?>

in chrome funkts jetzt auch

[AgentLu]

Hello, I have a question for the fancybox - I am new to javascripting and I am trying to figure out the fancybox. If I want to use more than one Custom defined image set, how do I do that? Can anybody help me please?

I am bugging like this > 

[sky writer]

Does anyone have FancyBox working in a Website Baker website?  I had it working a while back, but now when I tried it opens the video frame way down the page, without the lightbox effect.

I have tried un-installing and re-installing, but it won't work anymore.

[albatros]

Hi,

yes I have. E.g. here http://www.willingen-ferienhaus.de/topics/wintersport-in-willingen-3.php and here http://www.willingen-ferienhaus.com/ you can see it in action, but only with images, not with a video.

Regards

Uwe

[sky writer]

Thank you.  Those examples look great, and work perfectly in my browsers.  So I am left to wonder, how you set your fancybox up?

I downloaded the fancybox module from AMASP http://www.websitebakers.com/pages/modules/various/fancy-box.php

Installed the module through WB Add-ons.

I then followed Vyni's (miss you Vyni!) instructions:
-----------------------------------------------
Example how to use to display a YouTube-video:

The first section of the page must be type CODE - in this section write

Code:
use_fancy_box();
and save.

In a wysiwyg-section add a link.
Add the corresponding class to the link.
Code:
<a class="video_fb" href="#testube">See this video</a>
save.

Add a further section - type CODE2, set it to html and insert the following code
Code:
<div style="display: none;" id="testube" />
<object height="355" width="425" />
<param name="movie" value="http://www.youtube.com/v/nnpv3FhIVXk" />
<param name="wmode" value="transparent" />
<embed height="355" width="425" src="http://www.youtube.com/v/nnpv3FhIVXk" type="application/x-shockwave-flash" wmode="transparent" />
</embed></object>
</div>
and save. Finished.
-----------------------

Like I said, I did have this module/snippet working a while ago.  But now it doesn't work.

Can you explain any differences in the way you implemented the module?  Did you make any other manual entries?

Many Thanks!