<?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>existdissolve.com &#187; jQuery</title>
	<atom:link href="http://existdissolve.com/category/javascript/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://existdissolve.com</link>
	<description>the singularity of being and nothingness</description>
	<lastBuildDate>Wed, 16 May 2012 12:54:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Using Spry Data with Thickbox</title>
		<link>http://existdissolve.com/2009/05/using-spry-data-with-thickbox/</link>
		<comments>http://existdissolve.com/2009/05/using-spry-data-with-thickbox/#comments</comments>
		<pubDate>Fri, 15 May 2009 14:52:28 +0000</pubDate>
		<dc:creator>existdissolve</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Spry Framework]]></category>
		<category><![CDATA[Spry]]></category>
		<category><![CDATA[Thickbox]]></category>

		<guid isPermaLink="false">http://existdissolvetest.wordpress.com/2009/05/15/using-spry-data-with-thickbox</guid>
		<description><![CDATA[If you&#039;ve ever tried to use Spry data sets with a default implementation of Thickbox (a jQuery-based version of the familiar Lightbox), you&#039;ve probably noticed that it doesn&#039;t work. The reason for this, of course, is simple: out of the gates, thickbox.js fires off an initialization function (tb_init) through jQuery&#039;s ready().&#160; What this means, technically,&#8230;]]></description>
			<content:encoded><![CDATA[<p>If you&#039;ve ever tried to use Spry data sets with a default implementation of <a href="http://jquery.com/demo/thickbox/">Thickbox</a> (a jQuery-based version of the familiar Lightbox), you&#039;ve probably noticed that it doesn&#039;t work.</p>
<p>The reason for this, of course, is simple: out of the gates, thickbox.js fires off an initialization function (tb_init) through jQuery&#039;s ready().&nbsp; What this means, technically, is that thickbox has already started its processing and element fishing before Spry&#039;s data sets have been fully loaded and rendered.&nbsp; What this means, practically, is that Thickbox won&#039;t work.</p>
<p>Though frustrating, there is a fairly simple way to work around this. &nbsp;</p>
<p>Conceptually, what we&#039;ll be doing is to bypass jQuery&#039;s ready() function and load tb_init manually AFTER we know Spry&#039;s data sets have fully loaded and rendered.</p>
<p><strong>First</strong>, we need to figure out when the data sets are done processing.&nbsp; This is pretty simple, because Spry comes with a handy way of sniffing this out.</p>
<p>We&#039;ll start by setting up a new data region observer.&nbsp; Our observer will watch the data set and when it reaches the &quot;state&quot; that we define, we can manually fire the thickbox.js processing.</p>
<p>So here&#039;s our new observer:</p>
<p><strong>the_Observer= new Object()<br />the_Observer.onPostUpdate = function() {<br />&nbsp;&nbsp; // Here&#039;s where the thickbox function call will go&#8230;&nbsp;&nbsp; &nbsp;<br />};</strong></p>
<p><strong>Spry.Data.Region.addObserver(&quot;the_region&quot;, the_Observer); </strong></p>
<p>Nothing too complicated here.&nbsp; We create a new Spry region observer, tell it to watch for the &quot;onPostUpdate&quot; state, and then we can load in whatever processing we want to the function we&#039;ve defined for that state.</p>
<p>The next step, then, is to load in the thickbox initialization function.</p>
<p>To do this, start by going to the thickbox.js file.&nbsp; Copy the following lines:</p>
<p><strong>tb_init(&#039;a.thickbox, area.thickbox, input.thickbox&#039;);<br />imgLoader = new Image();// preload image<br />imgLoader.src = tb_pathToImage;</strong></p>
<p>Once you have them copied, go ahead and comment out the entire $(document).ready function, including the lines you just copied.&nbsp; Save and close.</p>
<p>Go back to your other page and paste the three lines into our observer function.&nbsp; The final result will look something like this:</p>
<p><strong>the_Observer= new Object()<br />the_Observer.onPostUpdate = function() {<br />&nbsp;&nbsp; &nbsp;// See?&nbsp; Here&#039;s the init function for thickbox&#8230;<br />&nbsp;&nbsp; &nbsp;tb_init(&#039;a.thickbox, area.thickbox, input.thickbox&#039;);<br />&nbsp;&nbsp;&nbsp; &nbsp;imgLoader = new Image();// preload image<br />&nbsp;&nbsp;&nbsp; &nbsp;imgLoader.src = tb_pathToImage;<br />};</p>
<p>Spry.Data.Region.addObserver(&quot;products&quot;, the_Observer);</strong> </p>
<p>That&#039;s all there is to it.&nbsp; Now your Thickbox content should work correctly.</p>
]]></content:encoded>
			<wfw:commentRss>http://existdissolve.com/2009/05/using-spry-data-with-thickbox/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

