Js Plugins

Monday, 21 July 2014

Simple 3D Coverflow

What is Simple 3D Coverflow ?

Simple 3D Coverflow is a fully responsive media 3D coverflow plugin that allows you to display media content with an unique original layout from a 3D perspective. It’s perfect for any kind of presentation, for anyone that wants to deliver a great impact on their visitors. It runs on all major browsers and mobile devices like iPhone, iPad, IOS, Android and Windows 8. Also supports unlimited categories and each category can have any number of thumbnails. The datalists are loaded from a simple HTML markup.

Simple 3D Coverflow main features:

Responsive / Fluid layout with autoscale function.

Mobile and desktop optimized (iPad/IOS demo).

Scroll and swipe functions for the desktop and mobile devices.

Mouse Wheel support – navigation with mouse wheel scrolling.

Keyboard support – the left and right arrows can be used for navigation through the thumbnails.

Optional Categories Menu.

Support for unlimited categories and each category can have any number of thumbnails.

The option to start at a specific category.

Customizable thumbnails size and topology geometry.

Optional playlist and playlist window selector.

Customizable hover effect for the side thumbnails.

Customizable description text for the center thumbnail.

Dynamic or static tooltip for the center thumbnail.

Customizable controls – each button and scrollbar component can be changed.

Customizable reflection for the thumbnails.

Optional and customizable Shadow Box Gradient for the thumbnails.

Custom action for the thumbnail click.

Powerful API included.

You can include multiple instances on the same page.

Slideshow autoplay.

Responsive / Fluid layout for the coverflow Lightbox.

Image, youtube, vimeo, iframe lightbox support.

Zoom and panning support for lightbox images.

Optional lightbox slideshow button, time and autoplay.

Customizable border and background for the lightbox.

Lightbox keyboard support – the left and right arrows can be used for navigation.

Two skins included along with the psd files.

Detailed documentation and sample files.

Special notes:

When viewing the coverflow on a mobile browser the scrollbar is automatically disabled, the swipe functionality taking its place.

On IE the coverflowXRotation and coverflowYRotation do not work. This affects only preset 9.

The coverflow also has a setting to limit the maximum number of thumbnails only on mobile devices, separately from the pc, for performance reasons. This is an optional feature it can be disabled but we advice to leave it active because it will increase the performance on mobile devices.

Simple 3D Coverflow

Noch jQuery - Side Out Tabs

Download Demo

Features

02 TYPE

07 COLOR SCHEME

70 ANIMATION EFFECTS

LEFT AND RIGHT SIDE

CLICK AND HOVER

ICON SUPPORT (360+)

CROSS BROWSER

EASY USE

EASY CHANGE COLOR

DOCUMENTED

Inside Pack (Folder)

Type1
- CLICK
  - LEFT
  - RIGHT
- HOVER
  - LEFT
  - RIGHT

Type2
- HOVER
  - LEFT
  - RIGHT

Document

Noch jQuery - Side Out Tabs

Nuxion – Responsive UX Navigation Menu Bar

Download Demo

Nuxion jQuery – Responsive UX Navigation Menu Bar is a small jQuery plugin that is used to create modern navigation bars that support unlimited menus, flexible layouts. You can easily customize the style of the navigation with CSS, place it at anywhere in your site like: the top of the page, the middle of the content or left/right side bars. You can check our basic demos for more details.

# THIS IS NOT A WORDPRESS PLUGIN #

Features:

Responsive Design.

Unlimited Menu Items.

Flexible Layouts: Fixed Width, Full Width, Blocks.

Multi Nav in the same page.

Easy Customization.

Documentation

If you like to see the plugin documentation you can check it here: Nuxion jQuery Documentation

Support

If you have any question or feature request or bug report please email me. After purchase please rate and leave me some feedback to improve this item. Thank you!

First of all, to ensure everything works correctly, please use <!DOCTYPE html>. Include the following code into HEAD section of the page.

Includes required CSS files:

<!-- SONHLAB Style -->

<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />

<!-- Fix IE 8 -->

<!--[if lt IE 9]>

<link rel="stylesheet" href="css/sonhlab-fix-ie8.css" type="text/css" />

