Question

I am trying to figure out how to create an image gallery like the one illustrated below so I can place it onto my website. I am wondering if anyone can point me in the right direction for a tutorial? I have found a lot of nice galleries that will display my images, but none of them displays the images like in the filmstrip style I am after.

Requirements of gallery:

1. When clicking on the arrows, the gallery strip will either shift
   left/right by one picture
2. Hovering over the image will darken the image, and display some
   caption about the image

Answer 1

I just answered a question where someone was using carouFredSel. This jQuery plugin looks like it would work pretty well, though I do not think it has the built-in hover effect. To be honest though, that is the easier part.

The trick is to make the width slightly larger than the images to show, which leads to the partial images on each side.

Here is a jsfiddle to illustrate.

---

UPDATE:
The OP asked if the page nav links could be repositioned. I modified the jsfiddle to work this way. The additions were as follows:

.list_carousel {
    position: relative;
}
#prev2 {
    position: absolute;
    top: 35px;
    left: 0;
}
#next2 {
    position: absolute;
    top: 35px;
    right: 0;
}

If you have a relatively positioned container element, you can absolutely position child elements. I added relative positioning to the list_carousel container, then I could absolutely position the nav arrows within the container. Change the top value to position vertically, and left/right to position horizontally.

I also removed the pager all together, as it was not a requirement based on the original example. If you change the page arrows to images it is pretty much what you want.

---

MORE UPDATES
I decided to take it one step further and make the hover effect work more like the example. See the new jsfiddle. The changes are:

• Added span wrappers around all text within list items
• Added $(".list_carousel li span").hide(); to hide all the spans
• Modified hover event to toggle spans

I also added some CSS to position the span text:

.list_carousel li { 
    position: relative;
}
.list_carousel li span {
    position: absolute;
    bottom: 0;
    display: block;
    text-align: center;
    width: 100%;
}

---

FINAL UPDATE (I PROMISE!)
I decided to go all in and add the transparency layer too: jsfiddle

Hover modifications:
$(this).prepend($("<div class='hover-transparency'></div>")); and $(this).find("div:first").remove(); to add/remove transparency layer on hover in/out.

CSS modifications:

.hover-transparency {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.60);
}

These style the transparency layer. Change to suit your taste.