use_fancy_box();<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>use_fancy_box();<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>Annother example (http://edv.spoka.at/pages/fancy-box.php) for fancy-box combined with anynewsHi vyni,
this shows the complete site in a popup, but I meant to show only the long content of the news item :roll:
Do you know how to do that?
<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.<?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
}
}
?>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?
Hi Vyni,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!
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/ (http://fancy.klade.lv/) in Opera and none of them is working in Opera. :oops:
Great - it works in chrome!
$(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(); });<?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
var itemTop = viewportPos[3] + Math.round((viewportPos[1] - itemSize[1]) / 2) / 3;ob_start();
use_fancy_box();
$fancy_content = ob_get_contents();
ob_end_clean();
return $fancy_content;and call it with [[fancybox]]
Then take the old one in the fancy module folderThat was why I reworked the module.
on your page only works youtube-link, but it dont play...
@erpe: on your page only works youtube-link, but it dont play...
<link href="<?php echo WB_URL; ?>/modules/fancy_box/screen.css" type="text/css" rel="stylesheet" media="screen" /><?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
}
}
?>Yes is the better way to put the css in the head.
ob_start();
use_fancy_box();
$fancy_content = ob_get_contents();
ob_end_clean();
return $fancy_content;
[[fancybox]]
<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');
} ?> $(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 });
});
But not everybody wants every script on every page
<script type=javascript />
should read:<script type="javascript" >
or perhaps this is enough:<script type=javascript>
hi, your pics have class?
they need rel="fancybox" too.
dbs
<div><a href="lift.jpg" class="pic_fb" rel="fancybox"> pic1 </a>
<a href="berg.jpg" class="pic_fb" rel="fancybox"> pic2 </a></div>
<a href="image5.jpg" rel="fancybox" class="pic1_fb"><img border="0" src="thumb5.jpg" alt="" /></a>Code: [Select]<a href="image5.jpg" rel="fancybox" class="pic1_fb"><img border="0" src="thumb5.jpg" alt="" /></a>
thats the right way
<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>
Is there a link to the site?
rgds
erpe
Galleries are created from found anchors who have the same "rel" tags
<?php use_fancy_box(); ?> in der index.php eingebunden.<a href="[wblink40]" class="video_fb" rel="fancybox" ><img hspace="9" height="61" width="111" vspace="8" alt="" src="http://www.fritz-bicker.de/wb/media/Broschueren/intro/3.png" /></a>