<![endif]-->

<!-- Nav CSS Pack -->

<link rel="stylesheet" href="css/nuxion-js.css" type="text/css" />

<!-- Nav SubMenu Style -->

<link rel="stylesheet" href="css/nav-substyle.css" type="text/css" />

Include required Javascript files:

<!-- Start jQuery Library -->

<!--[if !IE]> -->

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

<!-- <![endif]-->

<!--[if gte IE 9]>

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

<![endif]-->

<!--[if lt IE 9]>

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

<![endif]-->

<!-- End jQuery Library -->

<!-- Nuxion jQuery Plugin -->

<script type="text/javascript" src="js/nuxion.dev.js"></script>

Done. Nuxion jQuery plugin is now ready to use.

SECTION 2: NUXION JQUERY HTML STRUCTURE.

This section should be read along with the example files also contained in the download package.

The Nuxion structure has two main parts: The Main Item Bar and The SubMenu Station.

<!-- START NUXION -->

<div class="nuxion">

  <!-- Start Main Item Bar -->

  <div class="nav-mainmenu">

    // Add Main Item Here

  </div><div class="clearspace"></div>

  <!-- End Main Item Bar -->

  <!-- Start SubMenu Station -->

  <div class="nav-substation">

    // Add SubMenu Content Here

  </div>

  <!-- End SubMenu Station -->

</div>

<!-- END NUXION -->

Add a main item and a submenu content:

<!-- START NUXION -->

<div class="nuxion">

  <!-- Start Main Item Bar -->

  <div class="nav-mainmenu">

    <!-- Start Main Item - Demo -->

    <a class="nav-mainitem floatleft" data-navid="demo-navid">

      <span class="nav-icon"><i class="fa fa-home"></i></span>

      <span class="nav-title">Some Text</span>

    </a>

    <!-- End Main Item - Demo -->

  </div><div class="clearspace"></div>

  <!-- End Main Item Bar -->

  <!-- Start SubMenu Station -->

  <div class="nav-substation">

    <!-- Start Sample SubMenu -->

    <div class="nav-submenu" data-navid="demo-navid">

      <div class="nav-sub-container">

        <div class="nav-submenu-content">

          // Add Content Here

        </div>

      </div>

    </div>

    <!-- End Sample SubMenu -->

  </div>

  <!-- End SubMenu Station -->

</div>

<!-- END NUXION -->

In the above code when a main item has data-navid=”demo-navid” is clicked a submenu content has the same data-navid (demo-navid) will be displayed.

SECTION 3: CALL NUXION JQUERY PLUGIN.

To call Nuxion jQuery plugin you just add this sample code below into the Head section:

<!-- Call Nuxion jQuery Plugin -->

<script type="text/javascript">

$(window).load(function() 

  $('.nuxion').nuxionjs(

    moremenuBg: 'solid-blue-2',

    returnIcon: '<img src="images/icons/prev-black.png" alt="return" />',

    moremenuHover: 'nav-hover-bluelight',

    responsive: true

  );

)

</script>

Nuxion – Responsive UX Navigation Menu Bar

Sunday, 20 July 2014

Closify – universal image-uploader in the whole internet!

Download Demo

Client Side

Closify is a jQuery based plugin, that simplifies the developers task to create a dynamic image uploader. With closify you can easily create any kind of image convas (cover, profile, or custom banner) with whatever size you define, and intelligently enough the Closify plugin would resize the image according to the size of container you defined with a respect of the image aspect ratio, and then it start to generate a dynamic widget that give you the capability to position/reposition your photo adequately; save the photo with the desired position and submit the position information to the server side for storage; change the photo you have chosen and just delete the selected photo.

Make sure to put a unique ID for every DIV that need to be Closified, and also you have to make sure that you have included the desired width and height as shown in the above example.

Now all you have to do is to add a line of javascript code for every DIV that need to be closifed as follow:

