I personally prefer Colorbox to some of the other lightbox modules, but feel free to use whichever one you want, they should all work in the same way. An alternative can be found in Shadowbox. Lightbox2 doesn't have a D7 release at the time of writing and Thickbox has been discontinued, with the maintainer now working on Colorbox.

The following list is the absolute minimum required to get the gallery functionality, if you don't have one of these modules installed you won't be able to complete the tutorial.

Views

Ctools

Colorbox

Fields

Fields UI

Field SQL storage

File

Image

Once you have confirmed all these modules are installed you can continue.

Setting up the content type

The result of this tutorial will be a host of gallery nodes which can include either a predefined number or no limit of images. So we will need to create a content type for these galleries.

Go to Structure then Content types and click the Add content type link.

For the Name, enter Gallery.

Enter a description and set any of the additional settings. I am going to leave them all at default other than Promoted to front page, which I am going to uncheck (I will show you why later on).

Click Save and add fields. The first thing I am going to do is remove the Body as I won't be using it.

Under Add new field, enter Images in the label box and images in the name box. Under Field, select Image and under Widget select Image. Press Save.

On the next screen just press Save field settings.

Tick the Required field checkbox and enter any restrictions you want to place on image resolution/size. Change Number of values to the maximum number of images you want to appear in each individual gallery, I am going to set this to unlimited. Click Save settings.

Select the Manage display tab. For Label select <Hidden> and for Format select Colorbox. On the right hand side, click on the cog to bring up the settings for the image field. For Node image style select thumbnail or medium. Leave Colorbox image style set to None (original image). Click Save.

We now have our gallery content type set up. At this point you can set up any permissions you want to give to users so they can create galleries or any workflows that you need to set up or configure.

If possible, create a few test galleries with a few images in each. Doing so will help see what each change in the Views module makes.

Creating the galleries page

Go to Structure then Views and click Add new view.

The Views interface has changed slightly (for the better in my opinion) from D6 which does a fair amount of the work for us. Enter in a name for the View and a description if you wish.

In the first section, select Content of type Gallery sorted by Newest first.

In the next section enter the information like below. You can change most of it, but keep the Display format set to Grid of Fields.

Click Continue and edit.

Under Format, where it says Grid, click the link that says Settings. Change the Number of columns to 3. Click Apply.

In the Fields section, click the Add button. Click the checkbox next to Content: Images then click Add and configure fields.

Uncheck the Create a label box and make sure the Formatter is set to Image and Image style is set to thumbnail. For Link image to, set to Content.

Under Multiple field settings make sure the box to Display all values in the same row is checked and the Display type is set to Simple separator, then delete the text in the Separator field. Finally set the Display value(s) to 1.

Click Apply.

At the bottom of the window the preview should now be showing you what your gallery page will look like.

Click Save at the top right to save the View. Then go the gallery page.

Clicking on one of the images or the gallery title will take you through to the node with the full gallery of images which will open in Colorbox modal window.

Additional changes

Changing the HTML of the galleries page

The basic semantics that come out of Views aren't always the best but you have control to change some of this within Views itself. For Drupal 6, I found the Semantic Views module invaluable, hopefully a full D7 release will come out soon.

In the View edit screen, under Fields click Content: Title.

Under Style settings, check the box for Wrap field in HTML and set the HTML element to something which fits in with the flow of your page.

Click Apply and save the View.

Have featured galleries appear at the top of the page

You may have some galleries which are to always appear at the top, there are two ways you can do this within Views.

1) Sticky/Promoted content

You can set the ordering of the view so that Sticky/Promoted content appears first. This is fine if you want the display of these galleries to be the same.

2) Views Attachments

If you want to give more focus to the featured galleries, we can create a Views attachment which we can make appear before the rest of the View which will highlight the selected galleries.

In the edit screen of your view, at the very top under the text Displays click Add then select Attachment.

Under Title, click the link and change the settings so it looks like the following:

Remember to change the For to This attachment (override) so that we don't override the basic page's settings. Click Apply.

Now under Fields click Content: Images. Again change For to This attachment (override). Change the Image style from thumbnail to medium.

Once again change For to This attachment (override) and set Promoted to front page to Yes. Click Apply. You may need to go back in and set this to Yes again, I think there is a bug in Views when creating a new filter with override selected.

Under Attachment settings, Attach to click Not defined. Tick Page and press Apply.

