Author Topic: New snippet Fancy-Box (Read 79087 times)

erpe0812 · « **Reply #50 on:** October 12, 2009, 08:01:34 PM »

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

albatros · « **Reply #51 on:** October 16, 2009, 10:24:05 PM »

Hi Dietmar, hi Erpe,

on a later version I made some small changes to get valid code using fancybox https://forum.WebsiteBaker.org/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: [Select]

<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: [Select]

<?php
$debug = false;
if (true == $debug ) {
    ini_set(&#39;display_errors&#39;, 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 · « **Reply #52 on:** October 16, 2009, 10:28:57 PM »

Hi Uwe,

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

Dietmar

albatros · « **Reply #53 on:** October 16, 2009, 10:47:58 PM »

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 · « **Reply #54 on:** October 16, 2009, 11:45:40 PM »

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 · « **Reply #55 on:** October 16, 2009, 11:50:19 PM »

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 · « **Reply #56 on:** October 17, 2009, 12:08:05 AM »

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 · « **Reply #57 on:** October 17, 2009, 12:15:34 AM »

Quote from: Luisehahne on October 17, 2009, 12:08:05 AM

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 · « **Reply #58 on:** October 17, 2009, 12:19:33 AM »

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

Dietmar

erpe0812 · « **Reply #59 on:** October 17, 2009, 10:24:37 AM »

@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

erpe0812 · « **Reply #60 on:** October 17, 2009, 12:49:44 PM »

Hi

I uploaded new (valid) release 0.41 to AMASP

A small tutorial is posted here:
https://forum.WebsiteBaker.org/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: [Select]

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

return $fancy_content;

and call it with

Quote

[[fancybox]]

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

rgds

erpe

maverik · « **Reply #61 on:** October 17, 2009, 03:26:53 PM »

my solution

fancybox v0.40 installed

header

Code: [Select]

<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(&#39;register_frontend_modfiles&#39;)) {
        register_frontend_modfiles(&#39;css&#39;);
        register_frontend_modfiles(&#39;js&#39;);
    } ?>

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

Code: [Select]

    $(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

erpe0812 · « **Reply #62 on:** October 17, 2009, 04:13:57 PM »

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 · « **Reply #63 on:** October 17, 2009, 04:21:12 PM »

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.

erpe0812 · « **Reply #64 on:** October 17, 2009, 04:36:41 PM »

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

rgds

erpe

Luisehahne · « **Reply #65 on:** October 17, 2009, 04:59:53 PM »

Quote

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 · « **Reply #66 on:** December 08, 2009, 08:59:58 PM »

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

Code: [Select]

<script type=javascript />

should read:

Code: [Select]

<script type="javascript" >

or perhaps this is enough:

Code: [Select]

<script type=javascript>

erpe0812 · « **Reply #67 on:** December 08, 2009, 11:41:34 PM »

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

rgds

erpe

masarin · « **Reply #68 on:** December 15, 2009, 08:36:24 AM »

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 · « **Reply #69 on:** December 15, 2009, 09:28:56 AM »

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

dbs

masarin · « **Reply #70 on:** December 15, 2009, 11:15:50 AM »

Quote from: dbs on December 15, 2009, 09:28:56 AM

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: [Select]

<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 · « **Reply #71 on:** December 15, 2009, 11:25:53 AM »

Code: [Select]

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

masarin · « **Reply #72 on:** December 15, 2009, 02:07:46 PM »

Quote from: maverik on December 15, 2009, 11:25:53 AM

Code: [Select]
<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: [Select]

<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>

erpe0812 · « **Reply #73 on:** December 15, 2009, 03:41:46 PM »

Is there a link to the site?

rgds

erpe

masarin · « **Reply #74 on:** December 16, 2009, 04:42:11 PM »

Quote from: erpe on December 15, 2009, 03:41:46 PM

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

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: New snippet Fancy-Box (Read 79087 times)

erpe0812

erpe0812

erpe0812

erpe0812

erpe0812

erpe0812

erpe0812