$(document).ready(function()

 // Closify a div with default options
 $("#tiny-img").closify();

 // Closify a div with options
 $("#profile-img").closify(
 
 allowedFileSize: 1024 * 1024 * 10, // (10 MB) Maximum image size limit
 url: "processupload.php", // URL on where the photo should be submitted
 dataType: "json", // The result data type that should be anticipated for the upload request result
 targetOutput: "#output-profile-img",// Where to render errors and notification messages
 type: "post", // Type of post
 error: anyFunctionName, // Event handler for upload error
 success: anyFunctionName, // Event handler for successful upload
 uploadProgress: anyFunctionName, // Event handler for upload progress (In Percentage)
 beforeSubmit: anyFunctionName // Before submission event handler
 );
 
);

As you can see you can either Closify a DIV with default options as for the #tiny-img case, or overriding the options as shown for the #profile-img case.

The plugin default options are as follow:

allowedFileSize: 1024 * 1024 * 10, // (10 MB) Maximum image size limit
url: "processupload.php", // URL for where the photo should be submitted, and by default the processupload file should be put inside the root folder.
dataType: "json", // The result data type that should be anticipated for the upload request result
targetOutput: "#output-"+<div-id>,// Where to render errors and notification messages
type: "post", // Type of post
beforeSubmit: beforeSubmit // Notice: By the default the plugin does validate the file size, type and validity, and if you override this event; then, you have to handle the validation process on your own.

Server side

From the server side there will be only one PHP file that should process the images that have been uploaded from the client side, and this single processing file is represemted by the “processupload.php” file. This file is responsible of generating proper photos/thumbnails; where the resized photos are sent back to the client side using AJAX to be shown to the user seamlessly.

Here are the options that you can configure yourself to change the behaviour of the processing:

############ Edit settings ##############
$imageName = $_POST["ImageName"];
$ThumbSquareSize = 200; //Thumbnail will be 200x200
$container_width = $_POST["w"];
$container_height = $_POST["h"];
$ThumbPrefix = "thumb_"; //Normal thumb Prefix
$DestinationDirectory = getcwd().DIRECTORY_SEPARATOR.'uploads'.DIRECTORY_SEPARATOR; //specify upload directory ends with / (slash)
$Quality = 90; //jpeg quality
##########################################

However, it is your task to store the image url generated from this code into database so it can be rendered later according to the UserID, where the UserID will point the user who uploaded the pictures. And also there is another place where you can retrieve the image offset from users so it can be save or stored for later usage. The “processupload.php” is considered to be highly documented and easy to read, and you will have hints inside to where you supposed to put your processing code for the above mentioned reasons as follow:

1.
 /****************************************************/
 /****************************************************/
 /*
 // Insert info into database table!
 mysql_query("INSERT INTO myImageTable (ImageName, ThumbName, ImgPath)
 VALUES ($DestRandImageName, $thumb_DestRandImageName, 'uploads/')");
 /****************************************************/
 /****************************************************/
2. 
 // When somebody saves a picture you can read offsetY and offsetX and save them, so it become stored
 // offsetX / offsetY

Closify – universal image-uploader in the whole internet!

Rome - A customizable date and time picker.

Download Demo

Rome is a customizable date and time picker. Dependency free, opt-in UI.

Rome synchronizes in real-time with the input, never steals focus, and its CSS is entirely customizable!

1. INCLUDE CSS AND JS FILES

<link href='dist/rome.css' rel='stylesheet' type='text/css' />
<script src='dist/rome.js'></script>

2. HTML

<input id='dt' class='input' />

3. JAVASCRIPT

rome(dt);

4. OPTIONS

rome.find(input)

Finds a previously created Rome calendar. Exactly the same as doing rome(input) after the first time. The difference is that if the first call made on an input is .find you’ll get undefined, and if the first call is rome then a Rome calendar will be created and associated to the input. This association can’t be undone even by .destroy() in the rome instance, which can be .restore() later.

rome(input, options?)

Creates a Rome calendar using a ton of options. These have reasonable defaults that are easy to adjust, too. The options are listed below.