Under Displays, click Page. That little bug I briefed upon means that the filter has also appeared on our main page (it shouldn't of). Select it and either remove it if you don't mind the featured galleries appearing twice on the page, otherwise set to No and press Apply.

Save the View and go to the galleries page.

Go in to one of the galleries, click Edit and tick the box next to Promote to front page.

Now go back to your galleries page and you should have two lots of galleries with your promoted gallery appearing at the top with the other galleries underneath with smaller thumbnails. The image below shows what you should have had before promoting the gallery (above the red line) then what it should look like afterwards (below the red line).

I follow these instructions, however it doesn't seem to be working as I expected it to. Once I set up the view with the setting above and hit the page I see my galleries with the first image in the gallery as default. But when I click a thumbnail I am taken to the gallery content page and only then I when I click, I see Colorbox.

What I was hoping would happen is to go right into the Colorbox full view from the Views Page, not the gallery content page. I hope this makes sense. Please help.

What you are experiencing is what the expected outcome of this tutorial is. You can do what you want, as others have done it, although I haven't personally done it myself, nor have I looked in to how to do it.

I would have thought that you need to show all the images (i.e. not just the first image) but group them then use CSS to hide all but the first image.

Hi,
I've been trying to achieve this same thing... without success so far.
Did you get a solution?
I've tried grouping and using css as James suggests, but can't see how I can make css show only the first image ( I know css and Drupal/Views well ).
I'd appreciate any pointers.
Thanks.

You need to leave the imagefield set to show all images in a single row, instead of setting 1 image, change it to 'all' and change the field formatter to 'Lightbox/Colorbox' depending on what formatter you have set up.

In your CSS, I think the first image will have a class of .first so you can hide all the images, then display the image.first with display or display-block. If it doesn't have the class then you will be able to use the first child CSS property.

Thanks James, I appreciate your taking the time, both for the excellent gallery tut, and to guide me here.

I'd got as far as you have suggested.

However, the images themselves have no css classes at all, and I see no suitable child properties to use.
The a tags that wrap the images all have the same classes leaving nothing to distinguish the first image at all, as far as I can see.

Am I missing something?
Is there a way to add classes that I have yet to discover?

Yes, that makes sense and would be my approach also.
However, there is no css class available to distinguish the first image from the others.
Unless I am still missing something here?
Perhaps there is a way to include suitable css that I have not found?

You can see a live version of this here;http://charlesthornephotography.co.uk/galleries
Please note that the client requested that I make the site live even though the gallery is not yet as required. There is only one image in place but the css/classes are the same as my local install where there are multiple images.

James...Dear Thanx For the tutorial, you made the task of creating multiple image gallery so easy..
I hav followed all the steps as mentioned above but was not able to remove the comma separator from between the images.....as of i am not able to see the Display type option in Multiple Field Settings sections.
Please help on this

Thanx James......u r jus fantastic....i appreciate your help and the knowledge towards drupal....
thanx a lot
can you also advice me with this prob also
m using the lightbox2 instead colorbox.
therefore using the format 'lightbox2:lightbox: thumbnail->original'
but when i click on the image it displays only the first image of the album in the lightbox and the slideshow ends when i click again on the image.
All the images of the album can be seen in the lightbox only when i go to the album page.
I had also tried to configure the lightbox but cant figure it out...
thanx in advance..

hi james, thanks for tutorial. i wonder about promoted gallery image. in your tutorial first (1) image taken to promoted image for gallery. how can i select different location different galleries? because if i upload image may be the image which i want to promote to front can be any index except 1.
how can i insert a check box which with i can select the promoted gallery image?

thanks for reply james. recently i have seen an album+gallery image view in http://www.hopkinsco.com/portfolio (album), http://www.hopkinsco.com/portfolio/colonial (album galleries). i think there is taxonomy and views in this sample. but how can do this in your sample. in your sample there is gallery but not album.
an another question, the gallery bsckgroud color is gray but i want white. how can i do?
thanks all reply.

I imagine the way they have done it is to add an imagefield to the taxonomy which has that pencil style image. Then the view would be a grid of taxonomy terms within that vocabulary which then clicks through to the taxonomy page which has the view of nodes with that taxonomy term.

hi james again. i add two images field (album images and tease image (we select it between uploaded image)). when i click teaser image i want to go album's firt image. but i can't pass to album photos from teaser image with views. how can i do?

hi james again. i add two images field (album images and tease image (we select it between uploaded image)). when i click teaser image i want to go album's firt image with colorbox popup. but i can't pass to album photos from teaser image with views. how can i do?

I think you would need to add a hidden field in your view for the path of first album image, then rewrite the tease image to link to that path. Then you would need to add all the other album images excluding the first image (otherwise you will get it twice in the colourbox). Then hide those links using CSS.

Haven't got a clue what you are asking. Do you want to put extra items/images within the grid?

If so, there are various jQuery plugins which allow you to insert content in to certain areas or you could create and edit the views template file for that particular view to randomly insert items in to your results.