I can sound foolish being a developer I never read about firebug api, used firebug addon for best of my development practices.

In the api there is an api function for firebug,

1
2
3
4
5
6
7
8

// detect if firebug is open


if (window.console || window.console.firebug) {
console.clear(); // clear the console

}

You can use this after every ajax call example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// create a function


function clearConsole()

{

if (window.console || window.console.firebug) {
console.clear(); // clear the console

}

}

jQuery.ajax({
type: "GET",// can be GET OR POST

url: urlx,
cache: false,
error: function()
{
alert('error try again!!'); // show error or whatever

clearConsole();// call the function

},
success: function(html)
{
clearConsole();
//--- you code----

}
}
});

as you can see the function has been called on error as well as on success, since you would need to hide the call even when there is an error.
Creating a function would make it easy for you to comments the things at the time of development.
Try At Js Fiddle

Her is a small trick to enable back word compatibility from IE9 to IE7.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

you can replace  the “EmulateIE[version]“

usage

<!-- if you want ie8 to work as ie7, you ca replace the versions as per you needs. -->

<!--[if IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
<!--if you want to enforce ie9 to be as ie8-->
<!--[if IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<![endif]-->

hope it helps you guys. but i hate microsoft..

We all know Charlie Chaplin, the COMEDIAN, who has always made us laugh so hard even without saying a thing, his face expressions were enough.
I never thought that such a touching-speech can be well told by a comedian, NEVER!

So, i’ll leave you with the speech, and the subtitles are below the video here in the post.
I almost forgot! the video has 2 copies, one copy just ripped off the movie “The Great Dictator” where you can see his AMAZING facial expressions, and the other copy which is a fan-made video with images & videos relating the topics in the speech to our lives.

The movie copy

The fan-made copy

The Subtitles

I’m sorry, but I don’t want to be an emperor. That’s not my business. I don’t want to rule or conquer anyone. I should like to help everyone if possible; Jew, Gentile, black man, white.
We all want to help one another. Human beings are like that. We want to live by each other’s happiness, not by each other’s misery. We don’t want to hate and despise one another. In this world there is room for everyone, and the good earth is rich and can provide for everyone. The way of life can be free and beautiful, but we have lost the way.

Greed has poisoned men’s souls, has barricaded the world with hate, has goose-stepped us into misery and bloodshed. We have developed speed, but we have shut ourselves in. Machinery that gives abundance has left us in want. Our knowledge has made us cynical; our cleverness, hard and unkind.
We think too much and feel too little. More than machinery, we need humanity. More than cleverness, we need kindness and gentleness.
Without these qualities, life will be violent and all will be lost.

The airplane and the radio have brought us closer together. The very nature of these inventions cries out for the goodness in men; cries out for universal brotherhood; for the unity of us all.
Even now my voice is reaching millions throughout the world, millions of despairing men, women, and little children, victims of a system that makes men torture and imprison innocent people.

To those who can hear me, I say, do not despair. The misery that is now upon us is but the passing of greed, the bitterness of men who fear the way of human progress. The hate of men will pass, and dictators die, and the power they took from the people will return to the people.
And so long as men die, liberty will never perish.

Soldiers! Don’t give yourselves to brutes, men who despise you, enslave you; who regiment your lives, tell you what to do, what to think and what to feel! Who drill you, diet you, treat you like cattle, use you as cannon fodder.
Don’t give yourselves to these unnatural men – machine men with machine minds and machine hearts! You are not machines, you are not cattle, you are men!
You have the love of humanity in your hearts! You don’t hate! Only the unloved hate; the unloved and the unnatural.
Soldiers! Don’t fight for slavery! Fight for liberty!

In the seventeenth chapter of St. Luke, it is written that the kingdom of God is within man, not one man nor a group of men, but in all men! In you!
You, the people, have the power, the power to create machines, the power to create happiness!
You, the people, have the power to make this life free and beautiful, to make this life a wonderful adventure.

Then in the name of democracy, let us use that power. Let us all unite.
Let us fight for a new world, a decent world that will give men a chance to work, that will give youth a future and old age a security.

By the promise of these things, brutes have risen to power. But they lie! They do not fulfill that promise. They never will!
Dictators free themselves but they enslave the people.
Now let us fight to fulfill that promise. Let us fight to free the world! To do away with national barriers! To do away with greed, with hate and intolerance! Let us fight for a world of reason, a world where science and progress will lead to all men’s happiness.
Soldiers, in the name of democracy, let us all unite!

VIEW DEMO

Let’s start… first you need to create an index page with a field

1
2
3
4
5
6
7
8
9
10
11
12
13

<input type="text" name="text"  onkeyup="getAutoSuggest(document.getElementById('key'))" id="key">

<!-- and yes the auto suggest box-->

<div id="autobox">
<ul>
</ul>
</div>

as u can see there is a function called up on key up. This function takes the input text  and calls a php file that uses the input to display results.
The function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

function getAutoSuggest(element) //---- a global common function to call sub categories

{
string = element.value
var dataString = 'text='+string; // sending the category id

//alert(dataString);

jQuery.ajax({
type: "POST",
url: "getList.php", //--the file to call--

data: dataString,
cache: false,
success: function(html)
{
if(html != "")
{
jQuery('#autobox ul').empty();
jQuery('#autobox ul').append(html);// appending to the auto-suggest box

jQuery('#autobox').slideDown();
return false;
}
else
{
jQuery('#autobox ul').empty();
jQuery('#autobox').slideUp();
return false;
}
}
});
return false;
}

The php file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<?php
$string = $_POST['text'];//-- id got via post--

/*
* run the sql and generate the result in the format below
*/

if($string!="")
{

for($x=0;$x<=5;$x++)//

{
?>
<li id="pro<?=$x?>"  onclick="setValue(<?=$x?>)">
String = "<?=$string?>" Click to set value as <?=$x?>
</li>
<?
}
}

// as u can see the LI generated calls a function "setValue"


?>

The “setValue ” function takes the value parameter and when u click on the result generated, its closes the the suggestion box and saves the value in the textbox.

1
2
3
4
5
6
7
8
9
10
11

function setValue(value)
{
jQuery('#autobox ul').empty();
jQuery('#autobox').slideUp();
jQuery('[name = text]').val(value);
}

thats all and yeah some styling too

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#autobox
{
background-color: #FFFDF7;
border: #EDED00 1px solid;
}

#autobox ul li
{
list-style: none;
cursor: pointer;
padding: 3px;
}

VIEW DEMO

Hello everyone. Its been a long time i haven’t poted. I was busy with my career and finally opened my own firm named SparkIgniter. Its going great till now. This blog will always continue to run.

Ok so here is a small code i created for a friend of mine who is a java developer.

Scenario: He wanted the panels to from left to right. On right it had main categories, then the sub-categories and on most right the products.

When we click on the category another panel slides down on the right with the matching sub categories. As we click on the sub-category another panel drops down with the final products.

here is the DEMO | FILES

The demo may seem you static but its not. we call different files to generate the results.

the files that you need to include your index.php

1
2
3

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

Basic elements you need to startup.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<div id="panel">
<ul id="list_items">
<?
/*
* put the sql queries to get the categores with parent as
* run the result loop below to generate the <li>
*
*/
for($x=0;$x<=5;$x++)//
{

// replace the your record id with the $x below

?>
<li id="cat<?=$x?>">
Cat<?=$x?>
</li>
<script type="text/javascript">
jQuery('#cat<?=$x?>').click(function()
{
getSubCats(<?=$x?>); //-- passing the value to the function--

});
</script>
<?
}
?>
</ul>
</div>
<!--     panel to append your  sub category name  -->
<div id="panel">
<ul id="list_items">

</ul>
</div>
<!--     panel to append your  product name  -->
<div id="panel">
<ul id="list_items">

</ul>
</div>

What we need now are the javascript universal function to call on each click of the categories generated above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

Remember you need to put this all in the <head> so they may get prepared as the page is called

<script type="text/javascript">
function getSubCats(id) //---- a global common function to call sub categories, takes a category id as parameter

{
var dataString = 'id='+id; // sending the category id

//alert(dataString);

jQuery.ajax({
type: "POST",
url: "getSubCats.php", //--the file to handle request and generate the sub categories--

data: dataString,
cache: false,
success: function(html)
{
{
jQuery('.subcats').slideUp();
jQuery('.subcats #list_items').empty();
jQuery('.subcats #list_items').append(html);
jQuery('.subcats').slideDown();
jQuery('.products').slideUp();
return false;
}
}
});
return false;
}

function getProductUnderCat(id) //---- a global common function to call products under sub categories, takes a subcategory id as parameter

{
var dataString = 'id='+id; //-- sending the category id

//alert(dataString);

jQuery.ajax({
type: "POST",
url: "getProducts.php", //--the file to handle request and generate the products--

data: dataString,
cache: false,
success: function(html)
{
{
jQuery('.products').slideUp();
jQuery('.products #list_items').empty();
jQuery('.products #list_items').append(html);
jQuery('.products').slideDown();
return false;
}
}
});
return false;
}
</script>

So above we have created the basic functions that would handle the request and call other scripts and get response.

Lets jump to other two files. The first is the file to generate the sub-categories

getSubCAts.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<?
/*
* file to get the sub categories
* you need to catch the parent category id
* run the sql query to get the subcategories with parent id as the POST id you got here
*/

$id = $_POST['id'];//-- id got via post--

/*
* run the sql and generate the result in the format below
*/
for($x=0;$x<=rand(1, 10);$x++)//

{
?>
<li id="sub<?=$x?>">
Sub Cat<?=$x?>
</li>
<script type="text/javascript">
jQuery('#sub<?=$x?>').click(function()
{
getProductUnderCat(<?=$x?>); //-- passing the value to the function--
});
</script>
<?
}
?>

getProducts.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<?
/*
* file to get the categories
* you need to catch the parent category id
* run the sql query to get the products under the category id
*/

$id = $_POST['id'];//-- id got via post--

/*
* run the sql and generate the result in the format below
*/
for($x=0;$x<=rand(1, 10);$x++)//

{
?>
<li id="pro<?=$x?>">
product<?=$x?>
</li>
<?
}
?>

DEMO | FILES

Please do comment

Did you ever thought of why to create thumbnail and saving them to server, or even you databases. keeping you mind throuh the complete script that uploads and then generates a thumbnail, Then you save the path to database.. aaaah… Well i was tired. after searching internet i got a script.. Thank god.

Ok here is the script that i have been using for a while now. The best part is, that it created an image in buffer only. I mean it does not save an image to a folder. its just resizes your image temporarily where as you actual image remains same.

here is a

demo.

The code goes here

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<?php
set_time_limit(10000); //--- need to do this for larger images in case the server stops..


error_reporting(E_ALL ^ E_NOTICE);

include 'resize.image.class.php'; //---- include the class file


$resize_image = new Resize_Image; //---- class instance


// Folder where the (original) images are located with trailing slash at the end

$images_dir = ''; // you can leave it empty. Only if you are providing the original image with its path (see next syntax). Its good to use when you have images from different locations and you are using this file only.


// Image to resize

$image = $_GET['image']; // This is the image name... You can provide path with it.

//echo $image;

list($width, $height, $type, $attr) = getimagesize($image); //--- get dimensions of the oirginal image

/* Some validation */
if(!@file_exists($images_dir.$image))
{
exit('The requested image does not exist.');
}

// Get the new with & height --[The parameter given in html with image name... will be covered below]

//echo $width ." | ". $height;

$new_width = (int)$_GET['new_width'];
$new_height = (int)$_GET['new_height'];

// --------the code below makes a decision on the basis of priority.


if($width>$height) //--if width is greater than the image you be reduced first, by with specified (with aspect ratio).

{
$resize_image->new_width = $new_width;
}
else //--any other contition like height is greater or both are of same ratio will be resized (with aspect ratio).

{
$resize_image->new_height = $new_height;

}
//--the above conditions can be changed as per user need....


$resize_image->image_to_resize = $images_dir.$image; // Full Path to the file


$resize_image->ratio = true; // Keep aspect ratio

//$image->save_folder = "thumbs/";

$process = $resize_image->resize(); // Output image

?>

In the above code you will see that we have not saved thumbnail to any folder. So its just gives output to browser.

Here is how you will you use it

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<img src="resize_image.php?image=products/my_image.jpg&new_width=150&new_height=100" >

<!--------------------

in the above code you can see that we have passed 3 parameters

1) the image with relative path....

2) New desired width

