#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    7
    Rep Power
    0

    Ie error object doesn't support this property or method


    Please help me figure this out, i downloaded a jquery plugin,being a complete newbie to javascript im tottaly lost, i have edited the code so that i can get an ajax style poppup it works fine in firefox but not with ie :
    Code:
    <script type="text/javascript">
    jQuery(function($) {
    		$("#carousel").html($("#holder_images").html()).carousel3d({ centerX: $('#carousel').offset().left + $('#carousel').width()/2 }); 
    });
    this is where im getting the error.

    Please any help with this regard with be greatly appreciated.
    Code:
    	
    		
    
    /*
     * Create a 3D carousel similar to the popular Flash carousel
     *
     * @name		carousel3d
     * @author		Kevin Crossman
     * @contact		kevincrossman@gmail.com
     * @version		1.1
     * @date			Oct 29 2008
     * @type    	 	jQuery
     * @example  
     *
     *	 	* Place icon images inside <div id="carousel" />
     *
     * 				<div id='carousel'>
     *						<img src='images/image1.png' alt='image1' /> 
     *						<img src='images/image2.png' alt='image2' /> 
     *						<img src='images/image3.png' alt='image3' /> 
     *						<img src='images/image4.png' alt='image4' /> 
     *
     *		* to make image a page link, add class 'link' and set the longdesc attr to a web address
     *						<img class="link" src='images/image5.png' alt='image5' longdesc="http://plugins.jquery.com/" /> 
     *
     *				</div>
     *
     *	 	* If using text box, place spans inside <div id="carouselText" /> and add <div class="text" /> to house the info when displayed
     * 		* spans should contain content that will be displayed when the icon is clicked
     *					
     * 				<div class="text"></div>
     *				<div id="carouselText">
     *					<span>customize this space for icon 1</span>
     *					<span>customize this space for icon 2</span>
     *					<span>customize this space for icon 3</span>
     *					<span>customize this space for icon 4</span>
     *				</div>
     *
     *
     * 				
     *
     */
    
    (function($) {
    
    	$.fn.extend({
    		
    		carousel3d: function(options) { 
    
    				opt = $.extend({},$.carouselSetup.defaults, options);		// extend options
    				
    				$this = $(this); 
    				
    				opt.speed = parseInt(6 - opt.speed);																		
            		btnSpeed = Math.round(10 - opt.speed) * $.browser.msie ? 0.01 : 0.2;					// original button speed
            		contSpeed = btnSpeed * $.browser.msie ? 0.5 : 0.15;											// original continuous speed
               		opt.speed = opt.speed * $.browser.msie ? 2500 : 1500;											// original mouse speed
    				
    				
    				$imgs = $('img', $this).hide();											// set variable with carousel images; hide for now
    				$texts = $('span', $('#carouselText')).hide();					// set variable with carousel text boxes; hide for now
    				if (opt.textBox && !$texts.size()) alert('<div id="carouselText" /> + <span>\'s. . . do not exist.  either add them or set textBox option to 0');
    				
    				items = $imgs.size(); 														// number of icons in carousel
    				numSlots = items * opt.padding; 										// in order for the movement to flow smoothly, there are additional 'slots' in the carousel which the images will pace through
    				
    				if (opt.padding == 0) opt.padding = 1;								// padding must be at least 1
    				
    				$imgs.each(function(i) { new $.imageSetUp(this, i) });	// setup images
    				new $.carouselSetup();													// setup carousel        		
               }
    	});
        
        
    	$.imageSetUp = function(im, _index) {
    		
    		im.orig_w = $(im).width(), im.orig_h = $(im).height();				// save the original dimensions; used when image is clicked
    		
    		var w_h = resize( im.orig_w, 128, im.orig_h, 108).split('|');		// calculate w/h of images in carousel
    		im.h = w_h[1], im.w = w_h[0];
    		
    		im.slot = _index * opt.padding;												// position of the image in the carousel
    		im.angle = parseInt(( _index * opt.padding ) * (( Math.PI * 2 ) / numSlots )*1000)/1000;		// original angle of the image
    		
    		im.clicked = { 																				// css to animate when image is clicked
    			top: parseInt(opt.centerY - im.orig_h/3) + 'px',
    			left: parseInt(opt.centerX - im.orig_w/3) + 'px',
    			width: im.orig_w + 'px',
    			height: im.orig_h + 'px',
    			
    		};
    		
    		function pop_up () {
    			
    		try {
    		if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
    			$("body","html").css({height: "100%", width: "100%"});
    			$("html").css("overflow","hidden");
    			if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
    				$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
    				$("#TB_overlay").click(tb_remove);
    			}
    		}else{//all others
    			if(document.getElementById("TB_overlay") === null){
    				$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
    				$("#TB_overlay").click(tb_remove);
    			}
    		}
    		
    		if(tb_detectMacXFF()){
    			$("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
    		}else{
    			$("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
    		}
    		
    		if(caption===null){caption="";}
    		$("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page
    		$('#TB_load').show();//show loader
    		
    				}
    				
    				catch (err ) {};
    				//end of code
    		}
    		im.animateOn = function(el) { 
    		
    		$imgs.fadeOut(700); el.animate( im.clicked, 500 );pop_up() }; 	// hide the carousel
    		
    		new $.TextBoxSetUp(im, _index);											// setup text box	
    		
    		$(im).attr('id', 'pix'+_index).css({position: 'absolute'});				// id will be referenced when moving the image
    			
    		if ($(im).hasClass('link')) $(im).click( function(){ window.open($(this).attr('longdesc')) } );
    		else $(im).one('click', clickOn);												// bind clickOn to image
    		
    	};  
    	
        $.TextBoxSetUp = function(im, _index) {
         	im.textClicked = {																			// css to animate when image is clicked
    			left: opt.centerX - opt.radiusX - im.w + 'px',
    			top: opt.centerY + 'px',
    			width: im.w + 'px',
    			height: im.h + 'px' 
    		};
    		im.textBoxCss = {																			// textBox positioning css 
    			top: opt.centerY *0.7 + 'px',
    			left: opt.centerX - opt.radiusX * 0.9 + 'px' 
    		};
    		im.textAnimateOn = function(el) { 
    			var msg = '';
    			if ( !$texts.size() ) msg += '<div id="carouselText" /> + <span>\'s. . . do not exist';
    			else if ( !$('#text').size() ) msg += '<div id="text" /> does not exist';
    			else {
    				$imgs.fadeOut(700);
    				el.animate( im.textClicked, 500 );
    				$('#text')
    					.css( im.textBoxCss )
    					.html( $texts.eq(_index).html() )
    					.fadeIn(700);
    			}
    			if (msg) alert( 'Cannot setup text box; ' + msg );
    		};
    		
    	};  
    	
    	$.carouselSetup = function() {
    	
    		var im, _t, _s;
    		
    		if (opt.control=='buttons') controls();
    		else if (opt.control=='continuous') rate = btnSpeed *.3;
    		else $().mousemove(function(e) { rate = (e.pageX - opt.centerX) / opt.speed; });
    		
    		// javascript Motion Tween by PHILIPPE MAEGERMAN; very similar to tweening in Flash.
    		// check out the full details at his site: http://jstween.blogspot.com/
    		t1 = new Tween(new Object(), 'xyz', Tween.regularEaseInOut, 0, 10000, 10000);
                
    		t1.onMotionChanged = function(event) {
    			for (var j=0; j<items, im=$('#pix'+j)[0]; j++) {
    				
    				im.slot = (im.slot == numSlots - 1) ? 0: im.slot++;			// if image is in last slot, set as first slot; else advance 1 slot
    				_t = Math.sin(im.angle) * opt.radiusY + opt.centerY;		// calculate top positioning
    				_s = ((_t - opt.perspective) / (opt.centerY + opt.radiusY - opt.perspective));	// calculate size of image based on position in carsousel
    				
    				$(im).css({ 																		// set css values for image
    					top: _t, 
    					left: Math.cos(im.angle) * opt.radiusX + opt.centerX, 	// calculate left positioning
    					width: im.w * _s, 															// multiply image size by newly calculated size
    					height: im.h * _s, 
    					zIndex: Math.round(_t)+100,										// z-index makes front images fully visible
    					opacity: (opt.fadeEffect == 1) ? Math.sin(im.angle) : 1 });	// if fadeEffect is set, calculate opacity based on location in carousel
    				
    				if (opt.fadeEffect == 1) {
    					$(im)[ Math.sin(im.angle)<=0 ? 'hide' : !$(im).is(':visible') ? 'show' : ''  ];
    				}
    				
    				im.angle += opt.control=='continuous' ? contSpeed : rate;			// change image angle based on carousel speed
               	}
           	};
           	
           	t1.start();																					// start the motion
           	$imgs.fadeIn(1500);																// fadeIn the images
        };
        
        var opt, numSlots, items, rate = contSpeed = btnSpeed = 0;		// initialize variables
    
    	function clickOn() {																		// actions when image in carousel is clicked
    		var elem = this;
    		t1.stop(); 																					// stop the Tween motion
    		$('#buttonwrapper:visible').fadeOut();										// hide the buttons
    			
    		$cloned = 																				// clone the image clicked and leave the original in place (this seemed easier than pulling the orig out of place)
    		
    		$(this).clone().prependTo($this).click(function() { 					// add to carousel, when clicked again . . .	
    			$imgs.fadeIn();																	// show the carousel images
    			$(this)																					// animate back to carousel slot
    				.animate({ 
    					left: $(elem).position().left + 'px', 									// change position
    					top: $(elem).position().top + 'px', 
    					width: $(elem).width() + 'px', 										//  and size
    					height: $(elem).height() + 'px' 
                 	}, function() {	
    					$(this).remove();															// remove the cloned image, 
                		$(elem).one('click', clickOn);										// rebind the image click event,
                		t1.start();																		// and restart carousel 
              		});
              	$('#text:visible').fadeOut();													// if showing, hide the text box
           		$('#buttonwrapper:hidden').fadeIn();									// if hidden, show the buttons
           	});
           	
           	(opt.textBox) ? elem.textAnimateOn($cloned) : elem.animateOn($cloned);			// animate the clone; enlarge or position to side of text box
        };
    	
    	function controls() {																		// add button and functions
    		rate=0;
    		var btns = $('<div id="buttonwrapper" />').css({ left: opt.centerX+'px', top: opt.centerY*0.5+'px'}), 
    			left_btn = $('<div id="left" />').hover(function(){rate=btnSpeed}, function(){rate=0}), 
    			right_btn = $('<div id="right" />').hover(function(){rate=-btnSpeed}, function(){rate=0});
    		$this.prepend( btns.append( left_btn, right_btn ));
        };
        
    	function resize(w, max_w, h, max_h) {										// resize the images
    		if (w>max_w || h>max_h) {
    			var x_ratio = max_w / w;
    			var y_ratio = max_h / h;
    			if ((x_ratio * h) < max_h) return max_w + '|' + Math.ceil(x_ratio * h);
    			else return Math.ceil(y_ratio * w) + '|' + max_h;
    		}
    		else return w + '|' + h;
    	};
    	
    	function resetAnimations() {														// clicked images and text boxes must be repositioned after resizing screen
    		$imgs.each(function(i) { 
    			this.clicked.left = parseInt(opt.centerX*1 - this.orig_w/2) + 'px';
           		this.textClicked.left = parseInt(opt.centerX*1 - opt.radiusX*1 - this.w*1) + 'px';
            	this.textBoxCss.left = parseInt(opt.centerX*1 - opt.radiusX*1) + 'px';
    		});
    	};
    	
        $(window).resize(function() {
    		opt.centerX = $this.offset().left+$this.width()/2;
    		resetAnimations();
    	});
    
        $.carouselSetup.defaults = {	
            control: 'mouse',	  																	// 'button', 'mouse', or  'continuous' control
            speed: 3,																					// speed of mouse or button.  use scale of 1-5
            radiusX: 250,																			// x radius of the carousel
            radiusY: 40,																				// y radius of the carousel
            centerX: 0,																				// x position on the screen
            centerY: 250,																			// y position on the screen
            perspective: 120,																		// perspective of the image as it travels around the carousel
          	padding: 24, 																			// the number of padded items in between each icon.  
            																								// the more padding, the more precise the incremental movement,
            																								// however this also create a lot more calculations
            																								// to keep icons evenly spaced, the num of icons should be a multiple of the padding
            fadeEffect: 0,																			// fade icons as cycle to the back of the carousel
            textBox: 0																				//  1 = display text area for each icon, 0 = no display
        };
    
    })(jQuery);
    ////////////////////////////////////////////////////////////////

    Here is my full html code :
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>i CUBED webdesigners and consultants</title>
    <link href="../Testing Website stuff/Ajax pop up/thickbox[1].css" rel="stylesheet" type="text/css" />
    <link href="icubed.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery/jquery-latest.js"></script>
    <script type="text/javascript" src="jquery/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="jquery/Tween.js"></script>
    <script type="text/javascript" src="jquery/jquery.carousel3d.js"></script>
    <script type="text/javascript" src="jquery/thickbox.js"></script>
    <script src="SpryAccordion.js" type="text/javascript"></script>
    
    
    <link href="jquery/thickbox[1].css" rel="stylesheet" type="text/css"  media="screen"/>
    		
    	<style type="text/css" title="text/css" media="screen">
     		
     		#holder_images { display: none; }
    	#carouselText {
    	position:absolute;
    	left:150px;
    	top:50px;
    	width: 403px;
    	height: 300px;
    	padding: 3em;
    	font: 1em/1em Gill Sans,Verdana;
    	text-transform: uppercase;
    	text-align: center;
    	border: 2px solid #DDD;
    	color: #FFF;
    	background-color: #666;
    	display: none;
    	}
    	
    		#carousel img
    		{
    			border: 2px solid #ddd;
    			
    		}
    		#carousel img.link:hover
    		{
    			border: 4px solid #0e0893;
    		}
    		#carousel {
    	background-color:#FFFFFF;
    	position:absolute;
    	left:103px;
    	top:100px;
    	height:300px;
    	width:600px;
    	margin-top:6px;
    	
    	}
    	
    	#text
    	{
    	position:fixed;
    	left:10%;
    	top:50%;
    	width: 600px;
    	height: 300px;
    	padding: 3em;
    	font: 1em/1em Gill Sans,Verdana;
    	text-transform: uppercase;
    	text-align: center;
    	border: 2px solid #DDD;
    	color: #FFF;
    	background-color: #666;
    	display: none;
    	
    		}
    		
    		
      
    body {
    	background-color: #FFFFFF;
    	margin-top: 0cm;
    	background-image: url(background_test_image.jpg);
    	}
        .style7 {
    	font-family: "Trebuchet MS";
    	color: #FFFFFF;
    	font-size: small;
    }
        .style8 {color: #990000}
    	
    	.TB_overlayBG {
    	background-color:#000;
    	filter:alpha(opacity=75);
    	-moz-opacity: 0.75;
    	opacity: 0.75;
    }
    
    #TB_overlay {
    	position: fixed;
    	z-index:100;
    	top: 0px;
    	left: 0px;
    	height:100%;
    	width:100%;
    }
    
    #TB_window {
    	position: fixed;
    	background: #ffffff;
    	z-index: 102;
    	color:#000000;
    	display:none;
    	border: 4px solid #525252;
    	text-align:left;
    	top:50%;
    	left:50%;
    }
    
    .TB_overlayMacFFBGHack {background: url(../../../AppData/Local/Microsoft/Windows/Temporary%20Internet%20Files/Low/Content.IE5/Q8019XJ4/macFFBgHack.png) repeat;}
    .TB_overlayBG {
    	background-color:#000;
    	filter:alpha(opacity=75);
    	-moz-opacity: 0.75;
    	opacity: 0.75;
    }
    
    #TB_HideSelect{
    	z-index:99;
    	position:fixed;
    	top: 0;
    	left: 0;
    	background-color:#fff;
    	border:none;
    	filter:alpha(opacity=0);
    	-moz-opacity: 0;
    	opacity: 0;
    	height:100%;
    	width:100%;
    }
    
        </style>
     <script type="text/javascript">
    jQuery(function($) {
    		$("#carousel").html($("#holder_images").html()).carousel3d({ centerX: $('#carousel').offset().left + $('#carousel').width()/2 }); 
    		
    		});
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    </script>  
        
       <!-- <script type="text/javascript">
    		jQuery(function($) {
    			$("#carousel").html($("#holder_images").html()).carousel3d({control: 'mouse', textBox:1, centerX: $('#carousel').offset().left + $('#carousel').width()/2 }); 
    		});
    	</script> -->
    
    
       
    <link href="SpryAccordion.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style9 {
    	color: #FFFFFF;
    	font-family: "Trebuchet MS";
    }
    .style10 {font-size: large}
    -->
    </style>
    </head>
    
    
    <body class="oneColFixCtrHdr" onload="MM_preloadImages('home (2).png','world (2).png','smashing (2).png','vault (2).png','phonebook (2).png','images/color.jpg','images/3136589840_7c79fcd601.jpg','images/untitled.bmp')">
    <div class="oneColFixCtrHdr" id="topmost">
      <div align="center">
        <table width="1069" border="0">
          <tr>
            <td width="698" height="100"><img src="icubed_logo.jpg" width="700" height="100" /></td>
            <td width="54" class="style7">HOME |</td>
            <td width="87" class="style7">WEB DESIGN |</td>
            <td width="60" class="style7">SERVICES|</td>
            <td width="53" class="style7">PRICING|</td>
            <td width="91"><span class="style7">CONTACT US</span></td>
          </tr>
        </table>
      </div>
    </div>
    
    <center>
    </center>
    <div id="container"  align="center">
      <div id="header"> 
       
       <div id="carousel">	<img title="sinatra at the beach 1" src="images/3136589840_7c79fcd601.jpg" alt="imagine" width="500" height="375" /> 
    	 <!-- <img title="sinatra at the beach 2" src="images/color.jpg" alt="incorporate" width="500" height="375" /> 
    	  <a href="jquery/untitled.bmp" title="click on me" class="thickbox"><img title="sinatra at the beach 3" src="images/untitled.bmp" alt="inspire" width="500" height="375" /></a> --></div>
     <div id="text"></div>
    <div id="holder_images" align="middle">	
    		 
    	 <a href="images/3136589840_7c79fcd601.jpg" class="thickbox" ><img   title="sinatra at the beach 1" src="images/3136589840_7c79fcd601.jpg" alt="imagine" width="450" height="375" /> </a>
    	<img  title="sinatra at the beach 2" src="images/color.jpg" alt="incorporate" width="450" height="375" /> 
    	<img  title="sinatra at the beach 3" src="images/untitled.bmp" alt="inspire" width="450" height="375" /> 
            
    	 <!-- <img title="sinatra at the beach 4" src="images/sinatra_beach_4.jpg" alt="sinatra_beach_4" width="350" height="275"/> 
    	  <img title="sinatra at the beach 5" src="images/sinatra_beach_5.jpg" alt="sinatra_beach_5" width="350" height="275" /> 
    	  <img title="sinatra at the beach 6" src="images/sinatra_beach_6.jpg" alt="sinatra_beach_6" width="350" height="275"/> 
    		<img title="sinatra at the beach 7" src="images/sinatra_beach_7.jpg" alt="sinatra_beach_7" width="500" height="375" /> 
    		<img title="sinatra at the beach 8" src="images/sinatra_beach_8.jpg" alt="sinatra_beach_8" width="500" height="375" /> -->
    	</div>
        <div id="carouselText">
    		<span>
            <img src="images/v.jpg"  width="600" height="300"/></span>
    		<span>customize this information for image 1</span>
    		<span>customize this information for image 2</span>
    		<span>customize this information for image 3</span>
    		<span>customize this information for image 4</span>
    		<span>customize this information for image 5</span>
    		<span>customize this information for image 6</span>
    		<span>customize this information for image 7</span>
    		<span>customize this information for image 8</span>
    	</div>
      <div align="right">
        <!-- end #header -->
      </div>
      </div>
      <div id="mainContent">
        <div align="center"><br />
        <br />
        <span class="style7 style10">What we offer</span><br />
          <br />
            
            <table width="711" height="86" border="0">
              <tr>
                <td><a href="home.png" class="thickbox"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','home (2).png',1)"><img src="home.png" alt="HOME" name="Image10" width="128" height="128" border="0" id="Image10" /></a></td>
                <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','world (2).png',1)"><img src="world.png" alt="WEBSITE DESIGN" name="Image11" width="128" height="128" border="0" id="Image11" /></a></td>
                <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','smashing (2).png',1)"><img src="smashing.png" alt="SERVICES" name="Image12" width="128" height="128" border="0" id="Image12" /></a></td>
                <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','vault (2).png',1)"><img src="vault.png" alt="PRICING" name="Image13" width="128" height="128" border="0" id="Image13" /></a></td>
                <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','phonebook (2).png',1)"><img src="phonebook.png" alt="CONTACT US" name="Image14" width="128" height="128" border="0" id="Image14" /></a></td>
              </tr>
            </table>
            <p>&nbsp;</p>
          <p align="left">&nbsp;</p>
            
            <div align="center">
                <ol>
              </ol>
              <div id="Accordion1" class="Accordion" tabindex="0" align="center">
                <div class="AccordionPanel">
                    <div class="AccordionPanelTab style9">Web Design</div>
                  <div class="AccordionPanelContent">Content 1</div>
                  </div>
                  <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Website Redesign</div>
                    <div class="AccordionPanelContent">Content 2</div>
                  </div>
                  <div class="AccordionPanel">
                    <div class="AccordionPanelTab">SEO Submission</div>
                    <div class="AccordionPanelContent">Content 3</div>
                  </div>
                  <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Graphic Design</div>
                    <div class="AccordionPanelContent">Content 4</div>
                  </div>
              </div><!-- end of accordian -->
            </div>
            <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
        </div>
       
      </div>
      <div id="footer">
        <div align="center" class="style7 style8">
          <p> 2002 - 09, Copyright - i cubbe webdesigners and consultants.cc All Rights Reserved 
            
            Have any complaints / suggestions ? Drop all here .. we would love to listen  
          Ventures: InfyWeb | InfyTemplates | InfyLogo | InfyScript | Esolz Academy | InfyHire</p>
          <p>&nbsp;</p>
        </div>
      <!-- end #footer --></div>
    <!-- end #container -->
    </div>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    </body>
    </html>
  2. #2
  3. hack of all trades
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2009
    Location
    Madrid
    Posts
    900
    Rep Power
    517
    you're probably trying to do it before the html has loaded that is before you can manipulate the DOM it needs to be loaded....
    so wait for it like this

    $(document).ready(function() {
    var img_html = $("#holder_images").html();
    $("#carousel").html(img_html).carousel3d({
    centerX: $('#carousel').offset().left + $('#carousel').width()/2
    });
    });
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    7
    Rep Power
    0
    Thank you for your reponse, i really appreciate it, unfortunately it still does not work.

    Can you think of anything else that would resolve this issue ??
  6. #4
  7. hack of all trades
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2009
    Location
    Madrid
    Posts
    900
    Rep Power
    517
    create a dummy page with only the bare basics in it... jquery, carousel3d and your minimum html... then post url
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    7
    Rep Power
    0
    Hey i was doing some testing on the script and found that the carousel function is causing the error :

    Code:
    $("#carousel").html($("#holder_images").html()).carousel3d({ centerX: $('#carousel').offset().left + $('#carousel').width()/2 }); 
    });
  10. #6
  11. hack of all trades
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2009
    Location
    Madrid
    Posts
    900
    Rep Power
    517
    does that mean you solved it?
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    7
    Rep Power
    0
    Actually i just found out what is causing the error, however i have no idea how to fix it ?? i dont know whether the parameters are causing the error itself or if the DOM is nor reconigising the function "carousel3d" i know that there are no naming confilcts other than that im completly stuck !!

    Any ideas ???
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    7
    Rep Power
    0
    hey hayden, thanks for your help thus far, i managed to fix the error by reloading the original script that i download, but i need some help with adding an ajax style image box or a thickbox, i have downloaded a script that gives me the thickbox effect, add a href property to my html carousel code, but when i click on the pic it takes me to another page instead of giving me the imagebox effect. Do you know how i could fix this ?
  16. #9
  17. hack of all trades
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2009
    Location
    Madrid
    Posts
    900
    Rep Power
    517
    thickbox should work by returning false on the link so it shouldnt take you to another page - the reason this might happen is that right befor you navigate way you're getting a javascript error. do you have firebug installed for firefox? can you upload your test page to a public url?
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    7
    Rep Power
    0
    I have firefox, but no error message is been displayed and no, sorry dude i cannot upload it to a public url, but all the source files that i have uploaded to this fourm is the source that im currntly using do you think that you could copy and paste it ??

    By the way thank you for your help .
  20. #11
  21. hack of all trades
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2009
    Location
    Madrid
    Posts
    900
    Rep Power
    517
    hey no i'm not going to copy and paste because you've got routes to images that don't exist etc... however i downloaded the 3dcarousel plugin and inside the zip file there is a file control_mouse.html, when you click the dog it blows up like thickbox. Their page works fine. Did you do as i suggested and cull out the rest of the crap on your page to see if you can find where the conflict is? Did you include only the bare minimum javascript? which is to say NOT

    <script type="text/javascript" src="jquery/jquery-latest.js"></script>
    <script type="text/javascript" src="jquery/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="jquery/Tween.js"></script>
    <script type="text/javascript" src="jquery/jquery.carousel3d.js"></script>
    <script type="text/javascript" src="jquery/thickbox.js"></script>
    <script src="SpryAccordion.js" type="text/javascript"></script>

    ??

    you say you found an error but havent said what the error is..
    something 'just not working' is not an error.
    you need to be more specific in order to better be helped
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    7
    Rep Power
    0
    Hey with regard to the thickbox i have cut down the javascript to a bare minium, and tested it,still gives me the same result with regard to not displaying the thickbox.

    I found out what was causing the ie error," Ie error object doesn't support this property or method ", and fixed the error by reloading the script,in an earlier post i think i told you that.

    Regards

    Eston
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2009
    Posts
    1
    Rep Power
    0

    Talking


    There is a small error in the carousel3d code, negative values for width and height of the images in the carousel are send to the browser... most browsers can handle it, but not so IE ...

    In order to get the script working on IE, change the lines

    width: im.w * _s;
    height: im.h * _s;

    in t1.onMotionChanged ($.carouselSetup) by:

    width: im.w * _s < 0 ? 0 : im.w * _s;
    height: im.h * _s < 0 ? 0 : m.h * _s;

    and it will work....

    Originally Posted by icubed
    Please help me figure this out, i downloaded a jquery plugin,being a complete newbie to javascript im tottaly lost, i have edited the code so that i can get an ajax style poppup it works fine in firefox but not with ie :
    Code:
    <script type="text/javascript">
    jQuery(function($) {
    		$("#carousel").html($("#holder_images").html()).carousel3d({ centerX: $('#carousel').offset().left + $('#carousel').width()/2 }); 
    });
    this is where im getting the error.

    Please any help with this regard with be greatly appreciated.
    Code:
    	
    		
    
    /*
     * Create a 3D carousel similar to the popular Flash carousel
     *
     * @name		carousel3d
     * @author		Kevin Crossman
     * @contact		kevincrossman@gmail.com
     * @version		1.1
     * @date			Oct 29 2008
     * @type    	 	jQuery
     * @example  
     *
     *	 	* Place icon images inside <div id="carousel" />
     *
     * 				<div id='carousel'>
     *						<img src='images/image1.png' alt='image1' /> 
     *						<img src='images/image2.png' alt='image2' /> 
     *						<img src='images/image3.png' alt='image3' /> 
     *						<img src='images/image4.png' alt='image4' /> 
     *
     *		* to make image a page link, add class 'link' and set the longdesc attr to a web address
     *						<img class="link" src='images/image5.png' alt='image5' longdesc="http://plugins.jquery.com/" /> 
     *
     *				</div>
     *
     *	 	* If using text box, place spans inside <div id="carouselText" /> and add <div class="text" /> to house the info when displayed
     * 		* spans should contain content that will be displayed when the icon is clicked
     *					
     * 				<div class="text"></div>
     *				<div id="carouselText">
     *					<span>customize this space for icon 1</span>
     *					<span>customize this space for icon 2</span>
     *					<span>customize this space for icon 3</span>
     *					<span>customize this space for icon 4</span>
     *				</div>
     *
     *
     * 				
     *
     */
    
    (function($) {
    
    	$.fn.extend({
    		
    		carousel3d: function(options) { 
    
    				opt = $.extend({},$.carouselSetup.defaults, options);		// extend options
    				
    				$this = $(this); 
    				
    				opt.speed = parseInt(6 - opt.speed);																		
            		btnSpeed = Math.round(10 - opt.speed) * $.browser.msie ? 0.01 : 0.2;					// original button speed
            		contSpeed = btnSpeed * $.browser.msie ? 0.5 : 0.15;											// original continuous speed
               		opt.speed = opt.speed * $.browser.msie ? 2500 : 1500;											// original mouse speed
    				
    				
    				$imgs = $('img', $this).hide();											// set variable with carousel images; hide for now
    				$texts = $('span', $('#carouselText')).hide();					// set variable with carousel text boxes; hide for now
    				if (opt.textBox && !$texts.size()) alert('<div id="carouselText" /> + <span>\'s. . . do not exist.  either add them or set textBox option to 0');
    				
    				items = $imgs.size(); 														// number of icons in carousel
    				numSlots = items * opt.padding; 										// in order for the movement to flow smoothly, there are additional 'slots' in the carousel which the images will pace through
    				
    				if (opt.padding == 0) opt.padding = 1;								// padding must be at least 1
    				
    				$imgs.each(function(i) { new $.imageSetUp(this, i) });	// setup images
    				new $.carouselSetup();													// setup carousel        		
               }
    	});
        
        
    	$.imageSetUp = function(im, _index) {
    		
    		im.orig_w = $(im).width(), im.orig_h = $(im).height();				// save the original dimensions; used when image is clicked
    		
    		var w_h = resize( im.orig_w, 128, im.orig_h, 108).split('|');		// calculate w/h of images in carousel
    		im.h = w_h[1], im.w = w_h[0];
    		
    		im.slot = _index * opt.padding;												// position of the image in the carousel
    		im.angle = parseInt(( _index * opt.padding ) * (( Math.PI * 2 ) / numSlots )*1000)/1000;		// original angle of the image
    		
    		im.clicked = { 																				// css to animate when image is clicked
    			top: parseInt(opt.centerY - im.orig_h/3) + 'px',
    			left: parseInt(opt.centerX - im.orig_w/3) + 'px',
    			width: im.orig_w + 'px',
    			height: im.orig_h + 'px',
    			
    		};
    		
    		function pop_up () {
    			
    		try {
    		if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
    			$("body","html").css({height: "100%", width: "100%"});
    			$("html").css("overflow","hidden");
    			if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
    				$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
    				$("#TB_overlay").click(tb_remove);
    			}
    		}else{//all others
    			if(document.getElementById("TB_overlay") === null){
    				$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
    				$("#TB_overlay").click(tb_remove);
    			}
    		}
    		
    		if(tb_detectMacXFF()){
    			$("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
    		}else{
    			$("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
    		}
    		
    		if(caption===null){caption="";}
    		$("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page
    		$('#TB_load').show();//show loader
    		
    				}
    				
    				catch (err ) {};
    				//end of code
    		}
    		im.animateOn = function(el) { 
    		
    		$imgs.fadeOut(700); el.animate( im.clicked, 500 );pop_up() }; 	// hide the carousel
    		
    		new $.TextBoxSetUp(im, _index);											// setup text box	
    		
    		$(im).attr('id', 'pix'+_index).css({position: 'absolute'});				// id will be referenced when moving the image
    			
    		if ($(im).hasClass('link')) $(im).click( function(){ window.open($(this).attr('longdesc')) } );
    		else $(im).one('click', clickOn);												// bind clickOn to image
    		
    	};  
    	
        $.TextBoxSetUp = function(im, _index) {
         	im.textClicked = {																			// css to animate when image is clicked
    			left: opt.centerX - opt.radiusX - im.w + 'px',
    			top: opt.centerY + 'px',
    			width: im.w + 'px',
    			height: im.h + 'px' 
    		};
    		im.textBoxCss = {																			// textBox positioning css 
    			top: opt.centerY *0.7 + 'px',
    			left: opt.centerX - opt.radiusX * 0.9 + 'px' 
    		};
    		im.textAnimateOn = function(el) { 
    			var msg = '';
    			if ( !$texts.size() ) msg += '<div id="carouselText" /> + <span>\'s. . . do not exist';
    			else if ( !$('#text').size() ) msg += '<div id="text" /> does not exist';
    			else {
    				$imgs.fadeOut(700);
    				el.animate( im.textClicked, 500 );
    				$('#text')
    					.css( im.textBoxCss )
    					.html( $texts.eq(_index).html() )
    					.fadeIn(700);
    			}
    			if (msg) alert( 'Cannot setup text box; ' + msg );
    		};
    		
    	};  
    	
    	$.carouselSetup = function() {
    	
    		var im, _t, _s;
    		
    		if (opt.control=='buttons') controls();
    		else if (opt.control=='continuous') rate = btnSpeed *.3;
    		else $().mousemove(function(e) { rate = (e.pageX - opt.centerX) / opt.speed; });
    		
    		// javascript Motion Tween by PHILIPPE MAEGERMAN; very similar to tweening in Flash.
    		// check out the full details at his site: http://jstween.blogspot.com/
    		t1 = new Tween(new Object(), 'xyz', Tween.regularEaseInOut, 0, 10000, 10000);
                
    		t1.onMotionChanged = function(event) {
    			for (var j=0; j<items, im=$('#pix'+j)[0]; j++) {
    				
    				im.slot = (im.slot == numSlots - 1) ? 0: im.slot++;			// if image is in last slot, set as first slot; else advance 1 slot
    				_t = Math.sin(im.angle) * opt.radiusY + opt.centerY;		// calculate top positioning
    				_s = ((_t - opt.perspective) / (opt.centerY + opt.radiusY - opt.perspective));	// calculate size of image based on position in carsousel
    				
    				$(im).css({ 																		// set css values for image
    					top: _t, 
    					left: Math.cos(im.angle) * opt.radiusX + opt.centerX, 	// calculate left positioning
    					width: im.w * _s, 															// multiply image size by newly calculated size
    					height: im.h * _s, 
    					zIndex: Math.round(_t)+100,										// z-index makes front images fully visible
    					opacity: (opt.fadeEffect == 1) ? Math.sin(im.angle) : 1 });	// if fadeEffect is set, calculate opacity based on location in carousel
    				
    				if (opt.fadeEffect == 1) {
    					$(im)[ Math.sin(im.angle)<=0 ? 'hide' : !$(im).is(':visible') ? 'show' : ''  ];
    				}
    				
    				im.angle += opt.control=='continuous' ? contSpeed : rate;			// change image angle based on carousel speed
               	}
           	};
           	
           	t1.start();																					// start the motion
           	$imgs.fadeIn(1500);																// fadeIn the images
        };
        
        var opt, numSlots, items, rate = contSpeed = btnSpeed = 0;		// initialize variables
    
    	function clickOn() {																		// actions when image in carousel is clicked
    		var elem = this;
    		t1.stop(); 																					// stop the Tween motion
    		$('#buttonwrapper:visible').fadeOut();										// hide the buttons
    			
    		$cloned = 																				// clone the image clicked and leave the original in place (this seemed easier than pulling the orig out of place)
    		
    		$(this).clone().prependTo($this).click(function() { 					// add to carousel, when clicked again . . .	
    			$imgs.fadeIn();																	// show the carousel images
    			$(this)																					// animate back to carousel slot
    				.animate({ 
    					left: $(elem).position().left + 'px', 									// change position
    					top: $(elem).position().top + 'px', 
    					width: $(elem).width() + 'px', 										//  and size
    					height: $(elem).height() + 'px' 
                 	}, function() {	
    					$(this).remove();															// remove the cloned image, 
                		$(elem).one('click', clickOn);										// rebind the image click event,
                		t1.start();																		// and restart carousel 
              		});
              	$('#text:visible').fadeOut();													// if showing, hide the text box
           		$('#buttonwrapper:hidden').fadeIn();									// if hidden, show the buttons
           	});
           	
           	(opt.textBox) ? elem.textAnimateOn($cloned) : elem.animateOn($cloned);			// animate the clone; enlarge or position to side of text box
        };
    	
    	function controls() {																		// add button and functions
    		rate=0;
    		var btns = $('<div id="buttonwrapper" />').css({ left: opt.centerX+'px', top: opt.centerY*0.5+'px'}), 
    			left_btn = $('<div id="left" />').hover(function(){rate=btnSpeed}, function(){rate=0}), 
    			right_btn = $('<div id="right" />').hover(function(){rate=-btnSpeed}, function(){rate=0});
    		$this.prepend( btns.append( left_btn, right_btn ));
        };
        
    	function resize(w, max_w, h, max_h) {										// resize the images
    		if (w>max_w || h>max_h) {
    			var x_ratio = max_w / w;
    			var y_ratio = max_h / h;
    			if ((x_ratio * h) < max_h) return max_w + '|' + Math.ceil(x_ratio * h);
    			else return Math.ceil(y_ratio * w) + '|' + max_h;
    		}
    		else return w + '|' + h;
    	};
    	
    	function resetAnimations() {														// clicked images and text boxes must be repositioned after resizing screen
    		$imgs.each(function(i) { 
    			this.clicked.left = parseInt(opt.centerX*1 - this.orig_w/2) + 'px';
           		this.textClicked.left = parseInt(opt.centerX*1 - opt.radiusX*1 - this.w*1) + 'px';
            	this.textBoxCss.left = parseInt(opt.centerX*1 - opt.radiusX*1) + 'px';
    		});
    	};
    	
        $(window).resize(function() {
    		opt.centerX = $this.offset().left+$this.width()/2;
    		resetAnimations();
    	});
    
        $.carouselSetup.defaults = {	
            control: 'mouse',	  																	// 'button', 'mouse', or  'continuous' control
            speed: 3,																					// speed of mouse or button.  use scale of 1-5
            radiusX: 250,																			// x radius of the carousel
            radiusY: 40,																				// y radius of the carousel
            centerX: 0,																				// x position on the screen
            centerY: 250,																			// y position on the screen
            perspective: 120,																		// perspective of the image as it travels around the carousel
          	padding: 24, 																			// the number of padded items in between each icon.  
            																								// the more padding, the more precise the incremental movement,
            																								// however this also create a lot more calculations
            																								// to keep icons evenly spaced, the num of icons should be a multiple of the padding
            fadeEffect: 0,																			// fade icons as cycle to the back of the carousel
            textBox: 0																				//  1 = display text area for each icon, 0 = no display
        };
    
    })(jQuery);
    ////////////////////////////////////////////////////////////////

    Here is my full html code :
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>i CUBED webdesigners and consultants</title>
    <link href="../Testing Website stuff/Ajax pop up/thickbox[1].css" rel="stylesheet" type="text/css" />
    <link href="icubed.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery/jquery-latest.js"></script>
    <script type="text/javascript" src="jquery/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="jquery/Tween.js"></script>
    <script type="text/javascript" src="jquery/jquery.carousel3d.js"></script>
    <script type="text/javascript" src="jquery/thickbox.js"></script>
    <script src="SpryAccordion.js" type="text/javascript"></script>
    
    
    <link href="jquery/thickbox[1].css" rel="stylesheet" type="text/css"  media="screen"/>
    		
    	<style type="text/css" title="text/css" media="screen">
     		
     		#holder_images { display: none; }
    	#carouselText {
    	position:absolute;
    	left:150px;
    	top:50px;
    	width: 403px;
    	height: 300px;
    	padding: 3em;
    	font: 1em/1em Gill Sans,Verdana;
    	text-transform: uppercase;
    	text-align: center;
    	border: 2px solid #DDD;
    	color: #FFF;
    	background-color: #666;
    	display: none;
    	}
    	
    		#carousel img
    		{
    			border: 2px solid #ddd;
    			
    		}
    		#carousel img.link:hover
    		{
    			border: 4px solid #0e0893;
    		}
    		#carousel {
    	background-color:#FFFFFF;
    	position:absolute;
    	left:103px;
    	top:100px;
    	height:300px;
    	width:600px;
    	margin-top:6px;
    	
    	}
    	
    	#text
    	{
    	position:fixed;
    	left:10%;
    	top:50%;
    	width: 600px;
    	height: 300px;
    	padding: 3em;
    	font: 1em/1em Gill Sans,Verdana;
    	text-transform: uppercase;
    	text-align: center;
    	border: 2px solid #DDD;
    	color: #FFF;
    	background-color: #666;
    	display: none;
    	
    		}
    		
    		
      
    body {
    	background-color: #FFFFFF;
    	margin-top: 0cm;
    	background-image: url(background_test_image.jpg);
    	}
        .style7 {
    	font-family: "Trebuchet MS";
    	color: #FFFFFF;
    	font-size: small;
    }
        .style8 {color: #990000}
    	
    	.TB_overlayBG {
    	background-color:#000;
    	filter:alpha(opacity=75);
    	-moz-opacity: 0.75;
    	opacity: 0.75;
    }
    
    #TB_overlay {
    	position: fixed;
    	z-index:100;
    	top: 0px;
    	left: 0px;
    	height:100%;
    	width:100%;
    }
    
    #TB_window {
    	position: fixed;
    	background: #ffffff;
    	z-index: 102;
    	color:#000000;
    	display:none;
    	border: 4px solid #525252;
    	text-align:left;
    	top:50%;
    	left:50%;
    }
    
    .TB_overlayMacFFBGHack {background: url(../../../AppData/Local/Microsoft/Windows/Temporary%20Internet%20Files/Low/Content.IE5/Q8019XJ4/macFFBgHack.png) repeat;}
    .TB_overlayBG {
    	background-color:#000;
    	filter:alpha(opacity=75);
    	-moz-opacity: 0.75;
    	opacity: 0.75;
    }
    
    #TB_HideSelect{
    	z-index:99;
    	position:fixed;
    	top: 0;
    	left: 0;
    	background-color:#fff;
    	border:none;
    	filter:alpha(opacity=0);
    	-moz-opacity: 0;
    	opacity: 0;
    	height:100%;
    	width:100%;
    }
    
        </style>
     <script type="text/javascript">
    jQuery(function($) {
    		$("#carousel").html($("#holder_images").html()).carousel3d({ centerX: $('#carousel').offset().left + $('#carousel').width()/2 }); 
    		
    		});
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    </script>  
        
       <!-- <script type="text/javascript">
    		jQuery(function($) {
    			$("#carousel").html($("#holder_images").html()).carousel3d({control: 'mouse', textBox:1, centerX: $('#carousel').offset().left + $('#carousel').width()/2 }); 
    		});
    	</script> -->
    
    
       
    <link href="SpryAccordion.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style9 {
    	color: #FFFFFF;
    	font-family: "Trebuchet MS";
    }
    .style10 {font-size: large}
    -->
    </style>
    </head>
    
    
    <body class="oneColFixCtrHdr" onload="MM_preloadImages('home (2).png','world (2).png','smashing (2).png','vault (2).png','phonebook (2).png','images/color.jpg','images/3136589840_7c79fcd601.jpg','images/untitled.bmp')">
    <div class="oneColFixCtrHdr" id="topmost">
      <div align="center">
        <table width="1069" border="0">
          <tr>
            <td width="698" height="100"><img src="icubed_logo.jpg" width="700" height="100" /></td>
            <td width="54" class="style7">HOME |</td>
            <td width="87" class="style7">WEB DESIGN |</td>
            <td width="60" class="style7">SERVICES|</td>
            <td width="53" class="style7">PRICING|</td>
            <td width="91"><span class="style7">CONTACT US</span></td>
          </tr>
        </table>
      </div>
    </div>
    
    <center>
    </center>
    <div id="container"  align="center">
      <div id="header"> 
       
       <div id="carousel">	<img title="sinatra at the beach 1" src="images/3136589840_7c79fcd601.jpg" alt="imagine" width="500" height="375" /> 
    	 <!-- <img title="sinatra at the beach 2" src="images/color.jpg" alt="incorporate" width="500" height="375" /> 
    	  <a href="jquery/untitled.bmp" title="click on me" class="thickbox"><img title="sinatra at the beach 3" src="images/untitled.bmp" alt="inspire" width="500" height="375" /></a> --></div>
     <div id="text"></div>
    <div id="holder_images" align="middle">	
    		 
    	 <a href="images/3136589840_7c79fcd601.jpg" class="thickbox" ><img   title="sinatra at the beach 1" src="images/3136589840_7c79fcd601.jpg" alt="imagine" width="450" height="375" /> </a>
    	<img  title="sinatra at the beach 2" src="images/color.jpg" alt="incorporate" width="450" height="375" /> 
    	<img  title="sinatra at the beach 3" src="images/untitled.bmp" alt="inspire" width="450" height="375" /> 
            
    	 <!-- <img title="sinatra at the beach 4" src="images/sinatra_beach_4.jpg" alt="sinatra_beach_4" width="350" height="275"/> 
    	  <img title="sinatra at the beach 5" src="images/sinatra_beach_5.jpg" alt="sinatra_beach_5" width="350" height="275" /> 
    	  <img title="sinatra at the beach 6" src="images/sinatra_beach_6.jpg" alt="sinatra_beach_6" width="350" height="275"/> 
    		<img title="sinatra at the beach 7" src="images/sinatra_beach_7.jpg" alt="sinatra_beach_7" width="500" height="375" /> 
    		<img title="sinatra at the beach 8" src="images/sinatra_beach_8.jpg" alt="sinatra_beach_8" width="500" height="375" /> -->
    	</div>
        <div id="carouselText">
    		<span>
            <img src="images/v.jpg"  width="600" height="300"/></span>
    		<span>customize this information for image 1</span>
    		<span>customize this information for image 2</span>
    		<span>customize this information for image 3</span>
    		<span>customize this information for image 4</span>
    		<span>customize this information for image 5</span>
    		<span>customize this information for image 6</span>
    		<span>customize this information for image 7</span>
    		<span>customize this information for image 8</span>
    	</div>
      <div align="right">
        <!-- end #header -->
      </div>
      </div>
      <div id="mainContent">
        <div align="center"><br />
        <br />
        <span class="style7 style10">What we offer</span><br />
          <br />
            
            <table width="711" height="86" border="0">
              <tr>
                <td><a href="home.png" class="thickbox"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','home (2).png',1)"><img src="home.png" alt="HOME" name="Image10" width="128" height="128" border="0" id="Image10" /></a></td>
                <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','world (2).png',1)"><img src="world.png" alt="WEBSITE DESIGN" name="Image11" width="128" height="128" border="0" id="Image11" /></a></td>
                <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','smashing (2).png',1)"><img src="smashing.png" alt="SERVICES" name="Image12" width="128" height="128" border="0" id="Image12" /></a></td>
                <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','vault (2).png',1)"><img src="vault.png" alt="PRICING" name="Image13" width="128" height="128" border="0" id="Image13" /></a></td>
                <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','phonebook (2).png',1)"><img src="phonebook.png" alt="CONTACT US" name="Image14" width="128" height="128" border="0" id="Image14" /></a></td>
              </tr>
            </table>
            <p>&nbsp;</p>
          <p align="left">&nbsp;</p>
            
            <div align="center">
                <ol>
              </ol>
              <div id="Accordion1" class="Accordion" tabindex="0" align="center">
                <div class="AccordionPanel">
                    <div class="AccordionPanelTab style9">Web Design</div>
                  <div class="AccordionPanelContent">Content 1</div>
                  </div>
                  <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Website Redesign</div>
                    <div class="AccordionPanelContent">Content 2</div>
                  </div>
                  <div class="AccordionPanel">
                    <div class="AccordionPanelTab">SEO Submission</div>
                    <div class="AccordionPanelContent">Content 3</div>
                  </div>
                  <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Graphic Design</div>
                    <div class="AccordionPanelContent">Content 4</div>
                  </div>
              </div><!-- end of accordian -->
            </div>
            <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
        </div>
       
      </div>
      <div id="footer">
        <div align="center" class="style7 style8">
          <p> 2002 - 09, Copyright - i cubbe webdesigners and consultants.cc All Rights Reserved 
            
            Have any complaints / suggestions ? Drop all here .. we would love to listen  
          Ventures: InfyWeb | InfyTemplates | InfyLogo | InfyScript | Esolz Academy | InfyHire</p>
          <p>&nbsp;</p>
        </div>
      <!-- end #footer --></div>
    <!-- end #container -->
    </div>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo