# Bloxsom Plugin: ImageGalleryJQ
# Author: Mike Downey
# Version: 1.0
# Based on ImageGallery 0.5
# by Fletcher T. Penney

# Changes from ImageGallery
# 0.8	25/03/06	Shows thumbnails in normal view rather than the 'you must view
#			story' message. Thumbnails appear above the single image.
# 0.9	08/09/14	Uses JQuery to load gallery images without having to reload the page
# 1.0   10/08/14	Code tidied up, removed old unused gallery code.

package imagegallery;

# --- Configurable variables ----

# URL for images directory - will be added to beginning of images for the web browser to find them
$images_url = "/gallery";

# Filepath for images directory on the server
# This gets added to the gallery to find the files
$images_path = "/htdocs/gallery/";

# Default thumbnail sub-directory name
$thumbdir="thumbnails";

# Default image sub-directory name
$imagesdir="images";

# Default comments sub-directory name
$commentsdir="comments";

# Default number of columns
$columns = 5;

# HTML Code for gallery pieces
$galleryhead = "&nbsp;</p>";

$galleryrowstart = "<div class=\"centred\">";
$galleryrowend = "</div>";

$gallerycolstart = "";

$gallerycolend = "\n";

$galleryfoot = "";

# HTML Code for single image view

$imagehead = "<div class=\"centered\">";
$imagefoot = "</div>";

# Extensions for valid image types to display
$imagetypes = "jpg|gif|png";

# -------------------------------
$path_noflavour = "";
$gallery="";
$gallerypath="";
$comments = "";

use File::Find;
use CGI;

sub start {
	$path_noflavour = $blosxom::path_info;
	if ($path_noflavour !~ s/\.[^\.]*$//) {
		$path_noflavour =~ s/\/$//;
		$path_noflavour .= "\/index";
		$path_noflavour =~ s/^([^\/])/$1/;
	}
	$path_noflavour =~ s/^\/*//;

}

sub story {
	
	$comments="";
	my ($pkg, $path, $filename, $story_ref, $title_ref, $body_ref) = @_;

	if ($$body_ref =~ /<!-- imagegallery\s*(\S*)\s*-->/i) {
		$galleryname = $1;
		$gallerypath= $galleryname . "\/" if $1 ne "";
		$gallerypath =~ s/\/\//\//g;
	} else {
		return 1;
	}

	if (($blosxom::flavour =~"rss")) {
		$gallery = "";
		#$gallery = "&lt;br&gt; You must view this story individually to &lt;a href=&quot;$blosxom::url$path/$filename.$blosxom::default_flavour&quot; see the images&lt;/a&gt;.";
	return 1;
	}


	$galleryfoot = "<p id='placeholder$galleryname'>Click on the thumbnail to view the image</p>
	<p id='desc$galleryname'> </p>";

	$gallery_url = "$images_url/$gallerypath";
	$gallerypath = "$images_path/$gallerypath";

	# Start with the JQuery code to display the images.
	$gallery=qq!
	<script>
	function handleimage(filename){

	\$(document).ready(function(){
	  var fe = filename.substr(0, filename.lastIndexOf('.'));
	  var commentfile = "$gallery_url$commentsdir/"+fe+".txt";
	  \$("#$galleryname"+fe).click(function(){
			var img = new Image();
			\$(img).load(function(){
			\$('#placeholder$galleryname').html(\$(this));
		}).attr({
			src: "$gallery_url$imagesdir/"+filename
		});		
		\$("#desc$galleryname").load(commentfile);
	  });
	});
}
</script>!;
	

	# Now, find out how many images there are, and where
	my(@images);

	find(sub {
		$File::Find::name =~ /($imagetypes)$/i
		and
		push (@images, $File::Find::name)
		;}, $gallerypath . $imagesdir);
	
	# Sort them.
		@images = sort @images;

	# Now fill out gallery
	if (scalar(@images) > 0) {
		$gallery .= $galleryhead . $galleryrowstart;
		# append to gallery so thumbnails follow main image
		my $count = 0;
		foreach $image (@images) {
			$count++;
			if ($count gt $columns) {
				$count = 1;
				$gallery.= $galleryrowend . $galleryrowstart;
			}
			$image =~ s/$images_path/$images_url/;
			$thumb = $image;
			$thumb =~ s/(.*)$imagesdir/$1$thumbdir/;

			$imagefile = $image;
			$imagefile =~ s/.*?([^\/]*)$/$1/;
			
			$imagefile =~ s/ /%20/g;	# escape spaces in image name
			$thumb  =~ s/ /%20/g;
			
			$imgtag = $galleryname.substr($imagefile, 0, rindex($imagefile, q{.} ));

			$gallery.= qq!$gallerycolstart
				<script>handleimage("$imagefile");</script>			
				<img id="$imgtag" src="$thumb" alt="Thumbnail" border="1" />
				$gallerycolend!;
		}
		$gallery.= $galleryrowend . $galleryfoot;
	} else {
		$gallery = "No images to display... <br>";
	}

	1;
}

1;


__END__


Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
to the <head> section of the web page.
Otherwise configure and use as the old ImageGallery.

Copy this to the plugin folder and rename as imagegallery