Background Image Carousel

**WillyBear** · 07-26-2012, 06:14 PM

1) Script Title: Background Image Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...bgcarousel.htm

3) Describe problem: It won't load on my site. (http://www.zelzaatsetennisclub.be) I have no idea what the problem is. The script works fine on DD but not on my site so I must be doing something wrong. All it does is darken the image (banner) on my site. Anybody have any idea what I'm doing wrong?

**jscheuer1** · 07-26-2012, 06:49 PM

It's a conflict between the jQuery script library used by the Carousel and prototype/effects libraries used by the news ticker.

I'd suggest getting rid of prototype, effects and the newsticker scripts:

Code:

<script type="text/javascript" src="newsticker/prototype.js"></script>
<script type="text/javascript" src="newsticker/effects.js"></script>
<script type="text/javascript" src="newsticker/newsticker.js"></script>

That would fix it. Or you could get another ticker that either uses jQuery or one that doesn't use any script library.

But you can keep them both if you update prototype/effects and rearrange things in the head of the page.

Change:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Zelzaatse TennisClub</title>
<link href="main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="newsticker/prototype.js"></script>
<script type="text/javascript" src="newsticker/effects.js"></script>
<script type="text/javascript" src="newsticker/newsticker.js"></script>
<script type="text/javascript" src="switchcontent.js"></script>
<style type="text/css">
.handcursor{
cursor:hand;
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


<style>

div.bgcarousel{ /* CSS for main carousel container */
background: black url(ajaxload.gif) center center no-repeat; /* loading gif while caoursel is loading */
width:999px; /* default dimensions of carousel */
height:200px;
}

img.navbutton{ /* CSS for the nav buttons */
margin:5px;
opacity:0.7;
}

div.slide{ /* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}

div.selectedslide{ /* CSS for currently selected slide */
}

div.slide div.desc{ /* DIV that contains the textual description inside .slide */
position: absolute;
color: white;
left: 40px;
top: 100px;
width:200px;
padding: 10px;
font: bold 16px sans-serif, Arial;
text-shadow: 0 -1px 1px #8a8a8a; /* CSS3 text shadow */
z-index:5;
}

div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */
}

div.slide div.desc h2{
font-size:150%;
margin:0;
}

div.slide div.desc a{
color:yellow;
text-decoration:none;
}

</style>

<script src="bgcarousel.js" type="text/javascript">

/***********************************************
* Background Image Carousel- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script type="text/javascript">

var firstbgcarousel=new bgCarousel({
	wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
	imagearray: [
		['images/Fotos/banner.jpg', ''], //["image_path", "optional description"]
		['images/Fotos/banner1.jpg', ''],
		['images/Fotos/banner2.jpg', ''],
		['images/Fotos/banner3.jpg', ''] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
	navbuttons: ['images/Fotos/left.gif', 'images/Fotos/right.gif'], // path to nav images
	activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
	orientation: 'h', //Valid values: "h" or "v"
	persist: true, //remember last viewed slide and recall within same session?
	slideduration: 500 //transition duration (milliseconds)
})

</script>
</head>

to:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Zelzaatse TennisClub</title>
<link href="main.css" rel="stylesheet" type="text/css">
<style>

div.bgcarousel{ /* CSS for main carousel container */
background: black url(ajaxload.gif) center center no-repeat; /* loading gif while caoursel is loading */
width:999px; /* default dimensions of carousel */
height:200px;
}

img.navbutton{ /* CSS for the nav buttons */
margin:5px;
opacity:0.7;
}

div.slide{ /* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}

div.selectedslide{ /* CSS for currently selected slide */
}

div.slide div.desc{ /* DIV that contains the textual description inside .slide */
position: absolute;
color: white;
left: 40px;
top: 100px;
width:200px;
padding: 10px;
font: bold 16px sans-serif, Arial;
text-shadow: 0 -1px 1px #8a8a8a; /* CSS3 text shadow */
z-index:5;
}

div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */
}

div.slide div.desc h2{
font-size:150%;
margin:0;
}

