Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: 44f2df7df7
Fetching contributors…

Cannot retrieve contributors at this time

272 lines (259 sloc) 13.44 kB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sphinxcontrib-fancybox’s documentation &mdash; sphinxcontrib-fancybox 1 documentation</title>
<link rel="stylesheet" href="_static/default.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="_static/fancybox/jquery.fancybox-1.3.4.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '',
VERSION: '1',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<script type="text/javascript" src="_static/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="top" title="sphinxcontrib-fancybox 1 documentation" href="#" />
</head>
<body>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li><a href="#">sphinxcontrib-fancybox 1 documentation</a> &raquo;</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body">
<div class="section" id="sphinxcontrib-fancybox-s-documentation">
<h1>sphinxcontrib-fancybox&#8217;s documentation<a class="headerlink" href="#sphinxcontrib-fancybox-s-documentation" title="Permalink to this headline">¶</a></h1>
</div>
<div class="section" id="readme">
<h1>README<a class="headerlink" href="#readme" title="Permalink to this headline">¶</a></h1>
<p>Sphinx &#8220;fancybox&#8221; extension.</p>
</div>
<div class="section" id="fancybox">
<h1>Fancybox<a class="headerlink" href="#fancybox" title="Permalink to this headline">¶</a></h1>
<p>Fancybox is adaptation of <a class="reference external" href="http://fancybox.net/">http://fancybox.net/</a> in version <strong>1.3.4</strong>.</p>
<p>Documentation: <a class="reference external" href="http://spinus.github.com/sphinxcontrib-fancybox/">http://spinus.github.com/sphinxcontrib-fancybox/</a></p>
<p>github: <a class="reference external" href="http://github.com/spinus/sphinxcontrib-fancybox/">http://github.com/spinus/sphinxcontrib-fancybox/</a></p>
<p>PYPI: <a class="reference external" href="http://pypi.python.org/pypi/sphinxcontrib-fancybox/">http://pypi.python.org/pypi/sphinxcontrib-fancybox/</a></p>
<div class="section" id="installation">
<h2>Installation<a class="headerlink" href="#installation" title="Permalink to this headline">¶</a></h2>
<p>Instalation through pip:</p>
<div class="highlight-python"><pre>pip install sphinxcontrib-fancybox</pre>
</div>
<p>or through github:</p>
<div class="highlight-python"><pre>git clone https://github.com/spinus/sphinxcontrib-fancybox
cd sphinxcontrib-fancybox
python setup.py install</pre>
</div>
<p>Next, you have to add extension to <cite>conf.py</cite> in your sphinx project.</p>
<div class="highlight-python"><pre>extensions = [
...,
'sphinxcontrib.fancybox',
...]</pre>
</div>
</div>
<div class="section" id="directives">
<h2>Directives<a class="headerlink" href="#directives" title="Permalink to this headline">¶</a></h2>
<p>fancybox:</p>
<blockquote>
<div><p>Fancybox directive place a thumbnail of picture you selected, and add some
<cite>fancies</cite>. If you click on image you get fullscreen box with that picture.</p>
<p>Example:</p>
<div class="highlight-python"><pre>.. fancybox:: picture.png</pre>
</div>
<p>By default all images on one page are in the same group (you can navigate
pressing <cite>next</cite> and <cite>prev</cite> buttons around this group).
If you want to add picture to another group you have to set <cite>group</cite>
parameter, like:</p>
<div class="highlight-python"><pre>.. fancybox:: picture.png
:group: group2</pre>
</div>
<p>You can change size of fancybox with &#8216;width&#8217; and &#8216;height&#8217; which are
passed as you set it:</p>
<div class="highlight-python"><pre>.. fancybox:: picture.png
:width: 100%
:height: 2em</pre>
</div>
<p>You can add some description which will be rendered as <cite>title</cite> attribute:</p>
<div class="highlight-python"><pre>.. fancybox:: http://pictures.tld/picture.png
Some description</pre>
</div>
<p>If you not set &#8216;width&#8217; and &#8216;height&#8217;, defaults values are gathered from
<cite>conf.py</cite>. There are two parameters which you can adjust:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="n">fancybox_thumbnail_width</span>
<span class="n">fancybox_thumbnail_height</span>
</pre></div>
</div>
<p>Additionally you can set another css class with &#8216;class&#8217; argument to
<cite>fancybox</cite> directive or set <cite>fancybox_thumbnail_class</cite> to add css class to
all <cite>fancybox</cite> directives.</p>
<p>All fancybox JS config options you can pass as dict to <cite>fancybox_config</cite> in
<cite>conf.py</cite> too.</p>
<p>For examples please look to documentation conf.py.</p>
</div></blockquote>
</div>
<div class="section" id="todo">
<h2>TODO<a class="headerlink" href="#todo" title="Permalink to this headline">¶</a></h2>
<ul class="simple">
<li>option to copying remote graphics as statics</li>
<li>fallback for non html output</li>
<li>nested parsing fix</li>
<li>JS should be handled only once, not on every image node</li>
<li>width and height parameters (currently the thumbnail is set to 100x100px) (DONE)</li>
<li>get default thumbnail size from config (DONE)</li>
</ul>
</div>
<div class="section" id="questions-and-suggestions">
<h2>Questions and suggestions<a class="headerlink" href="#questions-and-suggestions" title="Permalink to this headline">¶</a></h2>
<p>If you have some suggstions, patches, problems - please write an email or
github message.</p>
</div>
</div>
<div class="section" id="examples">
<h1>Examples<a class="headerlink" href="#examples" title="Permalink to this headline">¶</a></h1>
<div class="section" id="fancybox-remote-link">
<h2>0 - fancybox remote link<a class="headerlink" href="#fancybox-remote-link" title="Permalink to this headline">¶</a></h2>
<a alt="" class="fancybox" href="http://creoeninternet.com/wp-content/uploads/2011/06/wikipedia.png" rel="default" title="">
<img src="http://creoeninternet.com/wp-content/uploads/2011/06/wikipedia.png" width="150px" height="150px" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({"overlayShow": "false", "transitionOut": "elastic", "speedIn": 600, "transitionIn": "elastic", "speedOut": 200});
});
</script>
</a></div>
<div class="section" id="fancybox-non-standard-size">
<h2>1 - fancybox non standard size<a class="headerlink" href="#fancybox-non-standard-size" title="Permalink to this headline">¶</a></h2>
<a alt="" class="fancybox" href="_images/img.jpg" rel="default" title="">
<img src="_images/img.jpg" width="300px" height="100px" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({"overlayShow": "false", "transitionOut": "elastic", "speedIn": 600, "transitionIn": "elastic", "speedOut": 200});
});
</script>
</a></div>
<div class="section" id="fancybox-with-additional-class">
<h2>2 - fancybox with additional class<a class="headerlink" href="#fancybox-with-additional-class" title="Permalink to this headline">¶</a></h2>
<a alt="with css class" class="fancybox someclass" href="_images/img.jpg" rel="default" title="with css class">
<img src="_images/img.jpg" width="150px" height="150px" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({"overlayShow": "false", "transitionOut": "elastic", "speedIn": 600, "transitionIn": "elastic", "speedOut": 200});
});
</script>
</a></div>
<div class="section" id="fancybox-with-description-markup">
<h2>3 - fancybox with description (markup)<a class="headerlink" href="#fancybox-with-description-markup" title="Permalink to this headline">¶</a></h2>
<div class="admonition warning">
<p class="first admonition-title">Warning</p>
<p class="last">nested parsing of description is not working now, is rendered as
plaintext</p>
</div>
<a alt="Some description of image, yey! Can be multiline and it is very nice. And with link to somwhere." class="fancybox" href="_images/img.jpg" rel="default" title="Some description of image, yey! Can be multiline and it is very nice. And with link to somwhere.">
<img src="_images/img.jpg" width="150px" height="150px" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({"overlayShow": "false", "transitionOut": "elastic", "speedIn": 600, "transitionIn": "elastic", "speedOut": 200});
});
</script>
</a></div>
<div class="section" id="image-with-class-fancybox">
<h2>4 - image with class &#8216;fancybox&#8217;<a class="headerlink" href="#image-with-class-fancybox" title="Permalink to this headline">¶</a></h2>
<img alt="_images/img.jpg" class="fancybox" src="_images/img.jpg" />
</div>
<div class="section" id="fancybox-with-description">
<h2>5 - fancybox with description<a class="headerlink" href="#fancybox-with-description" title="Permalink to this headline">¶</a></h2>
<a alt="witaj to jest podpowiedz JEJ." class="fancybox" href="_images/img.jpg" rel="default" title="witaj to jest podpowiedz JEJ.">
<img src="_images/img.jpg" width="150px" height="150px" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({"overlayShow": "false", "transitionOut": "elastic", "speedIn": 600, "transitionIn": "elastic", "speedOut": 200});
});
</script>
</a></div>
</div>
<div class="section" id="indices-and-tables">
<h1>Indices and tables<a class="headerlink" href="#indices-and-tables" title="Permalink to this headline">¶</a></h1>
<ul class="simple">
<li><a class="reference internal" href="genindex.html"><em>Index</em></a></li>
<li><a class="reference internal" href="py-modindex.html"><em>Module Index</em></a></li>
<li><a class="reference internal" href="search.html"><em>Search Page</em></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper">
<h3><a href="#">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">sphinxcontrib-fancybox&#8217;s documentation</a></li>
<li><a class="reference internal" href="#readme">README</a></li>
<li><a class="reference internal" href="#fancybox">Fancybox</a><ul>
<li><a class="reference internal" href="#installation">Installation</a></li>
<li><a class="reference internal" href="#directives">Directives</a></li>
<li><a class="reference internal" href="#todo">TODO</a></li>
<li><a class="reference internal" href="#questions-and-suggestions">Questions and suggestions</a></li>
</ul>
</li>
<li><a class="reference internal" href="#examples">Examples</a><ul>
<li><a class="reference internal" href="#fancybox-remote-link">0 - fancybox remote link</a></li>
<li><a class="reference internal" href="#fancybox-non-standard-size">1 - fancybox non standard size</a></li>
<li><a class="reference internal" href="#fancybox-with-additional-class">2 - fancybox with additional class</a></li>
<li><a class="reference internal" href="#fancybox-with-description-markup">3 - fancybox with description (markup)</a></li>
<li><a class="reference internal" href="#image-with-class-fancybox">4 - image with class &#8216;fancybox&#8217;</a></li>
<li><a class="reference internal" href="#fancybox-with-description">5 - fancybox with description</a></li>
</ul>
</li>
<li><a class="reference internal" href="#indices-and-tables">Indices and tables</a></li>
</ul>
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="_sources/index.txt"
rel="nofollow">Show Source</a></li>
</ul>
<div id="searchbox" style="display: none">
<h3>Quick search</h3>
<form class="search" action="search.html" method="get">
<input type="text" name="q" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li><a href="#">sphinxcontrib-fancybox 1 documentation</a> &raquo;</li>
</ul>
</div>
<div class="footer">
&copy; Copyright 2012, Tomek Czyż.
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.1.3.
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.