Why cant I get this Carousel to work?

Lita

New Member
I have been working for awhile now trying to figure out why I can't get a carousel to work on my website. Have plugged in the code given and have downloaded the plugin. I figured instead of pulling my hair out I would try asking and maybe someone might be able to help me and I wont have to resort to Flash. I used this Carousel: http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/ I downloaded the plugin and added the first div into my body, the second part with the Jquery link to google I put it into my header and I put the CSS on my CSS page. I know I am missing something but I dont know what. Do I need to do anything with the plugin I downloaded? I put it into the folder with the website and am not sure what to do to get this thing working. I've had some wonderful people help me with previous questions and any help is appreciated.
 
Last edited:

Lita

New Member
Sure thing here is my index page. It is the only page with the carousel on it.

HTML:
<!doctype html">
<head>

<title>Mama Cakes</title>

<link rel="stylesheet" type="text/css" href="style.css" />



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.infinitecarousel.js"></script>
<script type="text/javascript">
$(function(){
	$('#carousel').infiniteCarousel();
});
</script>



</head>


<body>

<div id= "header">

<img src="http://img.photobucket.com/albums/v134/Invadergir1612/MamaCakes_Logo.png" alt="Logo" />
</div>



<div class="curved-box-css3" >

<br><h1>Everything Is Better</br></h1>

</div> 



<div class="curved-box2-css3">

<br><h1>With Cupcakes</br></h1>

</div> 



<div class="curved-box3-css3">

</div>


<div class="curved-box4-css3">

</div>



<div class="curved-box5-css3" >

<ul><center><a href="News.html">News</a></ul>
</center>


<ul><center><a href="About.html">About Us</a></ul></center>


<ul><center><a href="Menu.html">Menu</a></ul>
</center>

<ul><center><a href="Gallery.html">Photo Gallery</a></ul>
</center>

<ul><center><a href="https://www.facebook.com/pages/Mama-Cakes/188302341183750">Place an Order</a></ul>
</center>


<ul><center><a href="contactus.html">Contact Us</a></ul>
</center>

</div>




<div id="carousel">

<ul>
	<li><img alt="" src="p1.jpg" width="500" height="213" /><p>This carousel has no padding applied to it so you won't see hints for the previous and next images. Also, the progress bar could be disabled by setting just one option on the plugin.</p></li>
	<li><img alt="" src="p2.jpg" width="500" height="213" /><p>This is the caption for the second image. The height of the caption box is an option.</p></li>
	<li><img alt="" src="p3.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p4.jpg" width="500" height="213" /><p>It's not easy being green.</p></li>
	<li><img alt="" src="p5.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p6.jpg" width="500" height="213" /><p>You can easily mix images types. Gif, png, and jpeg all work without any issues.</p></li>

</ul>

</div>





<div id="content" style="background-color:#f3e9de;height:420px;width:820px;top:538px;">
<p>
<center><h1>Welcome To Mama Cakes</h1></center>

Not sure what to put here yet so here is some lorem ipsum
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur mauris vitae libero consectetur et rutrum sapien vulputate. Duis lectus lectus, bibendum ut interdum eget, aliquam porta enim. Mauris semper, orci ut pulvinar tempus, augue neque feugiat augue, nec pellentesque arcu augue vel lorem. Mauris ut lacus ligula. Quisque vitae ligula arcu, sed condimentum nunc. Ut vel quam id enim faucibus vulputate id sed sem. Proin euismod risus et lacus consectetur posuere. Donec quis sapien non risus tincidunt porttitor nec vel lacus. Integer vitae neque at massa tempus egestas. Donec massa arcu, accumsan ut condimentum sed, egestas vitae erat.</p>
<p>
Phasellus enim metus, ornare ac facilisis fringilla, iaculis non orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tincidunt arcu a nunc pulvinar ut luctus turpis pellentesque. Quisque et augue id lectus scelerisque hendrerit. Integer at dui nisi. Pellentesque commodo, felis a placerat adipiscing, turpis orci ornare ipsum, eget consequat massa est consequat nibh. Phasellus justo risus, semper eu lobortis consequat, rutrum id velit. Nam sed bibendum tortor. Maecenas molestie enim sed urna fringilla gravida. </p>



</p>
</div>




<div class="aside">

<center><br>
"Like" us on Facebook and check out our daily flavors.</br></center>

<p>
<a href="https://www.facebook.com/pages/Mama-Cakes/188302341183750">
<img src="http://img.photobucket.com/albums/v134/Invadergir1612/facebook_icon-1.png" alt="HTML tutorial" width="32" height="32" />
</a>
</p>

