Archive for พฤษภาคม, 2008

JonDesign’s SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website…

Some of you might have heard of JonDesign’s SmoothSlideshow. SmoothGallery is its evolution.
So, what is so cool about it ?

How to use


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Slide Show</title>
	<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="jd.gallery.css" type="text/css" media="screen" />
	<script src="mootools.v1.11.js" type="text/javascript"></script>
	<script src="jd.gallery.js" type="text/javascript"></script>
</head>
<body bgcolor="#FFFFFF">
	<script type="text/javascript">
		function startGallery() {
			var myGallery = new gallery($('myGallery'), {
				timed: true
			});
		}
		window.addEvent('domready',startGallery);
	</script>
	<div class="content">
		<div id="myGallery" class="white_content">

						<div class="imageElement">
				<font></font>
				<p>Llama Graze Where Potatoes Once Grew</p>
				<a href="#" title="open image" class="open"></a>
				<img src="post_photo/img_b.jpg" class="full" />
				<img src="tump.php?filedir=post_photo/img_b.jpg" class="thumbnail" />
			</div>
							<div class="imageElement">
				<font></font>

				<p>Timeless View</p>
				<a href="#" title="open image" class="open"></a>
				<img src="post_photo/img_1.jpg" class="full" />
				<img src="tump.php?filedir=post_photo/img_1.jpg" class="thumbnail" />
			</div>
						<div class="imageElement">
				<font></font>
				<p>Windows</p>

				<a href="#" title="open image" class="open"></a>
				<img src="post_photo/img_e.jpg" class="full" />
				<img src="tump.php?filedir=post_photo/img_e.jpg" class="thumbnail" />
			</div>
	   </div>
	</div>
</body>
</html>

http://smoothgallery.jondesign.net
Read the rest of this entry »

SyntaxHighlighter

SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server.

This script i use to highlight all code in my blog

http://code.google.com/p/syntaxhighlighter/

How to use


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>dp.SyntaxHighlighter Tests</title>
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>
<link href="Styles/TestPages.css" rel="stylesheet" type="text/css">
</head>
<body>
<textarea name="code" class="php" rows="15" cols="70">
<?php

echo "Hello World";

?>
</textarea>

<script class="javascript" src="Scripts/shCore.js"></script>
<script class="javascript" src="Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="Scripts/shBrushPhp.js"></script>
<script class="javascript" src="Scripts/shBrushJScript.js"></script>
<script class="javascript" src="Scripts/shBrushJava.js"></script>
<script class="javascript" src="Scripts/shBrushVb.js"></script>
<script class="javascript" src="Scripts/shBrushSql.js"></script>
<script class="javascript" src="Scripts/shBrushXml.js"></script>
<script class="javascript" src="Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="Scripts/shBrushPython.js"></script>
<script class="javascript" src="Scripts/shBrushRuby.js"></script>
<script class="javascript" src="Scripts/shBrushCss.js"></script>
<script class="javascript" src="Scripts/shBrushCpp.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>

Ajax Flash Chart

?

Open Flash Chart, is open source. It is free to use and you get the source code to fiddle with!

http://teethgrinder.co.uk/open-flash-chart

Sample code

chart page


<SCRIPT LANGUAGE="JavaScript">
<!--
	function reload_compare()
{
  tmp = findSWF("chart");
    x = tmp.reload();
   x = tmp.reload("chat_data.php");
  x = tmp.reload("chat_data.php", false);
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
	return window["ie_" + movieName];
  } else {
        return document[movieName];
  }
}

//–>
</SCRIPT>
 <BODY>
<?php
require_once 'lib/open_flash_chart_object.php';
require_once  'lib/open-flash-chart.php';
open_flash_chart_object(500,300,'chart_data.php',false,'lib/');
?>
<br>
<br>
<INPUT TYPE="button" onClick="reload_compare();" value="โหลดข้อมูลใหม่">
</object>
 </BODY>
?>

data page


<?php
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");

include_once( 'lib/open-flash-chart.php' );
srand((double)microtime()*1000000);

$bar_red = new bar_3d( 75, '#D54C78' );
$bar_red->key( '2006', 10 );

// add random height bars:
for( $i=0; $i<10; $i++ )
  $bar_red->data[] = rand(2,5);

//
// create a 2nd set of bars:
//
$bar_blue = new bar_3d( 75, '#3334AD' );
$bar_blue->key( '2007', 10 );

// add random height bars:
for( $i=0; $i<10; $i++ )
  $bar_blue->data[] = rand(5,9);

// create the graph object:
$g = new graph();
$g->title( '3D Bar Chart', '{font-size:20px; color: #FFFFFF; margin: 5px;}' );

//$g->set_data( $data_1 );
//$g->bar_3D( 75, '#D54C78', '2006', 10 );

//$g->set_data( $data_2 );
//$g->bar_3D( 75, '#3334AD', '2007', 10 );

$g->data_sets[] = $bar_red;
$g->data_sets[] = $bar_blue;

$g->set_x_axis_3d( 12 );
$g->x_axis_colour( '#909090', '#ADB5C7' );
$g->y_axis_colour( '#909090', '#ADB5C7' );

$g->set_x_labels(array( 'Jan','Feb','Mar','April','May','June','July','Aug'
,'Sep','Oct'));
$g->set_y_max( 10 );
$g->y_label_steps( 5 );
$g->bg_colour = '#FFFF99';
$g->set_inner_background( '#E3F0FD', '#CBD7E6', 90 );
$g->set_y_legend( 'Open Flash Chart', 12, '#736AFF' );
echo $g->render();
?>

