Slideshow as Banner

PF2G 0 Junior Poster in Training

14 Years Ago

Hi,
I want to insert various images (slideshow) as a banner, here's the code: (i think it's ok)

<?PHP
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');

$dbname = 'destaques';
mysql_select_db($dbname);
?>

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#slide_fotos').cycle({
		fx: 'fade',
		pager: '#pager'
	});
});
</script>
<style type="text/css">
* {
	list-style: none;
	margin: 0;
	padding: 0;
}
body {
	font: 12px Verdana, sans-serif;
	color: #000;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
#slideshow {
	width: 640px;
	height: 270px;
	position: relative;
}
#slide_fotos p {
	position: absolute;
	right: 0;
	top: 210px;
	z-index: 3;
	padding: 10px 20px;
	background: url('images/over_white.png');
}
#slide_fotos {
	height: 100%;
	overflow: hidden;
}
#pager {
	position: absolute;
	z-index: 10;
	top: 20px;
	right: 20px;
}
#pager a {
	color: #000;
	width: 17px;
	height: 17px;
	line-height: 15px;
	text-align: center;
	display: inline-block;
	font-size: 10px;
	margin: 2px;
	color: #fff;
}
#pager a.activeSlide {
	color: #000;
	background: url('images/over_white.png');
}
</style>
</head>
<body>
	<div id="slideshow">
		<ul id="slide_fotos">
			<?PHP
			
			
			
			?>
		</ul><!-- /fotos -->
		<p id="pager">

		</p><!-- /pager -->

	</div><!-- /slideshow -->
	
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-7671312-4']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? '' : '') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</body>
</html>

But the banner is in the "default.css":

body {
	background:#FBFAF5 repeat-x top left;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: justify;
	color: #666666;
	margin:0 auto;
}

h1 {
}

h2, h3 {
	margin-top: 0px;
}

h4, h5, h6 {
}

p, ol, ul, dl, blockquote {
}

a {
	color: #000000;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	color: #235510;
}


/* Header */

#header {
	width: 950px;
	height:100px;
	margin: 0px auto;
	}

#header h1 {
	text-align: left;
	margin: 0px;
	padding-top: 40px;
	font-size: 32px;
	color: #000000;
	padding-left: 10px;
}

#header h2 {
	margin: 0px;
	text-align: center;
	font-size: 11px;
}

#header a {
	text-decoration: none;
	color:#000000;
}

/*banner*/
#banner {
	width: 950px;
	height: 346px;
	margin: 0px auto;
	background:url(images/bann_menu.png) no-repeat left top;
}


/* Post */

.latest-post {
	padding: 0 0 1em 0;
}

.latest-post h2 {
	margin-bottom: 0.5em;
	padding: 8px 10px 2px 10px;
	text-transform: uppercase;
	font-size: 16px;
	color: #75C210;
	border-bottom: 1px solid #cccccc;
}

.post {
	padding: 2em 0 1em 0;
}

.post h3 {
	margin-bottom: 0.5em;
	font-size: 1.2em;
	color: #000000;
}

.file * {
	color: #5B5B5B;
}

/** Forms */

form {
	margin: 0px;
	padding: 0px;
}

.input1 {
	width: 110px;
	background-color: #2A2A2A;
	border: 1px solid #363636;
	color: #FFFFFF;
}

/* Content */

#content {
	width: 950px;
	margin: 0 auto 10px auto;
	padding: 0px 0px 0px 0px;
}

#colTwo {
	margin: 0px;
	padding: 0px 15px 15px 15px;
	background-color: #FFFFFF;
}

#colTwo p {
	line-height: 25px;
}
#colTwo img{
	padding-right:10px;
	padding-top:10px;
}
	
#colTwo h3{
	padding: 10px 10px 2px 10px;
	text-transform: uppercase;
	color: #000000;
}

/* Footer */

#footer {
	width: 100%;
	margin: 0px auto;
	padding: 15px 0px;
	height: 200px;
}
#footer a{
	text-decoration:none;
	color: #38831E;
}
#footer p {
	margin: 0px;
	text-align: center;
	color: #38831E;
}
.devider{height:20px;}
.services{
	padding:10px;
	border:#E2F9BD 1px solid;
	background-color:#FFFFFF;
	margin-top:30px;
}
.button{
	display:block;
	width:80px;
	height:25px;
	background:#38831E;
	color:#FFFFFF;
	float:right;
	margin-bottom:5px;
	padding-left:15px;
	}

I'm not imagining an easier way to do that. Can someone help me?

Edited 14 Years Ago by PF2G because: n/a

1 Contributor
0 Replies
85 Views

Dani AI

Generated 10 Months Ago

: the most likely causes are that the server-side part is not emitting the slideshow markup, script resources are not loading in the right order, or CSS is hiding or mis-sizing the slideshow container. Short checklist and practical tips to diagnose and fix the banner quickly.

Verify server output: confirm the page is served as a processed PHP file and that the server-side code actually writes the list items (each with an img src). View "page source" in the browser to see the final HTML that the slider plugin receives. An empty list or broken src attributes will make the slider appear blank.
Check browser devtools: Network tab for 404s on images and JS files; Console for JavaScript errors. Ensure the core library is loaded before any plugin that depends on it, and avoid loading multiple conflicting versions.
CSS and layout issues: make sure the slideshow container has explicit width/height and that images are not being collapsed by parent styles (overflow, float, display). z-index and positioning can hide overlays; inspect computed styles to find conflicts with global stylesheet rules.
Modernize and harden: use a maintained slider library compatible with your JavaScript version, deliver images with appropriate sizes or use CSS object-fit/background-size for responsive fill, and include alt text for accessibility. Replace legacy DB APIs with a prepared-statement approach and escape output to prevent XSS.
Progressive enhancement: include a static first image fallback so the header is usable when JavaScript fails.

If the generated HTML, network requests, and console are clean, the problem is almost always a mismatch between the output markup and what the slider expects (missing list items, wrong selectors, or plugin load order).

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.