Customizing scrollable plugin with prevpage and nextpage over the image? (see mock up)

Question

I am implementing a scrollable for a portfolio gallery.

(scrollable = scrollable plugin from http://flowplayer.org/tools/index.html )

There will be one item visible at a time.

By default, scrollable positions the prev/next buttons outside of the image area and clicking on the current image advances the scrollable content.

1. I would like to have the prev/next render within the image area.
2. I would like to have an image caption appear when mousing over the lower part of the image.

Mock-up: http://i303.photobucket.com/albums/nn160/upstagephoto/mockups/scrollable_mockup.jpg

Any ideas on how to achieve one or both of these?

Thank you!

Answer 1

The main part of your approach will be like this in your html:

<div id="mainContainer">
  <div class="scrollable">
    <div class="items">
      <div class="scrollableEl">
         <img src="yourimage.jpg" />
         <div class="caption">Your caption</div>
      </div>

      <div class="scrollableEl">
         <img src="yourimage2.jpg" />
         <div class="caption">Your caption 2</div>
      </div>

      ... so on ...
    </div>
  </div>
  <a href="#" class="prev">&laquo;</a>
  <a href="#" class="prev">&laquo;</a>
</div>

And like so in your CSS:

.scrollable {
    position:relative;
    overflow:hidden;
    width: 660px;
    height:90px;
}

.scrollable .items {
    width:20000em;
    position:absolute;
}

.items .scrollableEl {
    float:left;
    positon: relative;
}

.items .scrollableEl .caption {
    display:none;
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 660px;
}

.items .scrollableEl:hover .caption { /*this will show your caption on mouse over */
    display:none;
}

.next, .prev {
    position: absolute;
    top: 0;
    display: block;
    width: 30px;
    height: 100%;
}
.next {
    right: 0;
}
.prev {
    left: 0;
}
#mainContainer {
    position: relative;
}

The javascript should be fairly standard. Hope this helps!