arbo77/data.php

## data.php
<?php

header("content-type: text/plain");

for($i=0;$i<=5;$i++){
 $items[] = array(
  "title"=>"Simple Title #$i",
  "image"=>"http://www.geetarz.org/reviews/clapton/dance-of-the-bell.jpg",
  "description"=>"Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                  nisi ut aliquip ex ea commodo consequat.");
}

echo json_encode($items);

?>

## demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Jquery SlideBox</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link href="ui.css" rel="stylesheet" type="text/plain" />
  <script src="jquery-1.7.1.min.js"></script>
  <script src="jqslidebox.js"></script>
  <script>
  $().ready(function(){
    $(".products").slideboxes({"data":"data.php","class":{"main":"product","sub":"mask"}});
  });

  </script>
</head>
<body>
  <div class="products"></div>
</body>

</html>

## jqslidebox.js
(function( $ ) {
  $.fn.slidebox = function(box) {
    $(this).hover(function(){
      $(this).find(box).fadeIn();
    },function(){
      $(this).find(box).hide();
    });
  },

  $.fn.slideboxes = function(opt) {
    var me = this;
    function init(){
      if(!jQuery.isArray(opt.data)){
        $.get(opt.data,function(resp){
          var items = jQuery.parseJSON(resp);
          show(items);
        });
      }else{
        show(opt.data);
      }
    };

    function show(items){
      for(var i=0;i<items.length;i++){
        var html = '<div class="'+opt.class.main+'">';
        html += '<img src="'+items[i].image+'"/>';
        html += '<div class="'+opt.class.sub+'"><div>';
        html += '<h3>'+items[i].title+'</h3>';
        html += '<p>'+items[i].description+'</p>';
        html += '</div></div></div>';
        $(me).append(html);
      }
      $("."+opt.class.main).slidebox("."+opt.class.sub);
    }
    init();

  }

})( jQuery );

## ui.css
body{
  margin: 20px 0;
  font-family: sans-serif;
  font-size: 10pt;
}

.products{
  width: 915px;
  margin: 0 auto;
}

.product{
  width: 285px;
  height: 289px;
  position: relative;
  overflow: hidden;
  float: left;
  margin: 10px;
}

.product .mask{
  text-align: center;
  display:none;
  width: 285px;
  height: 289px;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background: rgba(0,0,0,.75);
}

.product .mask div{
  padding: 10px;
}
	<?php

	header("content-type: text/plain");

	for($i=0;$i<=5;$i++){
	$items[] = array(
	"title"=>"Simple Title #$i",
	"image"=>"http://www.geetarz.org/reviews/clapton/dance-of-the-bell.jpg",
	"description"=>"Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
	nisi ut aliquip ex ea commodo consequat.");
	}

	echo json_encode($items);

	?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>
	<title>Jquery SlideBox</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link href="ui.css" rel="stylesheet" type="text/plain" />
	<script src="jquery-1.7.1.min.js"></script>
	<script src="jqslidebox.js"></script>
	<script>
	$().ready(function(){
	$(".products").slideboxes({"data":"data.php","class":{"main":"product","sub":"mask"}});
	});

	</script>
	</head>
	<body>
	<div class="products"></div>
	</body>

	</html>
	(function( $ ) {
	$.fn.slidebox = function(box) {
	$(this).hover(function(){
	$(this).find(box).fadeIn();
	},function(){
	$(this).find(box).hide();
	});
	},

	$.fn.slideboxes = function(opt) {
	var me = this;
	function init(){
	if(!jQuery.isArray(opt.data)){
	$.get(opt.data,function(resp){
	var items = jQuery.parseJSON(resp);
	show(items);
	});
	}else{
	show(opt.data);
	}
	};

	function show(items){
	for(var i=0;i<items.length;i++){
	var html = '<div class="'+opt.class.main+'">';
	html += '<img src="'+items[i].image+'"/>';
	html += '<div class="'+opt.class.sub+'"><div>';
	html += '<h3>'+items[i].title+'</h3>';
	html += '<p>'+items[i].description+'</p>';
	html += '</div></div></div>';
	$(me).append(html);
	}
	$("."+opt.class.main).slidebox("."+opt.class.sub);
	}
	init();

	}

	})( jQuery );
	body{
	margin: 20px 0;
	font-family: sans-serif;
	font-size: 10pt;
	}

	.products{
	width: 915px;
	margin: 0 auto;
	}

	.product{
	width: 285px;
	height: 289px;
	position: relative;
	overflow: hidden;
	float: left;
	margin: 10px;
	}

	.product .mask{
	text-align: center;
	display:none;
	width: 285px;
	height: 289px;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	background: rgba(0,0,0,.75);
	}

	.product .mask div{
	padding: 10px;
	}