</div>



<div id="footer" style="height:70px;width:1050px;">
<center>
Copyright &copy; 2012 Mama Cakes
<br><br>
<a href="Index.html">Home</a>
|
<a href="About.html">About Us</a>
|
<a href="contactus.html">Contact Us</a>
|
<a href="Index.html">FAQs</a>
|
<a href="Visit.html">Visit</a>

</center>
</div>





</body>


Here is the CSS


HTML:
body {background-image:url('http://img.photobucket.com/albums/v134/Invadergir1612/Tin3.jpg');}


#body
{
background-color:#E9AECE;
}


img
{
float:left;

}




.curved-box-css3
    {
    width: 1130px;
    height: 40px;
    margin: 0px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #BA9786;
	font-family:Arial,Helvetica,sans-serif;
	color:white;
	text-shadow: 2px 2px #000000;
	text-indent: 150px;
    box-shadow: 4px 4px 3px #333;
    
}




.curved-box2-css3
    {
    width: 1130px;
    height: 40px;
    margin: 0px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #D88FBC;
    font-family:Arial,Helvetica,sans-serif;
  	color:white;
  	text-shadow: 2px 2px #000000;
  	text-indent: 430px;
    box-shadow: 4px 4px 3px #333;
    
}


.curved-box3-css3
    {
    width: 1130px;
    height: 40px;
    margin: 0px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #EC999F;
    box-shadow: 4px 4px 3px #333;

}


.curved-box4-css3
    {
    width: 1130px;
    height: 40px;
    margin: 0px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #f2c6c3;
    box-shadow: 4px 4px 3px #333;
    
}



.curved-box5-css3
    {
    width: 1130px;
    height: 50px;
    margin: 0px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #f3e9de;
    box-shadow: 4px 4px 3px #333;

}



#carousel ul {
	list-style: none;
	width:1600px;
	margin: 0;
	padding: 0;
	position:relative;
}
#carousel li {
	display:inline;
	float:left;
}



#content
{
	background-color: #f3e9de;
	position:absolute;
	left:80px;
	top:100px;
    text-indent: 30px;
    box-shadow: 4px 4px 3px #333;
    border-radius: 10px;
    padding-left:8px;
	padding-right:8px;

}




ul
{
	float:left;
}



a
{
	text-decoration:none;
	Padding: 0px;
	display:inline;
	color:000;
    font-family:Arial,Helvetica,sans-serif;	
}



a:hover
{
color:8C7F79;
text-decoration:none;
border-bottom: solid;
} 




.aside
    {
    width: 200px;
    height: 420px;
    margin: 0px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #f3e9de;
	position:absolute;
	left:930px;
	top:538px;
    box-shadow: 4px 4px 3px #333;
    
    
	
}



#footer
	{
	background-color: #f3e9de;
	position:absolute;
	left:80px;
	top:1000px;
	border-radius: 10px;
	box-shadow: 4px 4px 3px #333;

	}
 
Last edited:

Lita

New Member
And here is the JQuery page

HTML:
/*
 * jQuery infinitecarousel plugin
 * @author [email protected] - http://www.catchmyfame.com
 * @version 1.0.1
 * @date July 31, 2009
 * @category jQuery plugin
 * @copyright (c) 2009 [email protected] (www.catchmyfame.com)
 * @license CC Attribution-No Derivative Works 3.0 - http://creativecommons.org/licenses/by-nd/3.0/
 */

