New snippet Fancy-Box

[erpe]

But 2.7 has no include/jquery directory.......... ...............

[albatros]

Hi Dietmar, hi Erpe,

on a later version I made some small changes to get valid code using fancybox http://www.websitebaker2.org/forum/index.php/topic,11327.msg68099.html#msg68099. Nobody reacted, except Vyni, so maybe i am totally wrong. I have to say, that I am no real coder.

Now I used Fancybox 0.4 and I also didn't get valid code this time. With these changes it is valid:

1. I put this into the the head of index.php of my template instead of the include.php of fancybox

Code:

<link href="<?php echo WB_URL; ?>/modules/fancy_box/screen.css" type="text/css" rel="stylesheet" media="screen" />

2. I changed include.php to

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; ?>/include/jquery/jquery-min.js"></script>
    <script language="JavaScript" type="text/javascript" src="<?php echo WB_URL; ?>/include/jquery/plugins/jquery-fancybox.js"></script>
    <script language="JavaScript" type="text/javascript" src="<?php echo WB_URL; ?>/include/jquery/plugins/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,
                            'frameWidth': 800,
                               'frameHeight': 600 });    
    $("a.video_fb").fancybox({ 'overlayShow': true,
                               'frameWidth': 425,
                               'frameHeight': 355 });
    $("div#use_fb a").fancybox({ 'hideOnContentClick': true,
                            'overlayShow': true,
                            'frameWidth': 700,
                               'frameHeight': 600 });
    });
    </script>
    <?php
    }
}
?>

What's your opinion about that?

Best regards

Uwe

[Luisehahne]

Hi Uwe,

I only have problems with embed code and valide xhtml, if i use object its not shown in each browser.

Dietmar

[albatros]

Hi Dietmar,

could you please explain it a little bit more detailled because I dont understand?
The site I am using the patched version of FB 0.4 is http://www.willingen-ferienhaus.com/

Thanks in advance!

Best Regards

Uwe

[Luisehahne]

Yes, i'm a fan for valide code, your side is valide. But if want to open a video, e.g. from youtube with fancybox, then most it is included with object and embed tags. And embed don't exists in xhtml

Dietmar

[albatros]

