Jquery tools and CSS - HTML Forums

encinoman · 11-07-2009, 08:39 PM

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>