(function($){
	$.fn.extend({ 
		infiniteCarousel: function(options)
		{
			var defaults = 
			{
				transitionSpeed : 1500,
				displayTime : 6000,
				textholderHeight : .2,
				displayProgressBar : 1
			};
		var options = $.extend(defaults, options);
	
    		return this.each(function() {
    			var randID = Math.round(Math.random()*100000000);
				var o=options;
				var obj = $(this);

				var numImages = $('img', obj).length; // Number of images
				var imgHeight = $('img:first', obj).height();
				var imgWidth = $('img:first', obj).width();
				var autopilot = 1;
			
				$('p', obj).hide(); // Hide any text paragraphs in the carousel
				$(obj).width(imgWidth).height(imgHeight);
			
				// Build progress bar
				if(o.displayProgressBar)
				{
					$(obj).append('<div id="progress'+randID+'" style="position:absolute;bottom:0;background:#bbb;left:'+$(obj).css('paddingLeft')+'"></div>');
					$('#progress'+randID).width(imgWidth).height(5).css('opacity','.5');
				}
			
				// Move last image and stick it on the front
				$(obj).css({'overflow':'hidden','position':'relative'});
				$('li:last', obj).prependTo($('ul', obj));
				$('ul', obj).css('left',-imgWidth+'px');
			
				// Build textholder div thats as wide as the carousel and 20%-25% of the height
				$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
				var correctTHWidth = parseInt($('#textholder'+randID).css('paddingTop'));
				var correctTHHeight = parseInt($('#textholder'+randID).css('paddingRight'));
				$('#textholder'+randID).width(imgWidth-(correctTHWidth * 2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({'backgroundColor':'#FFF','opacity':'0.5'});
				showtext($('li:eq(1) p', obj).html());
			
				// Prev/next button(img) 
				html = '<div id="btn_rt'+randID+'" style="position:absolute;right:0;top:'+((imgHeight/2)-15)+'px"><a href="javascript:void(0);"><img style="border:none;margin-right:2px" src="/js/infiniteCarousel/images/rt.png" /></a></div>';
				html += '<div id="btn_lt'+randID+'" style="position:absolute;left:0;top:'+((imgHeight/2)-15)+'px"><a href="javascript:void(0);"><img style="border:none;margin-left:2px" src="/js/infiniteCarousel/images/lt.png" /></a></div>';
				$(obj).append(html);
			
				// Pause/play button(img)	
				html = '<a href="javascript:void(0);"><img id="pause_btn'+randID+'" src="/js/infiniteCarousel/images/pause.png" style="position:absolute;top:3px;right:3px;border:none" alt="Pause" /></a>';
				html += '<a href="javascript:void(0);"><img id="play_btn'+randID+'" src="/js/infiniteCarousel/images/play.png" style="position:absolute;top:3px;right:3px;border:none;display:none;" alt="Play" /></a>';
				$(obj).append(html);
				$('#pause_btn'+randID).css('opacity','.5').hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)});
				$('#pause_btn'+randID).click(function(){
					autopilot = 0;
					$('#progress'+randID).stop().fadeOut();
					clearTimeout(clearInt);
					$('#pause_btn'+randID).fadeOut(250);
					$('#play_btn'+randID).fadeIn(250);
					showminmax();
				});
				$('#play_btn'+randID).css('opacity','.5').hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)});
				$('#play_btn'+randID).click(function(){
					autopilot = 1;
					anim('next');
					$('#play_btn'+randID).hide();
					clearInt=setInterval(function(){anim('next');},o.displayTime+o.transitionSpeed);
					setTimeout(function(){$('#pause_btn'+randID).show();$('#progress'+randID).fadeIn().width(imgWidth).height(5);},o.transitionSpeed);
				});
				
				// Left and right arrow image button actions
				$('#btn_rt'+randID).css('opacity','.75').click(function(){
					autopilot = 0;
					$('#progress'+randID).stop().fadeOut();
					anim('next');
					setTimeout(function(){$('#play_btn'+randID).fadeIn(250);},o.transitionSpeed);
					clearTimeout(clearInt);
				}).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.75'},250)});
				$('#btn_lt'+randID).css('opacity','.75').click(function(){
					autopilot = 0;
					$('#progress'+randID).stop().fadeOut();
					anim('prev');
					setTimeout(function(){$('#play_btn'+randID).fadeIn(250);},o.transitionSpeed);
					clearTimeout(clearInt);
				}).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.75'},250)});
			
				function showtext(t)
				{
					// the text will always be the text of the second list item (if it exists)
					if(t != null)
					{
						$('#textholder'+randID).html(t).animate({marginBottom:'0px'},500); // Raise textholder
						showminmax();
					}
				}
				function showminmax()
				{
						if(!autopilot)
						{
							html = '<img style="position:absolute;top:2px;right:18px;display:none;cursor:pointer" src="/js/infiniteCarousel/images/down.png" title="Minimize" alt="minimize" id="min" /><img style="position:absolute;top:2px;right:18px;display:none;cursor:pointer" src="/js/infiniteCarousel/images/up.png" title="Maximize" alt="maximize" id="max" />';
							html += '<img style="position:absolute;top:2px;right:6px;display:none;cursor:pointer" src="/js/infiniteCarousel/images/close.png" title="Close" alt="close" id="close" />';
							$('#textholder'+randID).append(html);
							$('#min').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+24+'px'},500,function(){$("#min,#max").toggle();});});
							$('#max').click(function(){$('#textholder'+randID).animate({marginBottom:'0px'},500,function(){$("#min,#max").toggle();});});
							$('#close').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);});
						}
				}
				function anim(direction)
				{
					// Fade left/right arrows out when transitioning
					$('#btn_rt'+randID).fadeOut(500);
					$('#btn_lt'+randID).fadeOut(500);
					
					// animate textholder out of frame
					$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);					

					//?? Fade out play/pause?
					$('#pause_btn'+randID).fadeOut(250);
					$('#play_btn'+randID).fadeOut(250);
			
					if(direction == "next")
					{
						// Copy leftmost (first) li and insert it after the last li
						$('li:first', obj).clone().insertAfter($('li:last', obj));	
						// Update width and left position of ul and animate ul to the left
						$('ul', obj)
							.width(imgWidth*(numImages+1))
							.animate({left:-imgWidth*2},o.transitionSpeed,function(){
								$('li:first', obj).remove();
								$('ul', obj).css('left',-imgWidth+'px').width(imgWidth*numImages);
								$('#btn_rt'+randID).fadeIn(500);
								$('#btn_lt'+randID).fadeIn(500);
								if(autopilot) $('#pause_btn'+randID).fadeIn(250);
								showtext($('li:eq(1) p', obj).html());
								if(autopilot)
								{
									$('#progress'+randID).width(imgWidth).height(5);
									$('#progress'+randID).animate({'width':0},o.displayTime,function(){
										$('#pause_btn'+randID).fadeOut(50);
										setTimeout(function(){$('#pause_btn'+randID).fadeIn(250)},o.transitionSpeed)
									});
								}
							});
					}
					if(direction == "prev")
					{
						// Copy rightmost (last) li and insert it after the first li
						$('li:last', obj).clone().insertBefore($('li:first', obj));
						// Update width and left position of ul and animate ul to the right
						$('ul', obj)
							.width(imgWidth*(numImages+1))
							.css('left',-imgWidth*2+'px')
							.animate({left:-imgWidth},o.transitionSpeed,function(){
								$('li:last', obj).remove();
								$('ul', obj).width(imgWidth*numImages);
								$('#btn_rt'+randID).fadeIn(500);
								$('#btn_lt'+randID).fadeIn(500);
								if(autopilot) $('#pause_btn'+randID).fadeIn(250);
								showtext($('li:eq(1) p', obj).html());
							});
					}
				}
				var clearInt = setInterval(function(){anim('next');},o.displayTime+o.transitionSpeed);
				$('#progress'+randID).animate({'width':0},o.displayTime+o.transitionSpeed,function(){
					$('#pause_btn'+randID).fadeOut(100);
					setTimeout(function(){$('#pause_btn'+randID).fadeIn(250)},o.transitionSpeed)
				});
  		});
    	}
	});
})(jQuery);
 

