fancybox-plus
Version:
jQuery lightbox and modal window plugin.
308 lines (235 loc) • 10.7 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Fancybox-Plus - Fancy jQuery lightbox alternative</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jquery/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>
<!--<script type="text/javascript" src="https://cdn.rawgit.com/igorlino/fancybox-plus/1.3.8/src/jquery.fancybox-plus.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/igorlino/fancybox-plus/1.3.8/css/jquery.fancybox-plus.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/igorlino/fancybox-plus/1.3.8/demo/css/style.css" media="screen" />
<script type="text/javascript" src="https://cdn.rawgit.com/igorlino/fancybox-plus/1.3.8/demo/js/web.js?m=20100203"></script>-->
<script type="text/javascript" src="../src/jquery.fancybox-plus.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jquery.fancybox-plus.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<script type="text/javascript" src="js/web.js?m=20100203"></script>
<!--[if IE 6]>
<script src="https://cdn.rawgit.com/igorlino/DD_belatedPNG/0.0.8a/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->
<script src="https://cdn.rawgit.com/sorccu/cufon/1.09i/js/cufon.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/igorlino/fancybox-plus/1.3.8/demo/js/Museo_300_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', {color: '#4682B4'});
</script>
<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.7/demo/css/prism.css"/>
<script type="text/javascript" src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.7/demo/js/prism.js"></script>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="index.html">fancybox-<b>Plus</b></a></h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="howto.htm">How to use</a></li>
<li><a href="api.htm">API & Options</a></li>
<li><a class="active" href="blog.htm">Tips & Tricks</a></li>
<li><a href="faq.htm">FAQ</a></li>
<li><a href="support.htm">Support</a></li>
</ul>
</div>
<div id="col_wrap">
<div id="col_top"></div>
<div id="col_left">
<h1>Tips <span>&</span> Tricks</h1>
<p>Collection of some code snippets </p>
<div class="list">
<p class="h"><span>7.</span> Custom title formating - lightbox style</p>
<p>JavaScript</p>
<pre><code class="language-javascript">function formatTitle(title, currentArray, currentIndex, currentOpts) {
return '<div id="tip7-title"><span><a href="javascript:;" onclick="$.fancyboxPlus.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
}
$(".tip7").fancyboxPlus({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});</code></pre>
<p>CSS</p>
<pre><code class="language-css">#tip7-title { text-align: left; }
#tip7-title b { display: block; margin-right: 80px; }
#tip7-title span { float: right; }</code></pre>
<p>
Example <br />
<a class="tip7" rel="tip7" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque" href="http://c1.staticflickr.com/1/356/18957923475_6ba569c037_b.jpg">
<img alt="tip7" src="http://c1.staticflickr.com/1/356/18957923475_6ba569c037_m.jpg">
</a>
<a class="tip7" rel="tip7" title="Etiam quis mi eu elit tempor facilisis id et neque" href="http://c1.staticflickr.com/1/317/18942236206_d5e90fc7bd_b.jpg">
<img alt="tip7" src="http://c1.staticflickr.com/1/317/18942236206_d5e90fc7bd_m.jpg">
</a>
</p>
</div>
<div class="list">
<p class="h"><span>6.</span> Start FancyBox on page load</p>
<p>If you have attached FancyBox than you can trigger click method </p>
<pre><code class="language-javascript">jQuery(document).ready(function() {
$("#your_selector").trigger('click');
});</code></pre>
<p>Alternative method is to use manual call</p>
<pre><code class="language-javascript">jQuery(document).ready(function() {
$.fancyboxPlus(
'<h2>Hi!</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque</p>',
{
'autoDimensions' : false,
'width' : 350,
'height' : 'auto',
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
});</code></pre>
</div>
<div class="list">
<p class="h"><span>5.</span> Display login form <a id="tip5" title="Login" href="#login_form">Try now</a></p></p>
<p>Sample HTML form:</p>
<pre><code class="language-markup"><div style="display:none">
<form id="login_form" method="post" action="">
<p id="login_error">Please, enter data</p>
<p>
<label for="login_name">Login: </label>
<input type="text" id="login_name" name="login_name" size="30" />
</p>
<p>
<label for="login_pass">Password: </label>
<input type="password" id="login_pass" name="login_pass" size="30" />
</p>
<p>
<input type="submit" value="Login" />
</p>
<p>
<em>Leave empty so see resizing</em>
</p>
</form>
</div></code></pre>
<p>Attach FancyBox: </p>
<pre><code class="language-javascript">$("#tip5").fancyboxPlus({
'scrolling' : 'no',
'titleShow' : false,
'onClosed' : function() {
$("#login_error").hide();
}
});</code></pre>
<p>Simple validation; submit data using Ajax and display response</p>
<pre><code class="language-javascript">$("#login_form").bind("submit", function() {
if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
$("#login_error").show();
$.fancyboxPlus.resize();
return false;
}
$.fancyboxPlus.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "/data/login.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancyboxPlus(data);
}
});
return false;
});</code></pre>
</div>
<div style="display:none">
<form id="login_form" method="post" action="">
<p id="login_error">Please, enter data</p>
<p>
<label for="login_name">Login: </label>
<input type="text" id="login_name" name="login_name" size="30" />
</p>
<p>
<label for="login_pass">Password: </label>
<input type="password" id="login_pass" name="login_pass" size="30" />
</p>
<p>
<input type="submit" value="Login" />
</p>
<p>
<em>Leave empty so see resizing</em>
</p>
</form>
</div>
<div class="list">
<p class="h"><span>4.</span> Show youtube clips. <a id="tip4" title="'Zombieland' Trailer" href="http://www.youtube.com/watch?v=071KqJu7WVo&feature=player_embedded#at=41">Try now</a></p>
<p>This script also enables full screen mode if video's href has the parameter &fs=1 </p>
<pre><code class="language-javascript">$("#tip4").click(function() {
$.fancyboxPlus({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});</code></pre>
</div>
<div class="list">
<p class="h"><span>3.</span> Show/hide title on hover. <a id="tip3" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus mauris elit. Sed at quam nisl. Etiam velit felis, semper sed tincidunt vitae, pulvinar non ante." href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg">Try now</a></p>
<pre><code class="language-javascript">$("#tip3").fancyboxPlus({
'titlePosition' : 'over',
'onComplete' : function() {
$("#fbplus-wrap").hover(function() {
$("#fbplus-title").show();
}, function() {
$("#fbplus-title").hide();
});
}
});</code></pre>
</div>
<div class="list">
<p class="h"><span>2.</span> Select all anchor tags that contain image tags</p>
<pre><code class="language-javascript">$("a:has(img)").fancyboxPlus();</code></pre>
<p>Alternative method - apply Fancybox to only those <a> tags that have href attributes that end with .jpg, .png or .gif:</p>
<pre><code class="language-javascript">$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").fancyboxPlus();</code></pre>
</div>
<div class="list">
<p class="h"><span>1.</span> Create gallery from jQuery object collection</p>
<pre><code class="language-javascript">$("a.fancybox").attr('rel', 'gallery').fancyboxPlus();</code></pre>
</div>
<!--
http://jquery.diaz-cornen.com/fancybox/index_map.html
if ($.support.opacity) {
$("#fbplus-outer").css({
'backgroundColor' : "transparent",
'backgroundImage' : "url(/scripts/web/fbplus/fbplus_bg.png)"
});
}
-->
</div>
<div id="col_right">
<div id="col_sep">
<p><b>Current Release</b><br /><a href="">Version</b> 1.3.5 (20.06.2015)</a></p>
<p><a href="https://github.com/igorlino/fancybox-plus/blob/master/CHANGELOG.md">Changelog</a></p>
</div>
<div id="adblock">
</div>
</div>
<div class="clear"></div>
</div>
<div id="col_bottom"></div>
<div id="footer">
<p>Contact: info <span>[at]</span> <a href="http://igorlino.github.io/fancybox-plus/fancybox">issues</a> /please, don`t send emails for help, use <a href="https://github.com/igorlino/fancybox-plus/issues">issues</a> instead</p>
</div>
</div>
</body>
</html>