SearchWorks Filmstrip Example

_fimlstrip.html.erb

<div class="filmstrip-container">
  <div class="filmstrip-total"><%= link_to("View #{pluralize(document.total_collection_members, "item")} in this collection online", catalog_index_path(:f=>{:collection=>[document[:id]]}, :view=>"gallery")) %></div>
  <div class="scroll-control disabled" data-direction="left"></div>
  <div class="scroll-control" data-direction="right"></div>
  <div class="filmstrip" data-preview-container='true'>
    <ul>
      <%- document.children.each do |doc| -%>
        <%- unless doc.image_urls.blank? -%>
          <li>
            <div>
              <%= link_to(image_tag(document.image_urls(:thumbnail).first), catalog_path(doc[:id])) %>
            </div>
            <%- if doc.image_urls.length > 1 -%>
              <div class="image-number"><%= pluralize(doc.image_urls.length,"Image") %></div>
            <%- end -%>
          </li>
        <%- end -%>
      <%- end -%>
      <li class="last">
        <%= image_tag("icons/filmstrip-last-image.png") %>
      </li>
    </ul>
  </div>
</div>

filmstrip.css.scss

.filmstrip-container {
	position: relative;
	padding: 23px 2px 5px 2px;
	border: 1px solid #CCCCCC;
	margin: 15px 20px 5px;
	
	.scroll-control {
		cursor: pointer;
		height: 100%;
		vertical-align: center;
		top: 65px;
		height: 21px;
		width: 21px;
		position:absolute;
		
		&.disabled {
			cursor: auto;
			color: #CCCCCC;
		}
		
		&[data-direction=left]{
			float: left;
			background-image: image_url('icons/filmstrip-back-active.png');
			left: -10px;
			&.disabled {
				background-image: image_url('icons/filmstrip-back-disabled.png');
			}
		}
		
		&[data-direction=right] {
			float: right;
			display: inline-block;
			background-image: image_url('icons/filmstrip-next-active.png');
			right: -10px;
			&.disabled {
		    background-image: image_url('icons/filmstrip-next-disabled.png');
			}
		}
	}
	
	.filmstrip {
		position: relative;
		overflow: hidden;
		min-height: 125px;
		margin: 0 15px;
		.image-preview-pane {
			margin-top: 115px;
		}
		ul {
			width: 20000em;
			position: absolute;
			list-style: none;
			margin: 0;
			padding: 0;			
		}
		li {
			list-style-type: none;
			padding-bottom: 12px;
			margin: 0 4px;
			float: left;
			text-align: center;
			&.last {
				padding-top: 35px;
			}
			.image-number {
				color: #666666;
			}
			a {
				display: block;
				&:hover {
					border-bottom:none;
				}
			}
		}
	}
	.filmstrip-total {
		padding: 3px 10px;
		position: absolute;
		left: 20px;
		top: -10px;
		text-align: center;
		border: 1px solid #CCCCCC;
		background-color: #E6E6E6;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}
}

fimstrip.js

$(window).resize(function(){
	$(".filmstrip-container").each(function(){
		if(last_item_is_visible($(this))){
		  $("[data-direction=right]", $(this)).addClass("disabled");	
		}else{
			$("[data-direction=right]", $(this)).removeClass("disabled");	
		}
	});
});

$(document).on('ready', function(){
  $(".filmstrip-container").each(function(){
	  var container = $(this);
	  var filmstrip = $(".filmstrip", container);
	  $(".scroll-control", container).each(function(){		  
		  $(this).click(function(){
				if(!$(this).hasClass("disabled") && !$("ul", filmstrip).is(":animated")){
	  			var direction = $(this).attr("data-direction");  
					var travel_amount = (direction == "left" ? "+=" : "-=") + "108";
					$("#pointer").animate({left: travel_amount}, "slow");
					$("ul", filmstrip).animate({left: travel_amount }, "slow", function(){
						if($("ul", filmstrip).position().left == "0"){
							$("[data-direction=left]", container).addClass("disabled");
						}else{
							$("[data-direction=left]", container).removeClass("disabled");
						}
						if(last_item_is_visible(container)){
							$("[data-direction=right]", container).addClass("disabled");
						}else{
							$("[data-direction=right]", container).removeClass("disabled");
						}
					});
				}
			  return false;
		  });
	  });
  });
});