Cyberward.net » gallery

Full Screen Slideshow in Javascript

Chris Ward — Mon, 01 Feb 2010 11:30:54 +0000

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

Chris Ward — Mon, 13 Apr 2009 17:49:49 +0000

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.

Setting up¬†Thickbox

The thickbox site has great examples too. It is not hard to set up. Head over to the Thickbox site and grab the files. What you need to get are the thickbox.js file, the thickbox.css file, the loadingAnimation.gif, and the macFFBgHack.png. More on the images in a minute.

Don’t forget, this is a plugin, or aditional library that builds on jQuery, so you will need to download¬†jQuery too. You will only need one file: jQuery.js. For these¬†examples I am not using the compressed versions, but you could. Both jQuery and Thickbox offer compressed versions of their javascript libraries. They might be worth using in a production environment, but I will use the fully spaced files here.

Ok, first up, I like to have a bit of structure to my web sites. I like to have js, css,¬†images, and pictures folders. You don’t have to, but this is what I do. I put my javascript into the js folder. I put style sheets into css, icons and graphics for the site into images, and photographs into the pictures folder. So for this example, that is where¬†I put the files.¬†

/examples/thickbox/js/jquery.js
                 /js/thickbox.js
                 /css/thickbox.js
                 /images/loadingAnimation.gif
                 /images/macFFBgHack.png

A few little tweaks

If you put all of the files into /examples/thickbox/, and not into the structure like we have, you wouldn’t need to do this step, but if you did, we need to edit a couple of thickbox files to let them know what we did.

You can edit files in any number of ways. If you are on a web server running linux, you might want to try nano. It is pretty easy to use, and gives you some ctrl key combinations at the bottom for thigs like saving and searching.

To edit the index html file in nano type:

nano -w index.html

You can move around using the cursor keys, and the terminal will scroll for you. When you want to exit and save, press ctrl-x.

First is the /js/thickbox.js file. We need to modify were the loading animation is located. Change that line to:

var tb_pathToImage = "images/loadingAnimation.gif";

This line is inserted into generated html, so the path is relative to the html page created.

Then we need to look at the /css/thickbox.cc file. We need to navigate down through that file and find the .TB_overlayMacFFBGHack class. Change that to:

.TB_overlayMacFFBGHack {background: url(../images/macFFBgHack.png) repeat;}

What are these files for? The loading animation is a little bar that shows up inbetween when you click on the image, and the larger one is ready. The overlay image is to help firefox on Mac’s provide the screen dimming over flash.

Including our files.

To get our files ‘included’ into a html document, we need to put some lines into the head of the document, like this:

^?View Code HTML

1
2

That’s all there is to it. The two script tags insert the javascript, and the link tag inserts the stylesheet.

Apply the effect

Thickbox uses the jQuery library. This means that it is all about selectors. That usually means that we use css class names in our javascript to identify elements on a page. Thickbox uses the “thickbox” class to identify what images to apply this effect to.

Here is a line of html that displays a thumbnail, and when you click on it, it takes you to a different page and displays it full screen.

^?View Code HTML

1
2

Here is a line of html that displays a thumbnail, and when you click on it, it uses the thickbox javascript to display the light box type effect.

^?View Code HTML

Not much different is there? The only difference is the class=”thickbox”. I think that is pretty cool. How about linking several images together so that you can use next and previous buttons to link them? You just need to add a rel=”xxx” where xxx is the name of the gallery. As long as this text is the same for each image you want linked together, it can be anything.

^?View Code HTML

1
2

The full example

What I show now is a full example of using this to create a gallery. A very simple one. Not going to win any style awards, but it will do. There are 3 versions of the index.html file here. One without the thickbox effect at all (index.html), one with the thickbox effect (index2.html), and one with thickbox using gallerys¬†(index3.html). To make this work I have also added another css file: /css/gallery.css.

^?View Code HTML

 
  
  
Thickbox Example Gallery

    No Thickbox
    Using Thickbox
    Thickbox with Galleries

  
  
  
 
  
  
  
  
Cyberward blog post on Thickbox

^?View Code CSS

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

There you have it. A pretty simple gallery. Fell free to copy it. You will just need to download the files from jQuery and Thickbox, and get your own images. Have fun.

Zen Photo Press

Chris Ward — Fri, 13 Mar 2009 21:26:24 +0000

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

Chris Ward — Sun, 01 Mar 2009 05:25:02 +0000

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:

lytebox.js
lytebox.css
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 :

index.html
lytebox.js
lytebox.css
gallery.css
images (folder)
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 tag. This is to tell the browser where the lytebox css and js files are.

^?View Code HTML

1
2

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:

^?View Code HTML

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.

^?View Code HTML



	Lytebox Example
	
	
	


	Lytebox Example Gallery

^?View Code CSS

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

Chris Ward — Tue, 13 Jan 2009 13:00:47 +0000

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:

^?View Code JAVASCRIPT

1	<a href="./pictures/Blue/Erie Night.jpg" rel="lytebox[one]" title="Erie Night"><img id="g1img1" class="collageImg" style="display:none;" src="./pictures/Blue/Erie Night (1).jpg"/>a>

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.

^?View Code JAVASCRIPT

1	<a href="#" onClick="collage1.swap();"><img id="g1img11" class="collageThumb" src="./pictures/Blue/Montana Road (1).jpg"/>a>

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:

^?View Code JAVASCRIPT

1
2
3

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:

^?View Code JAVASCRIPT

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

Chris Ward — Mon, 15 Dec 2008 05:39:36 +0000

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.

^?View Code PHP

function parse_query(&amp;$query) {
	$query-&gt;is_404 = false;
	$query-&gt;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

Chris Ward — Thu, 19 Jun 2008 23:39:14 +0000

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.

Cyberward.net » gallery

Full Screen Slideshow in Javascript

How to use Thickbox

Setting up¬†Thickbox

A few little tweaks

Including our files.

Apply the effect

The full example

Thickbox Example Gallery

No Thickbox Using Thickbox Thickbox with Galleries

Cyberward blog post on Thickbox

Zen Photo Press

How to use Lytebox

Lytebox Example Gallery

Moving Pictures via Javascript

Integrating with WordPress

Zen Integration

My Provider is not #1