div.slide div.desc a{
color:yellow;
text-decoration:none;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>



<script src="bgcarousel.js" type="text/javascript">

/***********************************************
* Background Image Carousel- Â© Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="newsticker/newsticker.js"></script>
<script type="text/javascript" src="switchcontent.js"></script>
<style type="text/css">
.handcursor{
cursor:hand;
cursor:pointer;
}
#newsticker ul {
	min-height: 20px;
}
</style>

<script type="text/javascript">
jQuery(function($){
	$(document).on('click', '#togglenewsticker', function(e){e.preventDefault();});
});
var firstbgcarousel=new bgCarousel({
	wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
	imagearray: [
		['images/Fotos/banner.jpg', ''], //["image_path", "optional description"]
		['images/Fotos/banner1.jpg', ''],
		['images/Fotos/banner2.jpg', ''],
		['images/Fotos/banner3.jpg', ''] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
	navbuttons: ['images/Fotos/left.gif', 'images/Fotos/right.gif'], // path to nav images
	activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
	orientation: 'h', //Valid values: "h" or "v"
	persist: true, //remember last viewed slide and recall within same session?
	slideduration: 500 //transition duration (milliseconds)
})

</script>
</head>

Oh and there's an unofficial bug fix for the Carousel for taking care of where after automatic operation ends, clicking the manual navigation slides it twice:

http://home.comcast.net/~jscheuer1/s.../bgcarousel.js

Right click and 'Save As'.

**WillyBear** · 07-26-2012, 07:18 PM

Thank you very much, that solved my problem. I've got 1 more small problem, well it's not really a "problem" per se.

If you look at the newsticker, when it goes from this line :

WERKZAAMHEDEN!! Momenteel is het verboden te parkeren in de Kanaalstraat tussen de Mondial en de Boultonstraat wegens werkzaamheden.

to this line :

U kunt parkeren voor de grote parking naast het gemeentehuis of op de parking aan het busplein.

the height of the newsticker gets abit small.

This is the css the newsticker uses :

#newsticker {
background: #ffffaf;
position: relative;
}

#newsticker ul {
border: 1px solid #fcf498;
list-style: none;
min-height: 1em;
padding: 10px 10px;
padding-right: 10px;
}
* html #newsticker ul {
height: 1em;
overflow: visible;
}
#newsticker li.error {
color: #f00;
}
#newsticker #togglenewsticker {
background: transparent url("newsticker/icon_closenewsticker.gif") no-repeat 0 0;
overflow: hidden;
position: absolute;
right: 10px;
top: 13px;
width: 14px;
height: 14px;
text-indent: 20px;
outline: none;
}
* html #newsticker #togglenewsticker {
right: 30px;
}

Is the problem somewhere in there or do i have to go look in the newsticker.js to fix the height issue?

Again, many many thanks for the help.

**jscheuer1** · 07-26-2012, 07:35 PM

I'm not sure I see the exact same problem. However, I had noticed the page jumping around as the ticker changed. I had added to my version:

Code:

#newsticker {
	min-height: 42px;
}

But that made it look too jumpy when it was dismissed. I just now edited my previous post to make it:

Code:

#newsticker ul {
	min-height: 20px;
}

That seems to fix it.

So, get rid of:

Code:

#newsticker {
	min-height: 42px;
}

that I added, it's here:

Code:

 . . . script" src="newsticker/newsticker.js"></script>
<script type="text/javascript" src="switchcontent.js"></script>
<style type="text/css">
.handcursor{
cursor:hand;
cursor:pointer;
}
#newsticker {
	min-height: 42px;
}
</style>

<script type="text/javascript">
jQuery(function($){
	$(document).on('click', '#togglenewsticker', function(e){e.preventDefault();});
});
var firstbgcarousel=new bgCarousel({
	wrapperid: 'mybgcarousel', //ID . . .

And in your stylesheet, change the highlighted as shown:

Code:

#newsticker {
 background: #ffffaf;
 position: relative;
 }

 #newsticker ul {
 border: 1px solid #fcf498;
 list-style: none;
 min-height: 20px;
 padding: 10px 10px;
 padding-right: 10px;
 }
 * html #newsticker ul {
 height: 20px;
 overflow: visible;
 }
 #newsticker li.error {
 color: #f00;
 }
 #newsticker #togglenew . . .

**WillyBear** · 07-26-2012, 07:44 PM

Again, thank you very much, that fixed the "problem".

Thread: Background Image Carousel

Thread Tools

Search Thread

Background Image Carousel

Bookmarks

Bookmarks

Posting Permissions