54 lines
4.8 KiB
HTML
54 lines
4.8 KiB
HTML
<h2>How to Use:</h2>
|
|
<ol>
|
|
<li>You can use WordPress image galleries and have them grouped and auto-lightboxed: <a href="http://codex.wordpress.org/Gallery_Shortcode"><code>[gallery link="file"]</code></a></li>
|
|
<li>[gallery]'s are automatically grouped by post ID. You can split them into separate slideshows, using the <code>group</code>-attribute:
|
|
<pre><code> [gallery link="file" ids="1,2,3" group="mon"]
|
|
[gallery link="file" ids="4,5,6" group="tue"]</code></pre>
|
|
</li>
|
|
<li>You can also add a <code>rel="lightbox"</code> attribute to any link tag to activate the lightbox. For example:
|
|
<pre><code> <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a></code></pre>
|
|
<em>Optional:</em> Use the <code>title</code> attribute if you want to show a caption.
|
|
</li>
|
|
<li>If you have a set of related images that you would like to group, simply include a group name in the rel attribute. For example:
|
|
<pre><code> <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
|
|
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
|
|
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a></code></pre>
|
|
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li>
|
|
<li>To <strong>disable</strong> lightboxing of an image link, just set any other rel-attribute: <code>rel="nobox"</code></li>
|
|
<li>You can use the <code>data-download</code>-attribute to set a custom download link:
|
|
<a href="image-medium.jpg" rel="lightbox" data-download="image-superlarge.jpg"> [...] </a> </li>
|
|
<li><a href="http://wordpress.org/extend/plugins/infinite-scroll/">Infinite-Scroll</a> and similar "endless pages"-plugin, should call <code>doLightbox();</code> whenever it loads new content. Most plugins have a setting
|
|
for code that is called after each new page is loaded - just give it this:
|
|
<code>if(typeof doLightBox !== 'undefined' && typeof jQuery !== 'undefined'){
|
|
doLightBox();
|
|
}</code></li>
|
|
</ol>
|
|
<h2>Troubleshooting</h2>
|
|
<p>If you have problems with WP jQuery Lightbox, please make sure you try these steps before asking for help. If you ask for help and I find any of these steps would fix the problem, I will just link you back here to do the work yourself.</p>
|
|
<ol>
|
|
<li>Make sure your site is not throwing any javascript errors. Use <a href="http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers">your browsers javascript console</a> to find out.
|
|
<li>If you're running a custom theme:</li>
|
|
<ol>
|
|
<li>Always have <code>wp_header();</code> just before the closing <code></head></code> tag of your theme, or you will break many plugins, which generally use this hook to reference JavaScript files</li>
|
|
<li>Always have <code>wp_footer();</code>, just before the closing <code></body></code>, for the same reason</li>
|
|
<li>Many JavaScript optimizers, combiners, minifiers, etc. conflict with <a href="http://codex.wordpress.org/Function_Reference/wp_localize_script2"><code>wp_localize_script()</code></a>, used to configure this plugin and many others.
|
|
<ul style="list-style-type: circle;margin-left: 24px;">
|
|
<li>If you experience problems with jQuery Lightbox, please disable all JavaScript-optimizing plugins. (Optimize Scripts, W3 Total Cache, WP Minify etc)</li>
|
|
<li>If you develop JavaScript optimizers for WordPress, please play nice with the default API...</li>
|
|
<li><a href="http://wordpress.org/support/topic/122-worked-13-does-not-work-for-me?replies=19">More info about this issue</a></li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
<li>Disable all other plugins, one at a time. Try the lightbox between each.</li>
|
|
<li>Revert to the default theme. Did it help? Fix your theme.</li>
|
|
<li><strong>Search</strong> the forums before posting.</li>
|
|
</ol>
|
|
<h2>Credits</h2><ul style="list-style-type: circle;margin-left: 24px;">
|
|
<li>wp-jquery-lightbox was created by <a href="http://www.ulfben.com">Ulf Benjaminsson</a></li>
|
|
<li>wp-jquery-lightbox borrowed the regexp from <a href="http://stimuli.ca/lightbox/">LightBox-2 by Rupert Morris</a> to apply lightbox-rel without clobbering manual inputs.</li>
|
|
<li>wp-jquery-lightbox uses a modified (see below) <a href="http://github.com/krewenki/jquery-lightbox/">jQuery Lightbox</a> by <a href="http://warren.mesozen.com/jquery-lightbox/">Warren Krewenki</a></li>
|
|
<li><a href="http://github.com/krewenki/jquery-lightbox/">jQuery Lightbox</a> is based on <a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox 2 by Lokesh Dhakar</a></li>
|
|
<li>Swipe support is courtesy of Andreas Waltl's <a href="http://www.netcu.de/jquery-touchwipe-iphone-ipad-library">touchwipe-library</a></li>
|
|
</ul>
|
|
</p>
|
|
|