Tag Archives: gallery

Full Screen Slideshow in Javascript

Posted on by

So I now have a full screen slideshow in Javascript, without using flash, and I wanted to tell you how I did it, and how you can do it too. I will talk a bit about Javascript here, but you will be able to download the jQuery plugin I have without needing to know much, if all you want is to implement the gallery.

I got the idea for this plugin after looking at a flash version of Scott Kelby’s portfolio. I just wanted to give it a try in Javascript.

I have created a permanent page for bgStretcher2, so it is easier to find from the side bar, so look here.

How to use Thickbox

Posted on by

I have had a lot of hits on my How to use Lytebox post, and I thought I might continue it as a series and do something on another of the light box clones. It also looks like lytebox has been discontinued by the author. I have started to use Thickbox. Why you ask? It uses jQuery, and I am starting to really like that library. One of the things that drew me to lytebox was that it had no dependencies. But now, more sites require javascript anyway, and my library of choice is jQuery. So, if I am using jQuery, why not the Thickbox plugin?

If you are not sure about this library, check out this matrix that lists just about every light box type javascript library around.

Continue reading →

Zen Photo Press

Posted on by

I am not sure how I missed this. There is a plugin for WordPress called ZenPhotoPress. I even had ideas of trying to do this myself. Anyway, what this does, is allow you to get your photo’s from Zen Photo into your wordpress blog. It is built into the visual editor (tiny mce).

I have been working on a gallery with Zen Photo with my Cyberward theme. Still trying to decide what I want to do with it, but I think that I will move to migrate my family photos over to Zen Photo instead of Gallery.

Zen Photo just seems better in my opinion. Gallery (actually Gallery2) seems slow and burdened. Too many things activated and going on by default.¬† Zen Photo has fewer plugins, but that’s ok by me. It seems much easier to hack on too. I guess now I just need to time to do this.

How to use Lytebox

Posted on by

Note: lytebox appears to be discontinued by the author. See also Thickbox.

I was recently asked how to use lytebox in a gallery. The instructions at lyteboxes web page has several examples, but I guess they can seem a little overwhelming for some people, so I put together as basic an example as I could think of. It looks like this.

In this example, we are only dealing with useing lytebox with images in gallerys. There are lots of ways to use this library, and you can check his web page for the other options.

First, in order to use this library you need to get some files moved over. There are three things you need:

  1. lytebox.js
  2. lytebox.css
  3. images folder

These files need to be placed in the folder where your html file is going to be. So, for our example, this is what I have :

  1. index.html
  2. lytebox.js
  3. lytebox.css
  4. gallery.css
  5. images (folder)
  6. pictures (folder)

index.html is the gallery html file that has the thumbnails and pulls everything together. gallery.css is a css file to style our little gallery just a bit. You don’t need this file at all. The pictures folder is where I have all my images. You can organize your images how you would like.

Ok, lets look that what index.html looks like. The first thing you need to do is put some code in the <head> tag. This is to tell the browser where the lytebox css and js files are.

Then you need to create the links in the body of your document. I have chosen to link thumbnails to larger size images. Here is the code to one image:

So, the path to the thumbnail is in the img tag. That is what shows up first. Then, in the a tag, you add the rel attribute. This is not really standard html. Html is not using the rel attribute, so lytebox has decided to use the attribute to signal it that you are linking the image within the href of the a tag through lytebox. This all happens in the background when your document loads, the lytebox.js file scans your document looking for these rel attributes, and adds some code to make it all work.

Also, look at the this: rel=”lytebox[gallery1]”. To make this work, you only need to say rel=”lytebox”. We put “gallery1” inside the [] to link all these images together. This way lytebox knows to link these images together with “next” and “previous” buttons when the larger image comes up. In the example that I have here, I have two gallery’s, “gallery1” and “gallery2” so you can see how they work. One gallery per line.

Simple? Ok, so here is all the code in our example. I have here the code for the index.html and the gallery.css file. I have not listed the lytebox code. You can download that here.



	Lytebox Example
	
	
	


	
Lytebox Example Gallery

	
	
	
	
	

	
	
	
	



body {
	background-color: black;
	text-align: center;
}
h1 {
	color: white;
	font-family: sans-serif;
}
img {
	border: solid 1px gray;
}
img:hover {
	border: solid 1px white;
	/* doesn't work in ie */
}

Check out the finished gallery here.

Moving Pictures via Javascript

Posted on by

Ok, I had promised to let anyone know that happened to be reading before Christmas, that I would talk about the collage script that I am using on the Christoper Ward Photography site. I am using the lytebox script when you click on an image, but the collage image that moves the pictures around the screen is all mine.

You can get the html source from that page. Here is the Javascript and the CSS files that are used. You can use this code, but please leave the Javascript comment header with my name on it.

/*
	collage javascript
	
	You are free to use this script provided you include this header

	Created by Chris Ward
	veggie2u@cyberward.net
	http://www.cyberward.net/blog/
*/

