<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WP Engineer &#187; Thickbox</title>
	<atom:link href="http://wpengineer.com/tag/thickbox/feed/" rel="self" type="application/rss+xml" />
	<link>http://wpengineer.com</link>
	<description>WordPress News, Hacks, Tips, Tutorials, Plugins and Themes</description>
	<lastBuildDate>Sun, 22 Jan 2012 13:32:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Use JavaScript Libraries In And Of WordPress</title>
		<link>http://wpengineer.com/415/use-javascript-libraries-in-and-of-wordpress/</link>
		<comments>http://wpengineer.com/415/use-javascript-libraries-in-and-of-wordpress/#comments</comments>
		<pubDate>Tue, 25 Nov 2008 16:16:08 +0000</pubDate>
		<dc:creator>Frank</dc:creator>
				<category><![CDATA[WordPress Tutorials]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Lightbox]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Thickbox]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[WordPress Hacks]]></category>

		<guid isPermaLink="false">http://wpengineer.com/?p=415</guid>
		<description><![CDATA[If you develop in and for WordPress, it's advisable to use a library of the core and a Plugin for the the library with the desired effect. Same for theme and Plugin authors. If you use a function of WordPress to implement JavaScript, you will have less complications and the compatibility between Plugins is much [...]]]></description>
			<content:encoded><![CDATA[<p>If you develop in and for WordPress, it's advisable to use a library of the core and a Plugin for the the library with the desired effect.</p>
<p>Same for theme and Plugin authors. If you use a function of WordPress to implement JavaScript, you will have less complications and the compatibility between Plugins is much higher.<br />
I will show you an example with Thickbox how to use JavaScript from the core.</p>
<p>There are many possibilities to implement the „Lightbox“ effect on your website. Let's take a close look on a way to use it without a Plugin.<br />
WordPress has <a href="http://jquery.com/demo/thickbox/">Thickbox</a> in their standard installation, so it's not very complicated to use it.<br />
<span id="more-415"></span></p>
<h3><code>wp_enqueue_script()</code></h3>
<p>Since version 2.1 of WordPress, there is the function <code>wp_enqueue_script()</code> included, which makes the implementation of JavaScript libraries very easy and also checks it. There is no need to use additional JavaScripts, the integration is easy and clean.</p>
<h3><code>wp_enqueue_style()</code></h3>
<p>Additionally pay attention to <code>wp_enqueue_style()</code> . With this function you can integrate CSS files.<br />
Both functions understand many parameters. For the example we need Thickbox, which exists as Plugin for jQuery. That's why you have to load both files, right?</p>
<pre lang="php">
wp_enqueue_script( &#039;jquery&#039; );
wp_enqueue_script( &#039;thickbox&#039; );
</pre>
<p>WordPress manages the dependencies , so it would be enough if you present the extension and WordPress will detect that jQuery is necessary. It's enough to use <code>wp_enqueue_script( 'thickbox' );</code>. Therefor jQuery will be load and be placed into the right spot of the code. The same happens if other calls are needing jQuery. WordPress pays attention and only allows one call of the library or extension to prevent that they get loaded several times.</p>
<p>So we integrate in our example the necessary JavaScript files. Additionally we need a style to get the effect of the Thickbox.<br />
It's enough to include the standard design of WordPress by calling the key <em>Thickbox</em> for the CSS call <code>wp_enqueue_style( 'thickbox' )</code>.</p>
<p>You can adjust the design for your own preferences.<br />
Here a small example to add the close icon into your core.</p>
<pre lang="css">
#TB_window a:link {
	color: transparent !important;
	background: url(&#039;http:/examble.com/wp-includes/js/thickbox/tb-close.png&#039;) no-repeat;
	padding: 0 4px !important;
}

#TB_window a:hover {
	background: red;
}
</pre>
<p>If you don't want to look after it, which is only possible in your WordPress backend (otherwise the icons are not available, since they are defined in JS), you can just use the call <code>add_thickbox()</code>. With this everything will be included in Thickbox.</p>
<p>To connect links with this effect, you have to add to the link the class <em>thickbox</em> .<br />
In the most simple case it would look like this:</p>
<pre lang="php">
&lt;a href=&quot;http://examble.com/image.png&quot; class=&quot;thickbox&quot;&gt;
	&lt;img src=&quot;http://examble.com/image-thumb.png&quot; alt=&quot;Image&quot; /&gt;
&lt;/a&gt;
</pre>
<h3>Set class automatically</h3>
<p>Alternatively you can set the class automatically. The following function in <code>functions.php</code> of the theme does that, but it's not guaranteed that it works in all cases.</p>
<pre lang="php">
/*
 * Thickbox scan, add class for a
 */
function fb_add_thickbox($content){

	$content = preg_replace(&#039;/&lt;a(.*?)href=&quot;(.*?).(jpg|jpeg|png|gif|bmp|ico)&quot;(.*?)&gt;&lt;img/U&#039;, &#039;&lt;a$1href=&quot;$2.$3&quot; $4 class=&quot;thickbox&quot;&gt;&lt;img&#039;, $content);

	return $content;
}
add_filter(&#039;the_content&#039;, &#039;fb_add_thickbox&#039;, 2);
</pre>
<h3>Other JavaScripts</h3>
<p>WordPress offers the developers a range of other libraries and extensions to use them. The implementation of the displayed example above shows that there are no or just few difficulties and the different libraries don't disturb each other. Also it's not necessary to load some libraries several times, which happens because of some Plugins.</p>
<p>You can find quite a lot of keys in <code>/wp-includes/script-loader.php</code>. It's worth it to check them out. Here is just a selection of keys:</p>
<ul>
<li><code>prototype</code></li>
<li><code>scriptaculous-root</code></li>
<li><code>scriptaculous-builder</code></li>
<li><code>scriptaculous-dragdrop</code></li>
<li><code>scriptaculous-effects</code></li>
<li><code>scriptaculous-slider</code></li>
<li><code>scriptaculous-sound</code></li>
<li><code>scriptaculous-controls</code></li>
<li><code>jquery</code></li>
<li><code>jquery-form</code></li>
<li><code>jquery-color</code></li>
<li><code>interface</code></li>
<li><code>suggest</code></li>
<li><code>schedule</code></li>
<li><code>jquery-hotkeys</code></li>
<li><code>thickbox</code></li>
<li><code>swfupload</code></li>
<li><code>swfupload-degrade</code></li>
<li><code>swfupload-swfobject</code></li>
<li><code>jquery-ui-core</code></li>
<li><code>jquery-ui-tabs</code></li>
<li><code>jquery-ui-sortable</code></li>
<li><code>jquery-ui-draggable</code></li>
<li><code>jquery-ui-resizable</code></li>
<li><code>jquery-ui-dialog</code></li>
<li><code>wp-gears</code></li>
<li><code>farbtastic</code></li>
</ul>
<p>If you deliver a key, you can also deliver it in an array, which extension is necessary.</p>
<pre lang="php">
wp_enqueue_script( &#039;scriptaculous&#039;, &#039;&#039;, array(&#039;scriptaculous-dragdrop&#039;, &#039;scriptaculous-slider&#039;, &#039;scriptaculous-controls&#039;), &#039;1.8.0&#039;)
</pre>
<h3>Own scripts</h3>
<p>Alternatively you can include your own scripts with the help of the function. Here an example:</p>
<pre lang="php">
wp_enqueue_script( &#039;my_script&#039;,  plugins_url($path = &#039;my_plugin_folder/js/my_script.js&#039;), array(&#039;jquery&#039;) );
</pre>
<p>It is not necessary to use just js-files, you can also work with PHP, if you like to use some variables of PHP</p>
<pre lang="php">
wp_enqueue_script( &#039;my_script&#039;,  plugins_url($path = &#039;my_plugin_folder/js/my_script.php&#039;), array(&#039;jquery&#039;) );
</pre>
<p>Do you assume a specific version of the library, you can also deliver the version.</p>
<pre lang="php">
wp_enqueue_script( &#039;my_script&#039;,  plugins_url($path = &#039;my_plugin_folder/js/my_script.php&#039;), array(&#039;jquery&#039;), &#039;1.2.1.3&#039; );
</pre>
<p>This post should show you how to avoid complications with other libraries by using Plugins. The usage of this function is not only for Plugins, you can use it in your WordPress theme too.<br />
<hr /><a href="http://wpplugins.com/plugin/281/snippets" title="More informations about this plugin for WordPress"><img src="http://wpengineer.com/wp-content/themes/wpe-3/images/snippets-125-125.png" height="90" alt="WordPress Snippet Plugin" /></a> <a href="http://xtreme-theme.com"><img src="http://wpengineer.com/wp-content/uploads/feed-banner-2.jpg" alt="Xtreme One WordPress Framework"/></a><br />
&copy; <a href="http://wpengineer.com/">WP Engineer Team</a>, All rights reserved <small>(Digital Fingerprint: WPEngineer-be0254ce2b4972feb4b9cb72034a092d)</small></p>
]]></content:encoded>
			<wfw:commentRss>http://wpengineer.com/415/use-javascript-libraries-in-and-of-wordpress/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

