Here you can see one scrollable with tooltips. By clicking on the thumbnails you'll open up an overlay with a gallery plugin.
TIP: try scrolling your page so that the scrollable stays visible while browsing the gallery. You'll see an interesting effect on the scrollable.
Scrollable with tooltips
First we describe how you can add tooltips to scrollable items. Scrollable's HTML structure is the same as in the minimal setup except that the scrollable images are now wrapped inside an a tag so that we can take advantage of their title and href attributes. The title attribute is used for tooltips and the href attribute contains the link to the larger version of the image to be overlayed.
HTML Setup
<!-- root element for scrollable -->
<div class="scrollable">
<!-- root element for the items -->
<div class="items">
<!-- first item -->
<a href="large_image.jpg" title="Image description">
<img src="thumbnail.jpg" /></a>
<!-- second item -->
<a href="large_image2.jpg" title="Image 2 description">
<img src="thumbnail2.jpg" /></a>
<!-- rest of the items ... -->
</div>
</div>
<!-- one single tooltip element -->
<div id="tooltip"></div>CSS coding
Scrollable is styled with scrollable-horizontal.css which depends on the fact that scrollable items are images. Since those images are now wrapped by an A element we have to override some of the settings in this external stylesheet:
/* remove margins from the image */
.items img {
margin:0;
}
/* make A tags our floating scrollable items */
.items a {
display:block;
float:left;
margin:20px 15px;
}
/* tooltip styling */
#tooltip {
display:none;
background:url(/tools/img/tooltip/black_arrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}Overlayed Gallery
Our gallery follows exactly the same principles as in the Using the gallery plugin demo. Our scrollable items are properly setup for the gallery plugin and we have included the following overlay on the page:
<!-- overlay element -->
<div class="simple_overlay" id="gallery">
<!-- "previous image" action -->
<a class="prev">prev</a>
<!-- "next image" action -->
<a class="next">next</a>
<!-- image information -->
<div class="info"></div>
<!-- load indicator (animated gif) -->
<img class="progress" src="http://static.flowplayer.org/tools/img/overlay/loading.gif" />
</div>As you may have noticed the scrollable is moving at the same time while you are browsing the gallery. This is actually automatic! The scrollable looks for elements whose CSS class names are prev and next and they are exactly the same names that the gallery plugin depends upon. So now our gallery browsing buttons control both the gallery and the scrollable without any JavaScript setup. If you want to alter this behaviour then you need to change the CSS class names for the scrollable or gallery plugin configuration.
There is also a little confusion in this browsing behaviour. Both tools depend on the class name disabled which will make the gallery browsing button invisible. Scrollable disables the next button earlier than the gallery. This is why we are using a different class name "inactive" in the gallery configuration for the disabled state. We have to override this in the CSS as follows:
/* scrollable should not disable gallery navigation */
#gallery .disabled {
visibility:visible !important;
}
#gallery .inactive {
visibility:hidden !important;
}Highlighting the active item
Here is how we highlight the active item in the scrollable to make it visible above the expose mask:
/* active item */
.scrollable .active {
border:1px solid #fff;
outline:2px solid #000;
/* these two settings makes it visible over the mask */
z-index:9999;
position:relative;
}JavaScript coding
We have constructed the whole setup with a single chained JavaScript call which has the following structure:
$(".scrollable").scrollable().find("a").tooltip().overlay().gallery();We initialize our scrollable. Then we find all a tags inside it and enable tooltips for them. After that we set up the overlayed gallery for these same a tags. That's it. A true demonstration of the power of jQuery Tools. Here is the complete JavaScript setup with commented configuration variables:
/* chained call: scrollable().find("a").tooltip().overlay().gallery(); */
$(".scrollable").scrollable().find("a").tooltip({
// use this single tooltip element for all trigger elements
tip: '#tooltip'
}).overlay({
// each trigger uses the same overlay with id "gallery"
target: '#gallery',
// optional exposing effect with custom color
mask: '#111',
// clicking outside the overlay does not close it
closeOnClick: false
// gallery plugin
}).gallery({
// do not use the same disabled class name as scrollable
disabledClass: 'inactive'
});