Hi All,
This is the 4th week of my Blog Tips and Tricks. I am thankful to one and all for giving me such an encouragement.
JavaScript APIs
Image Viewer
When we are working in development of a Social Networking Platform Projects or a college website or some other else where there is great importance presenting the pictures, images, as a gallery or album in the application. As per the requirement we will simply use <img> tag with some navigation buttons(previous,next) at bottom of the image.
This is simple solution upto your requirement but to make it more impressive there should be a image viewer just like Picasa, Nero, FastStone, ACDSee PhotoViewer.
For This There are some predefined JavaScript APIs that provides these image viewer. In my practice I use Highslide JS to show some images as a gallery. As you see in facebook, google+ and remaings social networking website they are having their own implementations to view the user images. These APIs will provide javascript and css which have to put between the <head> tags. Greatness is we can implement highslide easily. As an Example here is a small viewer
You can download this API from
http://highslide.com/download-confirm.php?file=download%2Fhighslide-4.1.13.zip
Simple Usage
<html>
<head>
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75;
// define the restraining box
hs.useBox = true;
hs.width = 640;
hs.height = 480;
// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 1,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
</head>
<body>
<!--
3) Put the thumbnails inside a div for styling -->
<div class="highslide-gallery">
<!--
4) This is how you mark up the thumbnail image with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image.
-->
<a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>
<head>
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75;
// define the restraining box
hs.useBox = true;
hs.width = 640;
hs.height = 480;
// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 1,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
</head>
<body>
<!--
3) Put the thumbnails inside a div for styling -->
<div class="highslide-gallery">
<!--
4) This is how you mark up the thumbnail image with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image.
-->
<a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>
</body>
</html>
This will does not effect any of your application it simply add the special feature to it...
Date and Time Picker
Generally we have to take Date as input into a application to search the records, to view history, and so on..usually we will give an input field to enter the date with a caption besides is as (dd/mm/yyyy) specifying the date format to entered. Client may go wrong at any time with a invalid date entry. So we have to validate the this Date Value So, again we have to code for date validation. To this problem here is a simple solution that is Date Picker. they are a lot of APIs available in the internet providing such API with sample pages.
In my projects use the JavaScriptCalendar to pick the date. It will provides a simple implementation will excellent configuration settings
You can download this API from this link
http://javascriptcalendar.org/thanks.php
Source Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jsDatePick Javascript example</title>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="res/jsDatePick.min.1.3.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
};
</script>
</head>
<body>
Make a focus to the textfield to select the date
<input type="text" size="12" id="inputField" value=""/>
</body>
</html>
Richtext Editors
Regularly we are having textarea that makes the user to enter the multiply lines if the client have to enter the text to formatted i.e., to align, to makes so text fields a bold, and so usual formatting jus like a composer in gmail.. for this I found a API (web service) that provides a huge functionality that is NicEdit. Using the we can transform all the textareas as RichText Editors....
For Example
Source Code
Include the following tags in <head> tag
all the textareas will changes to Richtext areas...
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
References:
Ok guys,
Hope my example are usefull to you...
Let us meet next week with some more Interesting topics
My Best Wishes.
regards,
M.Agni
Assistant Professor
ACE Team member
Aditya Edu. Group.
Ph: 9491520200
Email: agni2020@gmail.com
agnim@aec.edu.in
Quite Useful Agni! I will try to use highslide image gallery for our Aditya website.
ReplyDeleteKeep it up and expecting many exciting & innovative tips!
Ok sir..
ReplyDeleteSurely I will,
Image Viewer is not new for us
as We already used same thing in TheaterManagementSystem
ooo thnku Sir...really donno abt dis Image Viewer till nw..thnku 4 makin us aware of such new thngs...
ReplyDelete