Untitled

<html>

<head>
<link rel="stylesheet" type="text/css" href="css/basic.css">
<link rel="stylesheet" type="text/css" href="css/galleriffic-2.css">
<script src="../js/jquery-latest.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/gallerific/jquery.galleriffic.js"></script>
<script type="text/javascript" src="../js/gallerific/jquery.opacityrollover.js"></script>
<script type="text/javascript">
<!-- test -->
jQuery(document).ready(function($) {
	$("#closegallery").click(function(){
		$("#pikachoose").hide();
		$("#gallery-bg").fadeOut('fast');
	});
});
<!-- test -->
</script>
</head>
<body>
<?php
			error_reporting(E_ALL);
			ini_set('display_errors', 1);

			include('conf.php');
			//$category = $_GET['category'];
			//echo $category;
			$category = "portrai";

			// connect to db
			$con = mysql_connect("localhost",$db_user,$db_pass);
			// on fail set error
			if (!$con) die('Could not connect: ' . mysql_error());
			// select database
			mysql_select_db($db, $con);
			// select thumbnails
			$pic_query = "SELECT * FROM ab_portfolio WHERE category = '".$category."' AND active = 1";
			// get results of query
			$pic_result = mysql_query($pic_query) or die(mysql_error());
			// close connection
			mysql_close($con);
			?>
			<div id="pikachoose">
                <div style="width:100%; height:30px; text-align:right; float:right;"><a href="#"><img src="img/close.png" id="closegallery" alt="Schlie&szlig;en" title="Schlie&szlig;en"></a></div>
                <div id="gallery" class="content">
                    <div class="slideshow-container">
                        <div id="closegallery"></div>
                        <div id="loading" class="loader"></div>
                        <div id="slideshow" class="slideshow"></div>
                    </div>
                </div>

                <div id="thumbs" class="navigation">

                <ul class="thumbs noscript">

            <?php
			while ($pic_row = mysql_fetch_array($pic_result)){
				$title = $pic_row['title'];
				$description = $pic_row['description'];
				$category = $pic_row['category'];
				$active = $pic_row['active'];
				$pic = $pic_row['pic'];
			?>

                    <li>
                        <a class="thumb" href="img/portfolio/pic/<?php echo $pic; ?>" title="your image title">
                            <img src="img/portfolio/pic/thumb-<?php echo $pic; ?>" alt="your image title again for graceful degradation" />
                        </a>
                        <div class="caption"></div>
                    </li>


			<?php
			}
			?>
        		</ul>

				</div>
				<div style="clear: both;"></div>
			</div>

			<script type="text/javascript">
			jQuery(document).ready(function($) {
				// We only want these styles applied when javascript is enabled
				$('div.navigation').css({'width' : '300px', 'float' : 'left'});
				$('div.content').css('display', 'block');

				// Initially set opacity on thumbs and add
				// additional styling for hover effect on thumbs
				var onMouseOutOpacity = 0.67;
				$('#thumbs ul.thumbs li').opacityrollover({
					mouseOutOpacity:   onMouseOutOpacity,
					mouseOverOpacity:  1.0,
					fadeSpeed:         'fast',
					exemptionSelector: '.selected'
				});

				// Initialize Advanced Galleriffic Gallery
				var gallery = $('#thumbs').galleriffic({
					delay:                     2500,
					numThumbs:                 15,
					preloadAhead:              10,
					enableTopPager:            true,
					enableBottomPager:         true,
					maxPagesToShow:            7,
					imageContainerSel:         '#slideshow',
					controlsContainerSel:      '#controls',
					captionContainerSel:       '#caption',
					loadingContainerSel:       '#loading',
					renderSSControls:          true,
					renderNavControls:         true,
					playLinkText:              'Play Slideshow',
					pauseLinkText:             'Pause Slideshow',
					prevLinkText:              '&lsaquo; Previous Photo',
					nextLinkText:              'Next Photo &rsaquo;',
					nextPageLinkText:          'Next &rsaquo;',
					prevPageLinkText:          '&lsaquo; Prev',
					enableHistory:             false,
					autoStart:                 false,
					syncTransitions:           true,
					defaultTransitionDuration: 900,
					onSlideChange:             function(prevIndex, nextIndex) {
						// 'this' refers to the gallery, which is an extension of $('#thumbs')
						this.find('ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
					},
					onPageTransitionOut:       function(callback) {
						this.fadeTo('fast', 0.0, callback);
					},
					onPageTransitionIn:        function() {
						this.fadeTo('fast', 1.0);
					}
				});
			});
		</script>
</body></html>