function Collage(pName) {
	this.name = pName;
	this.state = "closed";
	Collage.list[Collage.quantity] = this;
	Collage.quantity += 1;
}

Collage.prototype.open = function() {
	Collage.closeAll();
	for( i=0; i < this.endPoints.length; i++ ) {
		$image = this.name+'img'+(i+1);
		new Effect.Move($($image), { x:this.endPoints[i][0], y:this.endPoints[i][1], mode: 'absolute' });
	}
	this.state = "open";
}

Collage.prototype.close = function() {
	for( i=0; i < this.endPoints.length; i++ ) {
		$image = this.name+'img'+(i+1);
		new Effect.Move($($image), { x:this.startPoint[0], y:this.startPoint[1], mode: 'absolute' });
	}
	this.state = "closed";
}

Collage.prototype.swap = function() {
	if( this.state == "closed" ) {
		this.open();
	} else {
		this.close();
	}
}

Collage.closeAll = function() {
	for( i=0; i < Collage.quantity; i++ ) {
		var $aCollage = Collage.list[i];
		if( $aCollage.state == "open" ) {
			$aCollage.close();
		}
	}
}

function doOnLoad() {
	$$('img.collageImg').each(function(s) {
		s.show();
	});
	collage1.swap();
}

Collage.quantity = 0;
Collage.list = new Array();

var collage1 = new Collage("g1");
collage1.endPoints = [ [280, 80], [300, 180], [400,100], [580,120], [500,200], [280,400], [340,320], [540,290], [480,380], [620, 440] ];
collage1.startPoint = [4, 60];

var collage2 = new Collage("g2");
collage2.endPoints = [ [220, 100], [360, 120], [280,220], [300,390], [380,300], [580,100], [500,180], [470,420], [560,330], [660, 420] ];
collage2.startPoint = [4, 180];

var collage3 = new Collage("g3");
collage3.endPoints = [ [280, 80], [240, 230], [400,100], [460,180], [280,400], [340,320], [540,290], [600, 400], [580, 130], [480,380] ];
collage3.startPoint = [4, 300];

var collage4 = new Collage("g4");
collage4.endPoints = [ [280, 80], [300, 230], [400,100], [540,120], [580,200], [340,400], [280,320], [480,290], [540,380], [700, 110], [650, 350] ];
collage4.startPoint = [4, 420];

body {
	background: black;
	margin:0;
	padding:0;
	height:100%;
}

#albums {
	position:absolute;
	top:10px;
	left:20px;
}

#about {
	position:absolute;
	top:530px;
	left:10px;
}

#about img {
	border:0;
}
#about a {
	text-decoration:none;
}

#title {
	position:absolute;
	top:10px;
	left:220px;
}

#collages {
	background-image:url("./images/albums_background.png");
	position:absolute;
	left:0;
	top:0;
	width: 180px;
	height: 100%;
	margin-top:0px;
	margin-bottom:0px;
}
#collages img {
	margin: 10px;
}

#content {
	margin-left:180px;
	color:white;
}
#content img {
	border:0;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.collageImg {
	border: 1px solid white;
}

.collageThumb {
	opacity:0.4;filter:alpha(opacity=40);
	border: 1px solid white;
}

#g1img1, #g1img2, #g1img3, #g1img4, #g1img5, #g1img6, #g1img7, #g1img8, #g1img9, #g1img10, #g1img11 {
	position: absolute; top: 60px; left: 4px;
}
#g1img11 {
	opacity:0.4;filter:alpha(opacity=40);
}

#g2img1, #g2img2, #g2img3, #g2img4, #g2img5, #g2img6, #g2img7, #g2img8, #g2img9, #g2img10, #g2img11 {
		position: absolute; top: 180px; left: 4px;
}
#g2img11 {
		opacity:0.4;filter:alpha(opacity=40);
}

#g3img1, #g3img2, #g3img3, #g3img4, #g3img5, #g3img6, #g3img7, #g3img8, #g3img9, #g3img10, #g3img11 {
		position: absolute; top: 300px; left: 4px;
}
#g3img11 {
		opacity:0.4;filter:alpha(opacity=40);
}

#g4img1, #g4img2, #g4img3, #g4img4, #g4img5, #g4img6, #g4img7, #g4img8, #g4img9, #g4img10, #g4img11, #g4img12 {
		position: absolute; top: 420px; left: 4px;
}
#g4img12 {
		opacity:0.4;filter:alpha(opacity=40);
}

The way that it is implemented is pretty simple. In order to make this work, I relied on a naming convention. Lets look at one image:

The id of the image is set to g1 for 'gallery 1', img1 for 'image 1'. If you look at the html, I had to add this logical id to every image. This is a very tedious process. There is also the code for lytebox, namely the rel="lytebox[one]" to launch the lytebox script when the image is clicked, and link all the 'one' galleries together. The other thing on this line is the style="display:none;" part. This bugs me, but it appears to be a css limitation I can't get around. Because all the images are stacked, they all appear in turn as they are downloaded without this. If I put this style in the css, then javascript can't turn it back on! It has to be an inline style. I would love to hear a solution for this.

