Why cant I get this Carousel to work?

Discussion in 'Web Design' started by Lita, Jun 14, 2012.

to remove all ads.
  1. Lita

    Lita New Member

    Messages:
    31
    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: Jun 14, 2012
  2. Lita

    Lita New Member

    Messages:
    31
    Anyone have any suggestions?
     
  3. DHDdirect

    DHDdirect New Member

    Messages:
    383
    Can we see what you have so far as it will help to determine where you are going wrong.
     
  4. Lita

    Lita New Member

    Messages:
    31
    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: Jun 16, 2012
  5. Lita

    Lita New Member

    Messages:
    31
    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);
    
    
    
     
  6. DHDdirect

    DHDdirect New Member

    Messages:
    383
    What are your symptoms? I just plugged in the code you have provided and the carousel is working for me.
     
  7. Lita

    Lita New Member

    Messages:
    31
    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.

    [​IMG]
     
  8. DHDdirect

    DHDdirect New Member

    Messages:
    383
    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.
     
  9. Lita

    Lita New Member

    Messages:
    31
    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: Jun 17, 2012
  10. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    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
     
  11. DHDdirect

    DHDdirect New Member

    Messages:
    383
    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: Jun 18, 2012
  12. Lita

    Lita New Member

    Messages:
    31
    @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.

    [​IMG]
     
    Last edited: Jun 18, 2012
  13. Lita

    Lita New Member

    Messages:
    31
    Actually I figured it out and it is all set. Thank you again!
     

Share This Page