sample code


 <div id="playerContainer"></div>
   <SCRIPT LANGUAGE="JavaScript">
   <!--

	$("#playerContainer").flashembed({
      src:'flash/FlowPlayerDark.swf',
      width:300,
      height:300
    },
    {config: {
	  controlsOverVideo: 'ease',
	  showMenu:false,
	  showVolumeSlider:true,
      autoPlay: false,
	  autoRewind:true,
	  loop:false,
	  initialScale:'scale',
	  usePlayOverlay:true,
      videoFile: 'mov/bat.flv',
      initialScale: 'scale',
	  autoBuffering: false,
	  useNativeFullScreen: true,
	  emailPostUrl: false,
	  controlBarBackgroundColor: '0x222222',
	  useHwScaling:true
    }}
  );
   //-->
   </SCRIPT>

FlowPlayer is a Flash media player. You can use it on your HTML pages to play video files. “It is your personal YouTube”.

Support for multiple media
video: FLV, MP4, H.264
image: JPG and PNG
audio: MP3

Other formats such as mpg, mov, avi and wmv are also supported but they must first be converted to FLV, MP4 or H.264. H.263 offers best video quality with smallest filesize.
Flexible configuration
FlowPlayer has tons of configuration options. You can immediately start with the defaults and start tweaking with the options.
Full screen mode
Hardware accelerated full-screen mode without maximized browser windows. You can also make you own in-window fullscreens with scripting if you like. It leverages DirectX on Windows and OpenGL on OSX. Faster and smoother.
Progressive download
The simplest way to provide Flash video to your users. This is how YouTube does it.

Playlists
Control several videos in one player instance. Or combine multiple videos as one stream with the help of a streaming server. You can also include images in playlists or you can build playlist with HTML - see example.
Streaming
FlowPlayer supports streaming servers like the Flash Media Server, Wowza and Red5, allowing random seeking to arbitrary positions in the video timeline.
Scripting API
Control the player with JavaScript and from other Flash movies.
Thumbnails
Provide quick access to specific chapters in a long lasting movie.
Protection against hotlinking
Protection against hotlinking or direct linking of video and image files.

http://flowplayer.org/index.html

Multi File upload forms

see demo click here

2008-01-08_011230.jpg

Most file upload forms suck. It?s not just the lack of design, but also the unintuitive and inflexible interface. There is usually a single file upload field, where you need to select and upload files one at a time. If your connection is slow and you have a bunch of files to upload, it will soon start to be irritating. Hotmail does it that way.

The slightly better approach is to have a list of file upload fields, so you can select the files at once, and be done with it. This method is sometimes assisted by a button to add more fields if you would need that.

But that is so far from what we are used to from the desktop applications. The text that can fit in the file upload field is not a very good representation of the actual file. (Normally something like ?C:\Documents and Setti??) And there?s just too many buttons.

http://www.topmost.se/personal/articles/file-upload-forms-that-don-t-suck.htm

how to use


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>wwIconified test page</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="wwiconified.js"></script>
    <link rel="stylesheet" href="wwiconified.css" media="screen" />
    <style type="text/css">
      img{
        float: none;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="Main">

      <form action="somefile.php" method="get" enctype="multipart/form-data">
        <h3>Files to upload</h3>
        <p>
          <input class="wwIconified" type="file" name="d[]" />
        </p>
      </form>

    </div>
  </body>
</html>

ฟังเพลง Mp3

Audio player for MP3 file, intended for the diffusion on websites.

It?s an audio player for MP3 file, intended for the diffusion on websites.
It?s open source, free and customizable.

sample code


<object type="application/x-shockwave-flash" data="player_mp3_multi.swf" >
	<param name="movie" value="player_mp3_multi.swf" />
	<param name="wmode" value="transparent" />
	<param name="FlashVars" value="configxml=configxml_multi.xml" />
</object>

config file


<?xml version="1.0" encoding="UTF-8"?>
<config>
	<param name="mp3" value="try.mp3|img_T1211390787_2.mp3" />
	<param name="title" value="img_T1211390787_2.mp3"/>
	<param name="height" value="150" />
	<param name="width" value="250" />
	<param name="bgcolor" value="cccc99" />
	<param name="bgcolor1" value="e79a2d" />
	<param name="bgcolor2" value="d38c29" />
	<param name="buttoncolor" value="dddddd" />
	<param name="buttonovercolor" value="f9bf37" />
	<param name="slidercolor1" value="dddddd" />
	<param name="slidercolor2" value="cccccc" />
	<param name="sliderovercolor" value="f9bf37" />
	<param name="textcolor" value="dddddd" />
	<param name="playlistcolor" value="999999" />
	<param name="currentmp3color" value="f9bf37" />
	<param name="scrollbarcolor" value="cccccc" />
	<param name="scrollbarovercolor" value="f9bf37" />
	<param name="showvolume" value="1" />
	<param name="showinfo" value="1" />
</config>

http://flash-mp3-player.net/

Time

Mp3

Msn status

  • manon2029@hotmail.com is

Chat with Meeh

Donate

    If you find an article useful, then please make a donation.

หมวดหมู่

UserOnline

Counter

  • Visitors today: 36
  • Visitors yesterday: 83
  • Visitors per day: 799
  • Max. visitors per day: 255
  • Total page views: 166,318
  • Page views of this page: 799
  • Currently online: 1
  • Max. online: 36
  • Total visitors: 35,955
  • counterStatistics