<?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>Esscotti &#187; image gallery script</title>
	<atom:link href="http://www.esscotti.com/category/code/image-gallery-script/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.esscotti.com</link>
	<description>Web development &#38; SEO</description>
	<lastBuildDate>Fri, 06 Aug 2010 07:32:24 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Thumbnail rollover image gallery with captions</title>
		<link>http://www.esscotti.com/2009/11/javascript-css-thumbnail-rollover-image-gallery-captions/</link>
		<comments>http://www.esscotti.com/2009/11/javascript-css-thumbnail-rollover-image-gallery-captions/#comments</comments>
		<pubDate>Sun, 01 Nov 2009 23:54:09 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[image gallery script]]></category>

		<guid isPermaLink="false">http://www.esscotti.com/?p=53</guid>
		<description><![CDATA[This image gallery is implemented in PHP and uses javascript and CSS to display the image under the mouse pointer. The benefit of this rollover effect is that the site visitor can vey quickly browse the images in the gallery. The downside is that all images need to be loaded first. You can see a [...]]]></description>
			<content:encoded><![CDATA[<p>This image gallery is implemented in PHP and uses javascript and CSS to display the image under the mouse pointer. The benefit of this rollover effect is that the site visitor can vey quickly browse the images in the gallery. The downside is that all images need to be loaded first. You can see a variant of this gallery in action at <a href="http://www.orcabags.co.uk/bags.php" target="_blank">http://www.orcabags.co.uk/bags.php</a></p>
<p>Pleae feel free to use this code in any way you want. If you use it on your website then please let me know. Feedback is always welcome.</p>
<p>The images to display in the gallery are specified in a simple text file that defines the image filename and the caption to use for each image. In this example this file is called gallery1.txt and contains the following lines.</p>
<pre class="brush: php;">
img1.jpg;Image caption 1
img2.jpg;Image caption 2
img3.jpg;Image caption 3
img4.jpg;Image caption 4
</pre>
<p>The gallery script assumes that you have two folders 'images' and 'thumbs' in the same place as the gallery1.txt file where all the images are stored. The thumbnails should have the same filenames as their full-size equivalents that are stored in the 'images' folder.</p>
<p>In order to implement this gallery on your page you need to insert the javascript block that you get from calling gallery_script() from gallery.php (gallery.php is listed further down on this page). The resulting string should be placed inside the html header.</p>
<pre class="brush: php;">
&lt;?php
// This is done in the page header...
echo gallery_script('galleries/', 'galleries/gallery1.txt');
?&gt;;
</pre>
<p>Then, in the body of the page, you need to call the function gallery() at the place where you want the gallery to be displayed.</p>
<pre class="brush: php;">
&lt;?php
 gallery('galleries/', 'galleries/gallery1.txt');
?&gt;
</pre>
<p>The gallery is implemented in the gallery.php file and needs to be included at the top of your page.</p>
<pre class="brush: php;">
&lt;?php
 require_once('galleries/gallery.php');
?&gt;
</pre>
<p>The following code is the 'gallery.php' script.</p>
<pre class="brush: php;">
&lt;?php
define('GALLERY_TNWIDTH', '80');
define('GALLERY_TNHEIGHT', '80');
define('GALLERY_NUMCOLS', '2');
define('GALLERY_TNBORDER', '1');

function gallery_script($folder, $gallery, $stickyimage=true) {

 $str = &quot;&lt;script language=\&quot;JavaScript\&quot; type=\&quot;text/JavaScript\&quot;&gt;\n&quot;;
 $str .= &quot;&lt;!--\n&quot;;
 $str .= &quot;var preloadedimages   = new Array();\n&quot;;
 $str .= &quot;var images   = new Array();\n&quot;;
 $str .= &quot;var captions = new Array();\n\n&quot;;
 $str .= &quot;var blankimage;\n&quot;;
 $str .= &quot;blankimage = new Image();\n&quot;;
 $str .= &quot;blankimage.src = \&quot;/img/blank.gif\&quot;;\n&quot;;
 $num = 0;

 if (($handle = @fopen($gallery, &quot;r&quot;)) !== false) {
 // Parse the &quot;images.txt&quot; file and display gallery...
 while (!feof($handle)) {
 $line = fgets($handle);
 $params = explode(&quot;;&quot;, $line);
 $str .= &quot;images[$num] = \&quot;&quot;.trim($params[0]).&quot;\&quot;;\n&quot;;
 $str .= &quot;captions[$num] = \&quot;&quot;.trim($params[1]).&quot;\&quot;;\n&quot;;
 $str .= &quot;preloadedimages[$num] = new Image();\n&quot;;
 $str .= &quot;preloadedimages[$num].src = \&quot;&quot;.$folder.&quot;images/&quot;.trim($params[0]).&quot;\&quot;;\n&quot;;
 $num++;
 }
 fclose($handle);
 }

 $str .= &quot;\nfunction showimage(id) { \n&quot;;
 $str .= &quot;    var str = \&quot;&quot;.$folder.&quot;images/\&quot;+images[id];\n&quot;;
 $str .= &quot;    document.getElementById(\&quot;galleryimage\&quot;).src = str;\n&quot;;
 $str .= &quot;    document.getElementById(\&quot;caption\&quot;).childNodes[0].nodeValue = captions[id];\n&quot;;
 $str .= &quot;}\n&quot;;
 $str .= &quot;\nfunction hideimage(id) { \n&quot;;
 if (!$stickyimage) {
 $str .= &quot;    var str = \&quot;&quot;.$folder.&quot;images/\&quot;+images[id];\n&quot;;
 $str .= &quot;    document.getElementById(\&quot;galleryimage\&quot;).src = \&quot;/img/blank.gif\&quot;;\n&quot;; //str;\n&quot;;
 $str .= &quot;    document.getElementById(\&quot;caption\&quot;).childNodes[0].nodeValue = \&quot;\&quot;;\n&quot;; //captions[id];\n&quot;;
 }
 $str .= &quot;}\n&quot;;
 $str .= &quot;--&gt;\n&quot;;
 $str .= &quot;&lt;/script&gt;\n&quot;;

 return $str;
}

function gallery($folder, $gallery, $stickyimage=true) {

 echo '&lt;div style=&quot;border:0px dashed blue;padding:0px;margin-top:10px;height:1000px;position:relative;&quot;&gt;';
 $num = 0; $rows = 0;
 if (($handle = @fopen($gallery, &quot;r&quot;)) !== false) {
 // Parse the &quot;images.txt&quot; file and display gallery...
 while (!feof($handle)) {
 $line = fgets($handle);
 $params = explode(&quot;;&quot;, $line);
 if ($num%GALLERY_NUMCOLS == 0) { /*echo &quot;&lt;br&gt;&quot;;*/ $rows++; }
 // draw thumbnail...
 echo &quot;&lt;a style=\&quot;padding:4px\&quot; href=\&quot;javascript:void(0);\&quot; onmouseover=\&quot;showimage($num);\&quot; onmouseout=\&quot;hideimage($num);\&quot;&gt;&lt;img src=\&quot;&quot;.$folder.&quot;thumbs/&quot;.$params[0].&quot;\&quot; width=\&quot;&quot;.GALLERY_TNWIDTH.&quot;\&quot; height=\&quot;&quot;.GALLERY_TNHEIGHT.&quot;\&quot; style=\&quot;padding:0px;border:solid &quot;.GALLERY_TNBORDER.&quot;px black\&quot;&gt;&lt;/a&gt;&quot;;
 if ($num == 0) {
 $firstimage = $params[0];
 $firstcaption = $params[1];
 }
 $num++;
 }
 fclose($handle);
 }

 $top = 95;
 $left = 4;
 if (!$stickyimage) {
 echo '&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;div style=&quot;position:absolute;top:'.$top.'px;left:'.$left.'px;&quot;&gt;&lt;img id=&quot;galleryimage&quot; border=&quot;0&quot; src=&quot;/img/blank.gif&quot;&gt;';
 echo '&lt;br&gt;&lt;span id=&quot;caption&quot;&gt;&lt;/span&gt;&lt;/div&gt;';
 } else {
 echo '&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;div style=&quot;position:absolute;top:'.$top.'px;left:'.$left.'px;&quot;&gt;&lt;img id=&quot;galleryimage&quot; border=&quot;0&quot; src=&quot;'.$folder.'images/'.$firstimage.'&quot;&gt;';
 echo '&lt;br&gt;&lt;span id=&quot;caption&quot;&gt;'.$firstcaption.'&lt;/span&gt;&lt;/div&gt;';
 }
 echo '&lt;/div&gt;';
}
?&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.esscotti.com/2009/11/javascript-css-thumbnail-rollover-image-gallery-captions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