Lita

New Member
The carousel is not showing up as it is supposed to it is broken and the images and text are streaming down the page behind my content div. I have a screen shot of it here.

Screen.jpg
 

DHDdirect

New Member
This may be a stupid question but do you have all your paths set correctly? Because in your code pasted you have it all set in your root folder.
 

Lita

New Member
I am not sure, I downloaded the file directly to my mama cakes folder and then copied the code straight from the website page. Im not sure what to put where, I thought it would just synce up but I guess something is not connecting somewhere in my code.
 
Last edited:

LouTheDesigner

New Member
First check to see that your jquery.infinitecarousel.js file is located in the same directory as the file referencing it. I would then put it into a function that fires when the document is ready, like this:

$(document).ready(function() {
$('#carousel').infiniteCarousel();
});


Or if that doesn't work, you may be working in noconflict mode, in which case use this:

jQuery(document).ready(function($) {
$('#carousel').infiniteCarousel();
});

-Louis
 

DHDdirect

New Member
Well they packaged the files a folders js and then in a folder called infiniteCarousel in there zip file. So if you extracted that into your root folder i would change this line:

Code:
<script type=[COLOR=#0000FF]"text/javascript"[/COLOR] src=[COLOR=#0000FF]"jquery.infinitecarousel.js"[/COLOR]></script>
in your HTML to this:

Code:
[COLOR=#000080]
<script type=[COLOR=#0000FF]"text/javascript"[/COLOR] src=[COLOR=#0000FF]"js/infiniteCarousel/jquery.infinitecarousel.js"[/COLOR]></script>[/COLOR]

As the carousel file may very well be located in that location.
 
Last edited:

Lita

New Member
@DHDdirect That was it, it is working! I am just finishing on relinking the image for the buttons and it looks good. Thank you so much for your help you really helped me out a lot. I do have one question, where would I go on the code to move the carousel more to the center of the page? Right now it is right on top my box 5 div and floating to the right. I also want to make the box wider.

Screenshot2.jpg
 
Last edited:
Top