3) New desired height

-->

Thats all, you are done.

Demo | Files

Enjoy

Hey to all my CodeIgniter friends. SO you all have been waiting for a Gmail and Facebook like chat  to be implemented in Codeigniter.
NOW WITH VIDEO TUTORIAL AND FULLY INTEGRATED DOWNLOADS SCRIPTS

Well this is an extended version of
this chat.

Demo that i made can be found Here (demo is done on raw php)

[View in HD]

Download the files from the link  and do the following things.

Before doing the setup below. Please configure your database settings first.

The fact is that you need to to change the chat.js file

1
2
3
4

var baseUrl = "http://yourURl.com/chatfolder";

// or your ip address incase you are using over intranet.

Change all your URls in th script from

1

url: "chat.php?action=chatheartbeat",

to

1

url: baseUrl+"chat.php?action=chatheartbeat",

open samplea.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<?php
session_start();
$me = $_GET['me'];
$you= $_GET['u'];

$_SESSION['username'] = $me; // Must be already set

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd" >

<html>
<head>
<title>Sample Chat Application</title>
<style>
body {
background-color: #eeeeee;
padding:0;
margin:0 auto;
font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
font-size:11px;
}
</style>

<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/screen.css" />

<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" media="all" href="css/screen_ie.css" />
<![endif]-->

