CREATE TABLE IF NOT EXISTS `records` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `message` text NOT NULL,
  `image` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `records`
--

INSERT INTO `records` (`id`, `message`, `image`) VALUES
(1, 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s,', '1.png'),
(2, 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don''t look even slightly believable.', '2.png');

$(document).ready(function(){

	function showLoader(){

		$('.search-background').fadeIn(200);
	}

	function hideLoader(){

		$('.search-background').fadeOut(200);
	};

	$("#paging_button li").click(function(){

		showLoader();

		$("#paging_button li").css({'background-color' : ''});
		$(this).css({'background-color' : '#006699'});

		$("#content").load("data.php?page=" + this.id, hideLoader);

		return false;
	});

	$("#1").css({'background-color' : '#006699'});
	showLoader();
	$("#content").load("data.php?page=1", hideLoader);

});

<div>

<div id="container">

<div class="search-background">
			<label><img src="loader.gif" alt="" /></label></div>
</div>

<div id="paging_button">

<ul>
		'.$i.'

';
		}?&gt;
</ul>
</div>
</div>

$(document).ready(function() {

	var Arrays=new Array();

	$('.add-to-cart-button').click(function(){

		var thisID 	  = $(this).parent().parent().attr('id').replace('detail-','');

		var itemname  = $(this).parent().find('.item_name').html();
		var itemprice = $(this).parent().find('.price').html();

		if(include(Arrays,thisID))
		{
			var price 	 = $('#each-'+thisID).children(".shopp-price").find('em').html();
			var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
			quantity = parseInt(quantity)+parseInt(1);

			var total = parseInt(itemprice)*parseInt(quantity);

			$('#each-'+thisID).children(".shopp-price").find('em').html(total);
			$('#each-'+thisID).children(".shopp-quantity").html(quantity);

			var prev_charges = $('.cart-total span').html();
			prev_charges = parseInt(prev_charges)-parseInt(price);

			prev_charges = parseInt(prev_charges)+parseInt(total);
			$('.cart-total span').html(prev_charges);

			$('#total-hidden-charges').val(prev_charges);
		}
		else
		{
			Arrays.push(thisID);

			var prev_charges = $('.cart-total span').html();
			prev_charges = parseInt(prev_charges)+parseInt(itemprice);

			$('.cart-total span').html(prev_charges);
			$('#total-hidden-charges').val(prev_charges);

			var Height = $('#cart_wrapper').height();
			$('#cart_wrapper').css({height:Height+parseInt(45)});

			$('#cart_wrapper .cart-info').append('
<div id="each-'+thisID+'">
<div>'+itemname+'</div>
<div> $<em>'+itemprice+'</em></div>
<span>1</span><img src="remove.png" alt="" /><br /></div>
');

		}

	});	

	$('.remove').livequery('click', function() {

		var deduct = $(this).parent().children(".shopp-price").find('em').html();
		var prev_charges = $('.cart-total span').html();

		var thisID = $(this).parent().attr('id').replace('each-','');

		var pos = getpos(Arrays,thisID);
		Arrays.splice(pos,1,"0")

		prev_charges = parseInt(prev_charges)-parseInt(deduct);
		$('.cart-total span').html(prev_charges);
		$('#total-hidden-charges').val(prev_charges);
		$(this).parent().remove();

	});	

	$('#Submit').livequery('click', function() {

		var totalCharge = $('#total-hidden-charges').val();

		$('#cart_wrapper').html('Total Charges: $'+totalCharge);

		return false;

	});	

function include(arr, obj) {
  for(var i=0; i

[ad#co-4]
<h2>HTML</h2>
<pre lang="php">
<div style="min-height: 800px;">
<div id="cart_wrapper">
<form id="cart_form" action="#">
<div class="cart-total">

				<strong>Total Charges:          </strong> $<span>0</span>
<input id="total-hidden-charges" name="total-hidden-charges" type="hidden" value="0" /></div>
<button id="Submit">CheckOut</button>
</form></div>
<div id="wrap">

		<a id="show_cart" href="javascript:void(0)">View Cart</a>
<ul>
	<li id="1">
				<img class="items" src="product_img/1.jpg" alt="" height="100" />
<div>Red Grocery Bag</div></li>
	<li id="2">
				<img class="items" src="product_img/2.jpg" alt="" height="100" />
<div>Reusable Grocery Bag</div></li>
	<li id="3">
				<img class="items" src="product_img/3.jpg" alt="" height="100" />
<div>White Grocery Bag</div></li>
	<li id="4">
				<img class="items" src="product_img/4.jpg" alt="" height="100" />
<div>Yellow Grocery Bag</div></li>
<!-- Detail Boxes for above four li -->
<div id="detail-1" class="detail-view">
<div class="close">
					<a href="javascript:void(0)">x</a></div>
<img class="detail_images" src="product_img/1.jpg" alt="" width="340" height="310" />
<div class="detail_info">

					<label class="item_name">Red Grocery Bag</label>

						shopping bag, shopping, bag, merchandise, consumerism, gift:

						$<span class="price">80.00</span>

					<button class="add-to-cart-button">Add to Cart</button></div>
</div>
<div id="detail-2" class="detail-view">
<div class="close">
					<a href="javascript:void(0)">x</a></div>
<img class="detail_images" src="product_img/2.jpg" alt="" width="340" height="310" />
<div class="detail_info">

					<label class="item_name">Reusable Grocery Bag</label>

						shopping bag, shopping, bag, merchandise, consumerism, gift:

						$<span class="price">70.00</span>

					<button class="add-to-cart-button">Add to Cart</button></div>
</div>
<div id="detail-3" class="detail-view">
<div class="close">
					<a href="javascript:void(0)">x</a></div>
<img class="detail_images" src="product_img/3.jpg" alt="" width="340" height="310" />
<div class="detail_info">

					<label class="item_name">White Grocery Bag</label>

						shopping bag, shopping, bag, merchandise, consumerism, gift:

						$<span class="price">50.00</span>

					<button class="add-to-cart-button">Add to Cart</button></div>
</div>
<div id="detail-4" class="detail-view">
<div class="close">
					<a href="javascript:void(0)">x</a></div>
<img class="detail_images" src="product_img/4.jpg" alt="" width="340" height="310" />
<div class="detail_info">

					<label class="item_name">Yellow Grocery Bag</label>

						shopping bag, shopping, bag, merchandise, consumerism, gift:

						$<span class="price">90.00</span>

					<button class="add-to-cart-button">Add to Cart</button></div>
</div></ul>
</div>
</div>

html, body{
	margin:0;
	padding:0;
	border:0;
	outline:0;
}

#wrap{ width:100%; min-height:900px; top:0px; position:relative; bottom:0px; }
#wrap ul{ margin:0px; padding:0px; width: 700px;text-align:center;  }

#wrap .detail-view {
   /* background: none repeat scroll 0 0 #F3F4EE;*/
    border: 1px solid #E2E2E2;
    border-top: 1px solid #E2E2E2;
    left: 0;
	height:380px;
    overflow: hidden;
	clear:both;
	display:none;
	margin-left:13px;
	margin-bottom:15px;
    width: 96%;
}

#wrap .detail-view .close{ text-align:right; width:98%; margin:5px; }
#wrap .close a{ padding:6px; height:10px; width:20px; color:#525049; }
#wrap .detail-view .detail_images{ float:left}

#wrap .detail-view .detail_info{
	float:right;
	font-family: "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
	color:#525049;
	margin-right:20px;
	margin-top:30px;
	text-align:justify;
	width:250px;
	font-size:12px;
}

#wrap .detail-view .detail_info label{ font-size:12px;text-transform:uppercase; letter-spacing:1px; line-height:60px;} 

#wrap .detail-view .detail_info p{ height:110px;}

a#show_cart{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E8E7DC;
    cursor: pointer;
	display:block;
    display: inline-block;
    font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
    letter-spacing: 2px;
    color:#525049;
	padding:8px;
	text-decoration:none;

    text-transform: uppercase;
}
.add-to-cart-button{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E8E7DC;
    cursor: pointer;
    display: inline-block;
    font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
    letter-spacing: 2px;
    padding-top: 10px;color:#525049;
	margin-top:15px;
    text-transform: uppercase;
}

.add-to-cart-button:hover {
    background: none repeat scroll 0 0 #F8F8F3;
}

.shopp{background: none repeat scroll 0 0 #F8F8F3;}

#wrap ul li{

	list-style-type:none;
	height:146px;
	width:160px;
	margin-left:10px;
	margin-bottom:15px;
	float:left;
	padding:15px 0px 0px 0px;
	font-family:"LubalGraphBdBTBold",Tahoma;
	font-size:2em;
	border:solid #fff 1px;
	overflow:hidden;
}

.footer{ height:400px; background:#E2E2E2} 

#wrap ul li:hover{ border:solid #f3f4ee 1px; }

#wrap ul li div{ 

	height:31px;
	text-align:center;
	width:160px;
	margin-top:10px;
	position:relative;
	bottom:0px;
	padding-top:6px;
	padding-bottom:4px;
	background:#f3f4ee ;
	font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
	opacity:0.8;
	color: #525049 ;
	text-shadow: 0px 2px 3px #555;
}

img#cart{bottom:0px;position:fixed; margin-left:30px; /* keep the bar on top  */}

#wrap ul li { cursor:pointer;}

#cart_wrapper {
	border:solid #E8E7DC 1px;
	min-height:120px;
	width:100%;
	padding-top:15px;
	display:none;
    background:#E2E2E2;
	font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;

	position:relative
}

#Submit {
  height: 78px;
  float:left;
}

.closeCart{ cursor:pointer;}

button {
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E8E7DC;
	width:140px;
    cursor: pointer;
    display: inline-block;
    font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
    letter-spacing: 2px;
    padding-top: 12px;color:#525049;
	margin-top:1px;
	border:solid #ccc 1px; padding:8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	margin-left:20px;
    text-transform: uppercase;
}

button:hover {
    background: none repeat scroll 0 0 #F8F8F3;
}

.cart-total{background: none repeat scroll 0 0 #F8F8F3;}

.shopp,.cart-total{
	border:solid #E8E7DC 1px; padding:8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px; font-size:12px;
	background:url(remove.png) center right no-repeat 5px;
	border-radius: 8px;
	font-family:"LubalGraphBdBTBold",Tahoma;
	margin-top:3px;
	width:320px;
	float:left;
	}

#cart_form{ width:570px; padding-left:15px;}

div.shopp span{ float:left;}
div.shopp div.label{ width:130px; float:left; }
div.shopp div.shopp-price{ width:70px; float:left;}
.quantity{ float:left; margin-top:-3px; width:20px;}

img.remove{float:right;cursor:pointer;}
.cart-total b{width:130px;}

$(document).ready(function() { 

 // refresh captcha
 $('img#captcha-refresh').click(function() {  

		change_captcha();
 });

 function change_captcha()
 {
	document.getElementById('captcha').src="get_captcha.php?rnd=" + Math.random();
 }

});

<!-- Captcha HTML Code -->

	<div id="captcha-wrap">
		<div class="captcha-box">
			<img src="get_captcha.php" alt="" id="captcha" />
		</div>
		<div class="text-box">
			<label>Type the two words:</label>
			<input name="captcha-code" type="text" id="captcha-code">
		</div>
		<div class="captcha-action">
			<img src="refresh.jpg"  alt="" id="captcha-refresh" />
		</div>
	</div>

	<!--  Copy and Paste above html in any form and include CSS, get_captcha.php files to show the captcha  -->

/* 
Recaptcha Style Captcha 
=======================
 re-Captcha Style Captcha with php and jQuery 

 Created By: Zeeshan Rasool 
 URL : http://www.99Points.info 

 Get JQuery, PHP, AJAX, Codeigniter and MYSQL Tutorials and Demos on Blog
 */

#captcha-wrap{
	border:solid #870500 1px;
	width:270px;
	-webkit-border-radius: 10px;
	float:left;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background:#870500;
	text-align:left;
	padding:3px;
	margin-top:3px;
	height:100px;
	margin-left:80px;
}
#captcha-wrap .captcha-box{
	-webkit-border-radius: 7px;
	background:#fff;
	-moz-border-radius: 7px;
	border-radius: 7px;
	text-align:center;
	border:solid #fff 1px;
}
#captcha-wrap .text-box{
	-webkit-border-radius: 7px;
	background:#ffdc73;
	-moz-border-radius: 7px;
	width:140px;
	height:43px;
	float:left;
	margin:4px;
	border-radius: 7px;
	text-align:center;
	border:solid #ffdc73 1px;
}

#captcha-wrap .text-box input{ width:120px;}
#captcha-wrap .text-box label{
	 color:#000000;
	 font-family: helvetica,sans-serif;
	 font-size:12px;	
	 width:150px;
	 padding-top:3px; 
	 padding-bottom:3px; 
}
#captcha-wrap .captcha-action{
	float:right; width:117px; 
	background:url(logos.jpg) top right no-repeat; 
	height:44px; margin-top:3px;
}
#captcha-wrap  img#captcha-refresh{
	margin-top:9px;
	border:solid #333333 1px;
	margin-right:6px;
	cursor:pointer;
}