FrameScrub

Here is a FrameScrub example (mouse over it!):

...and the src is...

jQuery

          
            $("#fs1").frameScrub({
              defaultImage: 'firstImage',
              verticalAlignment: 'middle',
              showTitles: 'false',
            });
          
          

HTML

            
            <div id="fs1" style="width:100%;height:300px;border:1px solid #666;overflow:hidden;">
              <img src="images/fs1/img1.jpg" />
              <img src="images/fs1/img2.jpg" />
              <img src="images/fs1/img3.jpg" id="firstImage" />
              <img src="images/fs1/img4.jpg" />
              <img src="images/fs1/img5.jpg" />
              <img src="images/fs1/img6.jpg" />
              <img src="images/fs1/img7.jpg" />
              <img src="images/fs1/img8.jpg" />
            </div>
          
        

Pretty cool, eh? The frameScrub will take any size images and formats them to the size of the frameScrub container. After that, it looks at the size of the container element to decide how often the images should change when mousing over it. You can pass it a few options.

Option	What it do	Possible Values
defaultImage	Takes the 'id' attribute of an image. On page load and mouseOut, the defaultImage will be what is displayed inside the frameScrub.	"element_ID" : string
verticalAlignment	Obviously, this will align the images vertically inside the frameScrub container. Align to the top, middle, or bottom. The default is top.	"top | middle | bottom" : string
showTitles	If you'd like to show titles of your images, you can do that. Just pass in the "ID" of the element you want to house the titles. Make sure your images have titles on them.	"element_ID" : string
frameWidth	If you want to specify a width for your images, pass in this option. If you don't, the images will stretch to fit the container. Either way, the height will be calculated to preserve the image's aspect ratio. Also, if you don't pass any width, the frameScrub is responsive to widths	width : int

Another fun example. This time with some titles.

How about a gallery setting? Each one is triggered by it's class name, but make sure each element has a unique ID. You could get some unexpected results if you don't. It would be entertaining.

          
            $(".fs").frameScrub({
              defaultImage: 'firstImage',
              verticalAlignment: 'top'
            });
          
        

So...lots of options here. Let me know if you have any suggestions or find some bugs. Find me on my github.