</head>
<body>
<div id="main_container">

<a href="javascript:void(0)" onclick="javascript:chatWith('<?=$you?>')">Chat With <?=$you?></a>
<a href="javascript:void(0)" onclick="javascript:chatWith('babydoe')">Chat With Baby Doe</a>
<!-- YOUR BODY HERE -->

</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chat.js"></script>

</body>
</html>

Copy the code to your CodeIgniter View and make necessary changes like <?=base_url()?> inclusion and other stuff.

At the top of the file you see the following code

1
2
3
4
5
6
7
8
9
10
11
12

<?php
session_start();
$me = $_GET['me'];
$you= $_GET['u'];

$_SESSION['username'] = $me; // Must be already set

?>

To change that code to Codeigniter do the following steps.

In your controller (the one that calls your view), either use session or pass names as parameters.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
function chat($me, $you)
{
$data['me'] = $me;
$data['you'] = $you;
$this->load->view('chat', $data);
}

?>

I use two parameters because one is for your name and other is the name for the person you want to chat with.

Make sure names should not have any spaces or dotz. It should be just words or underscores.

ok so.

change the following code

1

<a href="javascript:void(0)" onclick="javascript:chatWith('babydoe')">Chat With Baby Doe</a>

to this

1
2
3
4

<a href="javascript:void(0)" onclick="javascript:chatWith('<?=$you?>')">Chat With <?=$you?></a>

