Tuesday, January 15, 2013

jquery slider image show one by one end of show then all thumbain image blank


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
<script language="javascript">

$(document).ready(function() {
     $('#s5').cycle({     fx:     'scrollLeft',     timeout: 5000,     before:  onBefore,     after:   onAfter  });

});

function onBefore(){
$('#imgcontainer img').each(function () {
                $(this).css('opacity', '0.5');
            });
$('#imgcontainer').append("<img src="+this.src+" />");

}
function onAfter()
{
  if (this.id=='5')
  {
     $('#s5').cycle('stop');
$('#imgcontainer').html('');

  }
}
</script>
</script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
.display { width:300px; height:200px; border: 2px solid #000; }
.js .display { display:none; }
</style>
</head>
<body>



<div class="slideshow" id="s5">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg"  id="1" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"  id="2" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg"  id="3" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg"  id="4" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg"  id="5" width="200" height="200" />
</div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div style="clear:both;" </div>
    <div id="imgcontainer">
     
    </div>


</body>
</html>

Sunday, January 13, 2013

php mysql ghraph chart example

PHPGraphLib Tutorial #2: MYSQL and PHPGraphLib

Overview

 

In this example, we are going to show a simple example of how to use PHPGraphLib with MYSQL.

Include the source file in a new script and create the PHPGraphLib Object

Include the source PHPGraphLib class file at the top of your stand alone php script. This script will only include the PHP calls to create your graph. Next, create a PHPGraphLib object.





<?php
include("phpgraphlib.php");
$graph=new PHPGraphLib(550,350);

Add data from MYSQL

We are going to query our database, add that data to an array, and then pass that information to PHPGraphLib. The sales count will be used as y-axis values, and the sales group name will be used as the x -axis values. See http://www.php.net/mysql for more information on how to connect to your MYSQL server with PHP. You will need to change the system dependent variables, such as username, password, database, and table name when using this example.



$link = mysql_connect('localhost''username''password')
or die('Could not connect: ' . mysql_error());     
mysql_select_db('salestracking'or die('Could not select database');
$dataArray=array(); 
//get data from database
$sql="SELECT salesgroup, COUNT(*) AS 'count' FROM sales GROUP BY salesgroup";
$result = mysql_query($sqlor die('Query failed: ' . mysql_error());
if ($result) {
  while ($row = mysql_fetch_assoc($result)) {
      $salesgroup=$row["salesgroup"];
      $count=$row["count"];
      //add to data areray
      $dataArray[$salesgroup]=$count;
  }
}
//configure graph
$graph->addData($dataArray);
$graph->setTitle("Sales by Group");
$graph->setGradient("lime""green");
$graph->setBarOutlineColor("black");
$graph->createGraph();
?>

Include the created script as the src of an image on the desired page

On the page you want the graph to appear, create an HTML image tag and set the src="" to the location of the script you created above.


<html>
<h3>This is where I want to display my graph</h3>
<img src="mysql_graph_bar.php" />
</html>

Here is the graph you just created:
For other examples, view the Examples page