Option	Description
autoHideOnClick	Hides the calendar when clicking away
appendTo	DOM element where the calendar will be appended to. Takes ‘parent’ as the parent element
autoClose	Closes the calendar when picking a day or a time
autoHideOnBlur	Hides the calendar when focusing something other than the input field
date	The calendar shows days and allows you to navigate between months
dayFormat	Format string used to display days on the calendar
inputFormat	Format string used for the input field as well as the results of rome
invalidate	Ensures the date is valid when the field is blurred
min	Disallow dates before min. Takes string, Date, moment
max	Disallow dates past max. Takes string, Date, moment
monthFormat	Format string used by the calendar to display months and their year
styles	CSS classes applied to elements on the calendar
time	The calendar shows the current time and allows you to change it using a dropdown
timeFormat	Format string used to display the time on the calendar
timeInterval	Seconds between each option in the time dropdown

Default Options

If you don’t set an option, the default will be used.


 "autoHideOnClick": true,
 "appendTo": document.body,
 "autoClose": true,
 "autoHideOnBlur": true,
 "date": true,
 "dayFormat": "DD",
 "inputFormat": "YYYY-MM-DD HH:mm",
 "invalidate": true,
 "min": null,
 "max": null,
 "monthFormat": "MMMM YYYY",
 "styles": 
 "back": "rd-back",
 "container": "rd-container",
 "date": "rd-date",
 "dayBody": "days-body",
 "dayBodyElem": "day-body",
 "dayDisabled": "day-disabled",
 "dayHead": "days-head",
 "dayHeadElem": "day-head",
 "dayRow": "days-row",
 "dayTable": "rd-days",
 "month": "rd-month",
 "next": "rd-next",
 "selectedDay": "day-selected",
 "selectedTime": "time-selected",
 "time": "rd-time",
 "timeList": "time-list",
 "timeOption": "time-option"
 ,
 "time": true,
 "timeFormat": "HH:mm",
 "timeInterval": 1800

5. ROME API

When you create a calendar with rome(input), you’ll get a cal instance back. This has a few API methods.

.show()

Shows the calendar by absolutely positioning it right below the input field.

.hide()

Hides the calendar.

.container

The DOM element that contains the calendar.

.input

The input field assigned to this calendar instance.

.getDate()

Returns the current date, as defined by the calendar, in a native Date object.

.getDateString(format?)

Returns the current date, as defined by the calendar, using the provided options.inputFormat format string or a format of your choosing.

.getMoment()

Returns a copy of the moment object underlying the current date in the calendar.

.destroy()

Removes the calendar from the DOM and all of its associated DOM event listeners. The API is reduced to provide only the .restore method described below. After emitting the destroyed event, all event listeners are removed from the instance.

.restore(options?)

Restores the calendar, using the provided options (or the default options). The associated input field can’t be changed.

.options(options?)

If an options object is provided, it destroys the calendar and initializes it with the provided options. Effectively the same as calling .restore(options) immediately after calling .destroy().

If no options object is provided, a copy of the current options is returned.

.options.reset()

Resets the options to the factory defaults. Effectively the same as calling .options().

6. EVENTS

Rome calendars also provide a few events you can subscribe to. These events are published through an event emitter created using contra. These events are listed below.

Event	Arguments	Description
ready	[options]	The calendar has been .restored
destroyed	[]	The calendar has been .destroyed
data	[value]	The date may have been updated by the calendar. Value of.getDateString() is provided
year	[year]	The year may have been updated by the calendar. Value ofmoment.year() is provided
month	[month]	The month may have been updated by the calendar. Value ofmoment.month() is provided
day	[day]	The day may have been updated by the calendar. Value ofmoment.date() is provided
time	[time]	The time may have been updated by the calendar. Formatted time string is provided

Rome - A customizable date and time picker.

Ads

Monday, 21 July 2014

Simple 3D Coverflow

What is Simple 3D Coverflow ?

Simple 3D Coverflow main features:

Special notes:

Noch jQuery - Side Out Tabs

Features

Inside Pack (Folder)

Nuxion – Responsive UX Navigation Menu Bar

# THIS IS NOT A WORDPRESS PLUGIN #

Features:

Documentation

Support

SECTION 2: NUXION JQUERY HTML STRUCTURE.

SECTION 3: CALL NUXION JQUERY PLUGIN.

Sunday, 20 July 2014

Closify – universal image-uploader in the whole internet!

Client Side

Server side

Rome - A customizable date and time picker.