I'm not sure what is going on with this code. I'm trying to fool around with jquery tools by creating a gallery with tooltips. I have modified the example code provided but can't seem to get my css right. Nothing changes when I change the CSS, background color..etc, I am sure I am doing some thing stupid.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- DOCTYPE is always recommended. see: http://www.quirksmode.org/css/quirksmode.html -->
<head>
<title>MY ACCOUNT</title>
<!-- Full version of jQuery Tools + jQuery 1.3.2 -->
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-basic.css"/>
<link rel="stylesheet" type="text/css" href="css/test.css"/>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-gallery.css"/>
</head>
<body>
<!-- here we use separate stylesheets. you should definitely combine yours into a single file! -->
<style>
/*** override styling in external stylesheets ***/
/* 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(images/black_arrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
/* scrollable should not disable gallery navigation */
#gallery .disabled {
visibility:visible !important;
}
#gallery .inactive {
visibility:hidden !important;
}
#pictures {
padding:150px 50px;
height: 10%
width:50%
background-color: #f00;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}
</style>
<!-- "previous page" action -->
<a class="prevPage browse left"></a>
<!-- root element for scrollable -->
<div id = "pictures">
<div class="scrollable">
<!-- root element for the items -->
<div class="items">
<a href="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg" title="Back view">
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /></a>
<a href="http://farm4.static.flickr.com/3275/2765571978_43771e81eb.jpg" title="From south north">
<img src="http://farm4.static.flickr.com/3275/2765571978_43771e81eb_t.jpg" /></a>
<a href="http://farm1.static.flickr.com/79/244441862_08ec9b6b49.jpg" title="View from the pool">
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /></a>
<a href="http://farm1.static.flickr.com/28/66523124_b468cf4978.jpg" title="Granite stones">
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /></a>
<a href="http://farm1.static.flickr.com/164/399223606_b875ddf797.jpg" title="The bronze statue">
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" /></a>
<a href="http://farm2.static.flickr.com/1083/1118933512_5ea1fe8f41.jpg" title="Marble walls">
<img src="http://farm2.static.flickr.com/1083/1118933512_5ea1fe8f41_t.jpg" /></a>
<a href="http://farm1.static.flickr.com/135/321464104_c010dbf34c.jpg" title="Statue again">
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /></a>
<a href="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg" title="Monumental walls">
<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_t.jpg" /></a>
<a href="http://farm1.static.flickr.com/153/399232237_6928a527c1.jpg" title="Water view">
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" /></a>
<a href="http://farm1.static.flickr.com/50/117346182_1fded507fa.jpg" title="Famous chairs">
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" /></a>
</div>
</div>
</div>
<div id="tooltip"></div>
<!-- "next page" action -->
<a class="nextPage browse right"></a>
<br clear="all" />
<!-- 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>
<!-- javascript coding -->
<script>
$(document).ready(function() {
/* chained call: scrollable().find("a").tooltip().overlay().gallery(); */
$(".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
expose: '#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'
});
});
</script>
</div>
</body>