Hey y'all, I was lookin' to create a fancy comic archive script with an admin and all that jazz, but I found that I just didn't have time. But then I realized my needs were so simple, I didn't need an admin tool, database, or any of that. I just wrote a couple lines of html and reference a simple javascript file that handles the page library as an array.

It's not rocket science. It's not fancy. And there's certainly room for improvement. But I figure some of you might be interested in using it, as well.

It's designed more as a page viewer for "long-form" comics - graphic novels online sorta thing. It probably won't be good for the daily strip folks - there're better solutions out there for that. I didn't want an comic archive that was tied into a calendar or blog.

The Sample Files

You can download (rightclick links) sample implementation here:

The page: http://fabricari.com/comics/lending-can-openers/index.php (this can be any thing, even just html.)

The script: http://fabricari.com/comics/lending-can-openers/comic.js

The jpegs and scripts are all in the same directory, but you can put them anywhere, really. Just make sure you update the paths if you do move them.

The How-To

1.Reference the script in the header of your page:

<script src="comic.js" type="text/javascript"></script>

2. Include the comic and nav objects on you page. You can customize the HTML all you like, just don't change the IDs.

<p><a href="" id="a_comic"><img src="" id="img_comic" alt="" style="border: 0px;" /></a></p>
<p><a href="" id="a_firstPage">first</a> | <a href="" id="a_prevPage">prev</a> | <a href="" id="a_nextPage">next</a> | <a href="" id="a_lastPage">last</a></p>
<p><select onchange="fabricariComics_selectPage(this)" id="select_comic"></select></p>

3. Add the script to load the comic at the bottom of your page. (Before the closing body tag.) 

<script language="javascript" type="text/javascript">
	fabricariComics_loadComic();
</script>

4. FTP your images to your server. Add the image filenames to the pages array in the comic.js file (sample below). You can put the images anywhere you want on your site - just make sure to reflect those paths in the array values. I just upload the comic images in same directory as the comic archive - keeping it simple.

//pages array
var pages = new Array(
	"lending-can-openers-001.jpg",
	"lending-can-openers-002.jpg",
	"lending-can-openers-003.jpg",
	"lending-can-openers-004.jpg");

5. Change the page name in comic.js if you decide to rename index.php to something else (ie., myComic.html)

var comicFilename = "index.php";

6. Customize your comic page to include whatever other html and code you want. That's pretty much it. 

The Code 

Here's the code for comic.js if you wanna just copy it from here:

//pages array
var pages = new Array(
	"lending-can-openers-001.jpg",
	"lending-can-openers-002.jpg",
	"lending-can-openers-003.jpg",
	"lending-can-openers-004.jpg");

/////////////////////////////////////////////////////////////////

var comicFilename = "index.php";

function fabricariComics_loadComic() {
	//get page
	var page = getQueryVariable("page");
	
	//validate page
	if (page == "" || page == null) {
		page = 1;
	}
	else if (page < 1) {
		page = pages.length;
	}
	else if (page > pages.length) {
		page = 1;
	}
	
	//set comic
	var img_comic = document.getElementById("img_comic");
	img_comic.src = pages[(page - 1)];
	
	//set links
	var firstPage = 1;
	var prevPage = (parseInt(page) - 1);
	var nextPage = (parseInt(page) + 1);
	var lastPage = (pages.length);
	
	if (prevPage < 1) prevPage = (pages.length)
	if (nextPage > pages.length) nextPage = 1;
	
	var a_firstPage = document.getElementById("a_firstPage");
	var a_prevPage = document.getElementById("a_prevPage");
	var a_nextPage = document.getElementById("a_nextPage");
	var a_lastPage = document.getElementById("a_lastPage");
	var a_comic = document.getElementById("a_comic");
	
	if (a_firstPage != null) {
		a_firstPage.href = comicFilename + "?page=" + firstPage;
	}
	if (a_prevPage != null) {
		a_prevPage.href = comicFilename + "?page=" + prevPage;
	}
	if (a_nextPage != null) {
		a_nextPage.href = comicFilename + "?page=" + nextPage;
	}
	if (a_lastPage != null) {
		a_lastPage.href = comicFilename + "?page=" + lastPage;
	}
	if (a_comic != null) {
		a_comic.href = comicFilename + "?page=" + nextPage;
	}
	
	//load select_comic list
	var select_comic = document.getElementById("select_comic");
	if (select_comic != null) {
		select_comic.options.length = 0;
		
		for (i = 0; i < pages.length; i++) {
			var selectedComic = (parseInt(page) == (i+1)) ? true : false;
			select_comic.options[i] = new Option("Page " + (i+1), comicFilename + "?page=" + (i+1), false, selectedComic);
		}
	}
	
	//preload images
	if (document.images)
    {
      var nextImage = new Image(); 
      nextImage.src = pages[(nextPage - 1)];
      var prevImage = new Image(); 
      prevImage.src = pages[(prevPage - 1)];
      var lastImage = new Image(); 
      lastImage.src = pages[(lastPage - 1)];
      var firstImage = new Image(); 
      firstImage.src = pages[(firstPage - 1)];
    }
}

function getQueryVariable(variable) {
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	
	for (var i=0;i<vars.length;i++) {
		var pair = vars[i].split("=");
		
		if (pair[0] == variable) {
			return pair[1];
		}
	}
} 

function fabricariComics_selectPage(select_comic) {
	var select_comicValue = select_comic.options[select_comic.options.selectedIndex].value;
	document.location = select_comicValue;
}

And here's the code for index.php (or html, or whatever)

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<script src="comic.js" type="text/javascript"></script>
	</head>
	<body>
		<p><a href="" id="a_comic"><img src="" id="img_comic" alt="" style="border: 0px;" /></a></p>
		<p><a href="" id="a_firstPage">first</a> | <a href="" id="a_prevPage">prev</a> | <a href="" id="a_nextPage">next</a> | <a href="" id="a_lastPage">last</a></p>
		<p><select onchange="fabricariComics_selectPage(this)" id="select_comic"></select></p>
		<script language="javascript" type="text/javascript">
			fabricariComics_loadComic();
		</script>
	</body>
</html>