<?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>Dhanushka.net &#187; My Space</title>
	<atom:link href="http://dhanushka.net/home/index.php/category/my-space/feed/" rel="self" type="application/rss+xml" />
	<link>http://dhanushka.net/home</link>
	<description></description>
	<lastBuildDate>Sun, 23 May 2010 05:03:58 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Adding Lightbox feature to Omeka</title>
		<link>http://dhanushka.net/home/index.php/2009/12/adding-lightbox-feature-to-omeka/</link>
		<comments>http://dhanushka.net/home/index.php/2009/12/adding-lightbox-feature-to-omeka/#comments</comments>
		<pubDate>Wed, 30 Dec 2009 21:06:15 +0000</pubDate>
		<dc:creator>dhanu</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Library]]></category>
		<category><![CDATA[My Space]]></category>
		<category><![CDATA[Omeka]]></category>
		<category><![CDATA[Technology]]></category>

		<guid isPermaLink="false">http://dhanushka.net/home/?p=165</guid>
		<description><![CDATA[The following article would show how to add lightbox feature to an Omeka theme.
Download lightbox and place the lightbox directory inside /themes/theme-name/common/ directory.
now open the /themes/theme-name/common/header.php in an editor and add the following code before 

&#60;!-- Start Lightbox includes --&#62;
&#60;link rel=&#34;stylesheet&#34; media=&#34;screen&#34; href=&#34;&#60;?php echo WEB_ROOT;?&#62;/themes/theme-name/common/lightbox/css/lightbox.css&#34; /&#62;
&#60;script type=&#34;text/javascript&#34; src=&#34;&#60;?php echo WEB_ROOT;?&#62;/themes/theme-name/common/lightbox/js/prototype.js&#34;&#62;&#60;/script&#62;
&#60;script type=&#34;text/javascript&#34; src=&#34;&#60;?php echo WEB_ROOT;?&#62;/themes/theme-name/common/lightbox/js/scriptaculous.js?load=effects,builder&#34;&#62;&#60;/script&#62;
&#60;script type=&#34;text/javascript&#34; src=&#34;&#60;?php echo WEB_ROOT;?&#62;/themes/theme-name/common/lightbox/js/lightbox.js&#34;&#62;&#60;/script&#62;
&#60;!-- End Lightbox includes --&#62;

Now the ground work is done and it&#8217;s time to add the lightbox functionality to the item show page. Open the Now Show.php page located in /themes/theme-name/items/ and replace ...]]></description>
			<content:encoded><![CDATA[<p>The following article would show how to add lightbox feature to an Omeka theme.</p>
<p>Download lightbox and place the lightbox directory inside /themes/theme-name/common/ directory.<br />
now open the /themes/theme-name/common/header.php in an editor and add the following code before </head></p>
<pre class="brush: html">
&lt;!-- Start Lightbox includes --&gt;
&lt;link rel=&quot;stylesheet&quot; media=&quot;screen&quot; href=&quot;&lt;?php echo WEB_ROOT;?&gt;/themes/theme-name/common/lightbox/css/lightbox.css&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;&lt;?php echo WEB_ROOT;?&gt;/themes/theme-name/common/lightbox/js/prototype.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;&lt;?php echo WEB_ROOT;?&gt;/themes/theme-name/common/lightbox/js/scriptaculous.js?load=effects,builder&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;&lt;?php echo WEB_ROOT;?&gt;/themes/theme-name/common/lightbox/js/lightbox.js&quot;&gt;&lt;/script&gt;
&lt;!-- End Lightbox includes --&gt;
</pre>
<p>Now the ground work is done and it&#8217;s time to add the lightbox functionality to the item show page. Open the Now Show.php page located in /themes/theme-name/items/ and replace the following code</p>
<pre class="brush: php">
&lt;!-- The following returns all of the files associated with an item. --&gt;
&lt;div id=&quot;itemfiles&quot; class=&quot;element&quot;&gt;
	&lt;h3&gt;Files&lt;/h3&gt;
	&lt;div class=&quot;element-text&quot;&gt;&lt;?php echo display_files_for_item(); ?&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>with the code below</p>
<pre class="brush: php">
&lt;!-- The following returns all of the files associated with an item. --&gt;
&lt;div id=&quot;itemfiles&quot; class=&quot;side-element&quot;&gt;
	&lt;h3&gt;Files&lt;/h3&gt;
	&lt;div class=&quot;element-img&quot;&gt;
		&lt;!-- Create the image thumbnail with a Lightbox link --&gt;
		&lt;?php
		$item = get_current_item();
		$files = $item-&gt;getFiles();
		foreach($files as $file) {
			echo &#039;&lt;a href=&quot;&#039; . file_download_uri($file) . &#039;&quot;rel=&quot;lightbox&quot; title=&quot;&#039;.item(&#039;Dublin Core&#039;, &#039;Title&#039;).&#039;&quot; class=&quot;download-file&quot;&gt;&#039;;
			echo item_thumbnail();
			echo &#039;&lt;/a&gt;&#039;;
		}
		?&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>I developed this code to an Omeka system which is been used exclusivly for images, but if you have other artifacts such as PDFs then place a simple check like given below.</p>
<pre class="brush: php">
&lt;!-- The following returns all of the files associated with an item. --&gt;
&lt;div id=&quot;itemfiles&quot; class=&quot;side-element&quot;&gt;
	&lt;h3&gt;Files&lt;/h3&gt;
	&lt;div class=&quot;element-img&quot;&gt;
		&lt;!-- Create the image thumbnail with a Lightbox link --&gt;
		&lt;?php
		if (item_has_thumbnail()) {
			$item = get_current_item();
			$files = $item-&gt;getFiles();
			foreach($files as $file) {
				echo &#039;&lt;a href=&quot;&#039; . file_download_uri($file) . &#039;&quot;rel=&quot;lightbox&quot; title=&quot;&#039;.item(&#039;Dublin Core&#039;, &#039;Title&#039;).&#039;&quot; class=&quot;download-file&quot;&gt;&#039;;
				echo item_thumbnail();
				echo &#039;&lt;/a&gt;&#039;;
			}
		}
		else{
			echo display_files_for_item();
		}
		?&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Now test it out and see. If the loading image and close button is not appering it might be due to relative path in lightbox not working. To fix it open the /themes/theme-name/common/lightbox/js/lightbox.js and locate the following piece of code around line 50.</p>
<pre class="brush: js">
fileLoadingImage:        &#039;images/loading.gif&#039;,
fileBottomNavCloseImage: &#039;images/closelabel.gif&#039;,
</pre>
<p>Now replace it with the following.</p>
<pre class="brush: js">
fileLoadingImage:        &#039;/omeka/themes/theme-name/common/lightbox/images/loading.gif&#039;,
fileBottomNavCloseImage: &#039;/omeka/themes/theme-name/common/lightbox/images/closelabel.gif&#039;,
</pre>
<p>I tested this code with Omeka 1.1 and Lightbox 2.04</p>
]]></content:encoded>
			<wfw:commentRss>http://dhanushka.net/home/index.php/2009/12/adding-lightbox-feature-to-omeka/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