Ah ok, now I understand. But even then you would probably have less faults with my changes. Don`t you think so?

Best Regards

Uwe

[Luisehahne]

Yes is the better way to put the css in the head. i do it with the jquery insert plugin on the fly, only if needed.

Dietmar

[albatros]

Yes is the better way to put the css in the head.

Yes. Maybe a frontend.css like in news and form would easier for unexperienced users.

But I also changed the syntax of the calls for the js-files.

Best regards

Uwe

[Luisehahne]

Yes the include folder is ok, i see it. You only must be check, that jquery.js is not loaded twice.

Dietmar

[erpe]

@albatros

if the 0.3c release gives valid code the only reason for this can be the implementing of the css file.
I personally don't like to load css files in the head if they are only needed for special modules.

Please check if the 0.3c release is valid.
If yes I will modify the fancybox 0.40 with this kind of implementing css.

Thanks for your information.

rgds

erpe

[erpe]

Hi

I uploaded new (valid) release 0.41 to AMASP

A small tutorial is posted here:
http://www.websitebaker2.org/forum/index.php/topic,11327.msg67934.html#msg67934

Validation can be seen here:
http://www.rvb.bplaced.net/pages/fancy-valid.php

Please keep in mind that you can use this droplet to call fancybox:

Code:

ob_start();
    use_fancy_box();
    $fancy_content = ob_get_contents();
ob_end_clean();

return $fancy_content;

and call it with

[[fancybox]]

It will not be available on the official library because it is a function call that needs the snippet fancybox.

rgds

erpe

[maverik]

my solution

fancybox v0.40 installed

header

Code:

<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/style.css" media="screen,projection" />
        <link rel="stylesheet" type="text/css" href="<?php echo WB_URL; ?>include/jquery/plugins/jquery-ui.css" media="screen,projection" />
        <script language="JavaScript" type="text/javascript">
         var URL = '<?php echo WB_URL ?>';
        </script>
        <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-min.js"></script>
        <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-ui-min.js"></script>
        <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-insert.js"></script>
        <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/plugins/jquery-corner.js"></script>
        <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/plugins/jquery-fancybox.js"></script>
        <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/plugins/jquery-pngFix.js"></script>
        <?php
    // automatically include optional WB module files (frontend.css, frontend.js)
    if (function_exists('register_frontend_modfiles')) {
        register_frontend_modfiles('css');
        register_frontend_modfiles('js');
    } ?>

sreen.css renamed in frontend css and made a frontend js

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,
                            'frameWidth': 800,
                               'frameHeight': 600 });
    $("a.video_fb").fancybox({ 'overlayShow': true,
                               'frameWidth': 425,
                               'frameHeight': 355 });
    $("div#use_fb a").fancybox({ 'hideOnContentClick': true,
                            'overlayShow': true,
                            'frameWidth': 700,
                               'frameHeight': 600 });
    });

thats valid and works wonderfull

http://template.developer-base.de/pages/start/fancybox-valide.php

[erpe]

It is similar to what I did in the fancybox 0.41.

But you don't need to put code in the head of your template.

rgds


erpe

[maverik]

maybe someone can translate 

da ich jquery ja eh global verwenden will, "war das nicht so gedacht mit 2.8?"  , zb mit corner, ist es so doch einfacher mit einem eintrag in die head. kann jetzt  auf jeder seite jedes thumb mit der class belegen ohne das droplet einfügen zu müssen.

[erpe]

But not everybody wants every script on every page............... .

rgds

erpe

[Luisehahne]

But not everybody wants every script on every page

Whats with fancybox as pagemodul, in meantime i write a german help file, later translate in english

@demo
http://websitebaker.wdsnet.de/wb/pages/de/jquery/fancybox.php

Dietmar

[noname8]

There is some bug / not valid xhtml that seems to show in google chrome

Code:

<script type=javascript />

should read:

Code:

<script type="javascript" >

or perhaps this is enough:

Code:

<script type=javascript>

[erpe]

Cannot confirm this.
Please see validation links on this page:
http://www.rvb.bplaced.net/pages/fancy-valid.php

rgds

erpe

[masarin]

How can I get the arrows to work like in the "Image Gallery" example
http://fancybox.net/example
so that I can move on to the next picture directly without having to close the current one first.


/masarin

[dbs]

hi, your pics have class?
they need rel="fancybox" too.

dbs

[masarin]

hi, your pics have class?
they need rel="fancybox" too.

dbs

When I add the rel="fancybox" to the link fancybox is not engaged and the picture opens without a fancybox window.

Code:

<div><a href="lift.jpg" class="pic_fb" rel="fancybox"> pic1 </a>   
<a href="berg.jpg" class="pic_fb" rel="fancybox"> pic2 </a></div>

[maverik]

Code:

<a href="image5.jpg" rel="fancybox" class="pic1_fb"><img border="0" src="thumb5.jpg" alt="" /></a>

thats the right way

[masarin]

Code:

<a href="image5.jpg" rel="fancybox" class="pic1_fb"><img border="0" src="thumb5.jpg" alt="" /></a>

thats the right way

when i add rel="fancybox" to a link FancyBox stops working.


/masarin

Code:

<a href="lift700.jpg" rel="fancybox" class="pic1_fb"> <img height="37" width="50" src="lift50.jpg" alt="" /></a> <a href="berg.jpg" rel="fancybox" class="pic1_fb"><img height="37" width="50" src="lift50.jpg" alt="" /></a>

[erpe]

Is there a link to the site?

rgds

erpe

[masarin]

Is there a link to the site?

rgds

erpe

Heres a test page with two pictures.
http://hoppsaweb.se/enovx/pages/se/test.php
I want to be able to open one of them and then click on a link (arrow) in the open picture to get to the second one.
Just like in this page:
http://www.berann.at/cms/kunst/malerei.html

/masarin