Then we have one more line from the html file to look at.

This line is the last line in each gallery, and is the last image repeated. This is the one that will not move, and forms the thumbnail for the gallery. Via css, the transparency is lowered when the collage is out. This image contains the onClick call to move the images.

Now onto the javascript. Look at this bit of code that defines a collage:

var collage1 = new Collage("g1");
collage1.endPoints = [ [280, 80], [300, 180], [400,100], [580,120], [500,200], [280,400], [340,320], [540,290], [480,380], [620, 440] ];
collage1.startPoint = [4, 60];

This defines gallery 1 ("g1"). All those numbers are the end points for where each image will be when the collage is expanded. Again, this is a pain, and it can be confusing which image you are adjusting when changing the numbers.

So lets look at the open function:

Collage.prototype.open = function() {
	Collage.closeAll();
	for( i=0; i < this.endPoints.length; i++ ) {
		$image = this.name+'img'+(i+1);
		new Effect.Move($($image), { x:this.endPoints[i][0], y:this.endPoints[i][1], mode: 'absolute' });
	}
	this.state = "open";
}

This is pretty simple. Once I found the Effect.Move() function of scriptaculous, this simply loops over the images in the gallery, and tells the Move function to move the images from where it is (stacked with the others), to the endpoint. The close is similar. It moves the images from where they are (the endpoints) to the start point that was defined in the gallery definition.

The rest of the script is pretty simple. The other methods show all the images (doOnLoad), or set up the swap.

What could be improved? A lot. I don't like defining the galleries and the images through the id field. The user of the collage js has to have intimate knowledge of how the script works in order to set it up. Not only that, but you need matching elements defined in CSS correctly. Having the end point definitions in the js is a pain too. Would would be better, is to come up with a way to have the javascript scan the html and look for images to use, much like how lytebox does it via the rel attribute. Well, guess what? That is exactly what I am working on!

Integrating with WordPress

Posted on by

I probably should be working on the 2.7 upgrade, but instead I started looking at photo gallery options other than Gallery2. It is just too slow. There is too much of it I don’t use as well. I think I have settled on zenphoto. It seems to work pretty well, with out the feature creep that Gallery2 has. I figured I would convert the annieandchris.net site to that.

It got me thinking though about how I might integrate it with WordPress. After seeing the tantan Flickr plugin, and how well it works, I figured that there must be a plugin for zenphoto. Well, no. Not really. There are a couple that will let you show pictures in the sidebar. And Trung’s presszen looked promising, but it didn’t seem to work. I started taking a look at the code for the tantan Flicker plugin, and saw how he was able to take control of a URI to insert his own code in with the current wordpress theme. I stripped out the relevant stuff, and got it to work. This is the code.

function parse_query(&$query) {
	$query->is_404 = false;
	$query->did_permalink = false;
}
function request($query_vars) {
    $query_vars['error'] = false;
    return $query_vars;
}

function cww_template() {
	get_header();
	echo '



Zen Integration



';
	get_footer();
	exit;
}

define("CWW_ZEN_BASEURL", "/blog/test");
if (strpos($_SERVER['REQUEST_URI'], CWW_ZEN_BASEURL) === 0) {
    status_header(200);
    remove_action('template_redirect', 'redirect_canonical');
    add_filter('request', 'request');
    add_action('parse_query', 'parse_query');
    add_action('parse_request', 'parse_query');
    add_action('template_redirect', 'cww_template');
} elseif (strpos($_SERVER['REQUEST_URI'].'/', CWW_ZEN_BASEURL) === 0) {
    header('location: http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'].'/');
    exit;
}
?>

I think that I may take a go at pulling in the zenphoto albums in a plugin, and see how it goes. I like how you create plugins in WordPress, and it is kind of fun poking around. It was frustrating for the longest time when I was trying to get it going, and I was getting the body of the blog showing up at the bottom. I finally realized that I needed to ‘exit’ the script to prevent the loop from happening. You would think you could override a WordPress function to prevent that instead.

My Provider is not #1

Posted on by

I use 1 and 1 as my web provider. Can’t say that I am completely happy with them. The site can be slow at times, and yesterday and today there have been periods where it was down completely. I do like that I have a full working shell, and can SSH and SCP files to and from that box easily, but the shell can be ridiculously slow. I tried to look for a replacement. I signed up for dreamhost for a bit. When I started with them, it seemed good. The shell seemed much better… but gallery sucked. Gallery is what I use with the family photo site. After looking around the internet, I discovered that many people did not like running gallery on dreamhost for performance reasons. I heard it was the use of remote NFS shares for drive space, but don’t know for sure if 1 and 1 did anything different. Sigh.