//---make it dynamic.

Open two of your browser  and open the link. be sure either using localhost or the ip address. depending on what you have used in your chat.js

In Firefox open this link http://localhost/gchat/welcome/chat/misha/rahul and in the other browser open this

http://localhost/gchat/welcome/chat/rahul/misha. Click the first link.

Then you should have your chat working fine.

DEMO (demo is done on raw php)
Download(with Coddeigniter 2.0.3) 

View Demo

Its been so long, after switching from windows to Ubuntu.Things are more easy, attractive ans secure.
This Tutorial is for creating a FACEBOOK LINK LINK SHARING INTERFACE.
The script used php, javascript expressions, jquery and some css too.
Ok, lets start

Lets us create an Interface First
call the file index.php… Why.. well you can have Index.html also. Incase you are not loading any data from database…
Since I’m loading the previously shared links so its index.php

1
2
3
4
5

Facebook Like Links Sharing
<!--Loading Jquery Below-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Next you need a Textbox and a publish button. Here we go

1
2
3

<textarea id="contentbox"></textarea>
 <input id="submit" onclick="saveLink()" name="Publish" type="Submit" value="Publish" />

Ok Now we need a Script that Fetches whatever you write and then process it, to show you. Guess what… It uses jquery.

1
2
3
4

$(document).ready(function() {      $("#contentbox").keyup(function()//--the script catches all your written text as you type     {         var content=$(this).val();         var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;         var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&amp;%@!\-\/]))?/;         var url= content.match(urlRegex); //---Filtering URL from the content using regular expressions------          if(url.length&gt;0)//--check for length-----         {              $("#linkbox").slideDown('show');             $("#linkbox").html("<img src="link_loader.gif" alt="" /> Loading Data.....");             $.get("urlget.php?url="+url,function(response)//---sending your url as parameter to "urlget.php" and fetching the response----             {                  var title=(/(.*?)&lt;\/title&gt;/m).exec(response)[1]; // Loading &lt;title&gt;data                 var logo=(/<img src="(.*?)" alt="" /><img class="img" src="&quot;+logo+&quot;" alt="" />


<div><strong>"+title+"</strong> "+url)             });          }         return false;     });  });

So that one will do nothing.. You need thet urlget.php so here we go

1

Using the Above code will show the logo or any first image and the url details. Next would be saving the data in database.. when you click on PUBLISH. here is the table

1

CREATE TABLE `links` (    `link_id` int(11) NOT NULL AUTO_INCREMENT,    `link` varchar(250) NOT NULL,    PRIMARY KEY (`link_id`)  )

Now the script to insert the data.

1
2
3
4
5
6
7
8
9
10
11
12
13

function saveLink()     {         var content=$('#contentbox').val();         var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;         var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&amp;%@!\-\/]))?/          var url= content.match(urlRegex);         if(url.length&gt;0)         {             $.get("saveurl.php?url="+url,function(response)             {                 var title=(/(.*?)&lt;\/title&gt;/m).exec(response)[1];                 var logo=(/<img src="(.*?)" alt="" />

 

	<li id="updates">
<div id="lft"><img class="img" src="&quot;+logo+&quot;" alt="" /></div>
<div id="rt"><strong>"+title+"</strong> "+url+"</div></li>

");                  $("#linkbox").fadeOut();             });         }         return false;     }

The Script seems similar the difference is that it calls another php Script saveurl.php . That captures and saves data. Here is the code

1

The Above Script Uses a config file config.php

1

$mysql_hostname = "localhost"; $mysql_user = "root"; $mysql_password = "root"; $mysql_database = "fb";  $cn = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong"); mysql_select_db($mysql_database, $cn) or die("Opps some thing went wrong");

Thats it now Now If you want to load the the previous shared links use this in you index.php file. Just paste this code below your publish button

1
2
3
4
5
6
7
8

<script type="text/javascript">// <![CDATA[

             function lods()             {             window.onload = loadHistory("");/****javascript method that takes a parameter ans uses it to extract and load data ****/         //              }             window.onload = lods();

// ]]></script>


</div>

Thats All.Below are the links to Download and Demo

View Demo

Download the Script

Comments will be appreciated.

Thank you

By bluejavax is licensed under a Creative Commons Attribution-Share Alike 2.5 India License.

A content sharing website, where users can register and write journals, news, hacks, poery etc.

Specifications:

• User can register and can search and write content.
• User can follow there friends.
• User gets comment updates.
• The admin section allows to edit user profiles and complete archives
• Site uses ajax and jquery, for quick updates and editing.

THE SITE HAS BEEN REMOVED BY ME DUE TO PAYMENT ISSUES.

THE SCRIPT WILL BE SOON AVAILABLE FOR SELLING.

The problem usually occurs when you are using many javascript frameworks together. Since i faced one, so felt it to share with you all.

The tutorial is simple and easy to implement. The trick is to load lighbox.js with jQuery when you want it.

Here is the simple code.

code for index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

<!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" lang="en">
<head>

<title>Using lightbox with ajax</title>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;    }
#update
{
margin-top: 10px;
}
#update a img
{
border: #202020 3px solid;
}
</style>

</head>
<body>

<h1>Using <a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox JS <em>with ajax</em></a></h1>
<p><a href="http://www.lokeshdhakar.com">by Harpreet BHatia</a></p>

<h2>Example</h2>

<select name="imageOption" id="imgOptn">
<option value="xxx">----Select Image Type-----</option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
</select>

<script type="text/javascript">

jQuery("[name=imageOption]").change(function()
{

//------loading lightbox script using jquery-----


jQuery.getScript("js/lightbox.js", function()
{
cat = jQuery('[name=imageOption]').val();
if(cat != "xxx")
{
var dataString = 'cat=' + cat;
{
jQuery("#flash").show();
jQuery("#flash").fadeIn(400).html('<span>Loading Image, Please wait...</span>');

//----calling the php file to get images ------

jQuery.ajax(
{
type: "POST",
url: "getImages.php",
data: dataString,
cache: false,
success: function(html)
{
{
jQuery("#update").empty();
jQuery("#update"). append(html);
jQuery("#update").fadeIn("slow");
jQuery("#flash").hide();
//jQuery("#update").fadeOut(7000);

}
}
});
return false;
}
}
else
{

jQuery("#update").fadeOut();
}
});
});
</script>

<div id="flash"></div>
<div id="update">

</div>

</body>
</html>

Code for php file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<?php
$t = $_POST['cat'];
if($t == 1)
{
?>
<a href="images/hat_big.jpg" rel="lightbox[roadtrip]">
<img src="images/hat.jpg" width="200" height="200" alt="" />
</a>
<a href="images/glow_big.jpg" rel="lightbox[roadtrip]">
<img src="images/glow.jpg" width="200" height="200" alt="" />
</a>
<?
}
else
{
?>
<a href="images/roof_big.jpg" rel="lightbox">
<img src="images/roof.jpg" width="200" height="200" alt="" />
</a>
<?
}
?>

View Demo

Download source

Hope you like it…