The best programming tricks you need to learn now

Programming is one of the most creative jobs to do. To be a good programmer, learning new tricks and being compatible with the changes in programming field is quite necessary. On daily basis, different rules and modifications are introduced in the field of programming. There is always some programming tricks you need to learn in the field of programming. New challenges always come and go in the field of programming. To be a good programmer all these challenges need to faced with proper dedication and creativity. Read the blog below to know best programming tricks.

The-best-programming-tricks-you-need-to-learn-now

Readability

Comments are an important aspect of the readability. Understanding a code after some period of time becomes quite difficult, however with the use of appropriate comments, you can reuse your code. It guarantees fast debugging and designing of your code. Once people get to know your code, they start to know you as a programmer. It is a mistake that difficulty gives your code a weird look. The reality is that difficult things coded in an easy manner are the best feeling.

You will appreciate easy programs when you identify an error. Readability assists you cross-check code without getting a headache. Everyone experiences errors in their own manner. Readability comes into play when you can present your code in the programming languages.

Express your program code in such a manner that your colleagues can understand it easily. If you have a client project, readability will play a crucial role in customer satisfaction. According to the experts, readability always has an upper hand over the unreadable code.

Client Dealings

In order to become a good programmer, the important thing to grasp is the client’s engagement or interaction. The whole bunch of requirements of clients may be unknown to your team lead or the manager. It is your accountability to provoke requirements from clients as you move ahead in your project. Give a suitable platform for the client to engage with you easily.

Discuss thoroughly that may help them to recall their requirements. There is more than one technique of doing a particular task. Dealing with clients on the continuous basis can guarantee fulfillment of all requirements. Be confident about your work and interact more with your customers. The code written helps the client to get their needs fulfilled.

Grow your Network

Go to seminars and meetings. Interact with other programmers to know the programming tricks, guidelines, and rules. At the least, you will have new colleagues; at the most, you can be in touch with experts who are ready to train you. In learning anything, networking is an important asset for an expert programmer. Try to be active on social media platforms, for instance, LinkedIn is an amazing platform to manage your professional network. Be skilled with the several programming languages in multiple domains. Take part in quiz, competitions and other programming events to boost your programming skills and tricks. Technical brilliance and good design are the features of a great programmer. Ensure you continue them.

Keep learning

Learning is the best programming trick, being a student always is the best thing to learn anything. Life gives you a number of things to learn. Always be active on your personal activities like reading books, playing games and taking part in outings. Always sharpen your skills, reflexives and stay up to date with the changing world. Always try to add something new to your skills. Don’t try to indulge in multiple things at a single time, get updates on new languages and frameworks, and get to know about their basics. Learning ensures you are updating your skills and getting new programming tricks.

Take initiative to learn on new projects on regular basis. Take these projects seriously, always treat them as a challenge and as a chance to further enhance your programming skills into long-term memory. As a programmer adapt quickly to changing requirements. When requirements vary, the tricks to code vary too. Adaptiveness is the important skill to be a good programmer.

Author’s bio:

I am a professional content writer since 2011 working with SEO Services Company Delhi and the graduate of the English with a degree in Mass Communication. My written blogs and articles have been published in several online publications. I am fond of writing, reading, traveling, and Internet surfing.  

 

Set the Default Value to Select in Angular 5 iterated with Array of Objects

Here, the simple and easy way to set default value to select in Angular 5 which is iterated with an array of objects.

Let’s consider the below sample object which is going to iterate in the select options

[
      {
		"userName": "User1",
		"userId": "1",
		"userRole": "admin"
	},
	{
		"userName": "User2",
		"userId": "2",
		"userRole": "moderator"
	},
	{
		"userName": "User3",
		"userId": "3",
		"userRole": "user"
	}
]

In above array, I need to iterate and get the complete object on selection. So I assign the complete object to the [ngValue] to the iterative option tag.

While changing the option you will get the proper object’s value, but in case of retrieving & reassign the data or initialize some value to the select dropdown as default, we cant able to straightaway do that by assigning the appropriate object to the select’s ngModel.

Solution to set default value to select in Angular 5.

HTML :

For that, we can use [compareWith].  Refer the below HTML code snippet having the [compareWith ] directive.

 <select [compareWith]="compareByuserId" [(ngModel)]="selectedUser" name="user" (change)="setUserData(selectedUser)">
    <option disabled value="undefined" > Select User</option>
    <ng-container *ngIf="users" >
       <option *ngFor=" let user of users" [ngValue]="attribute" >{{user.userName}} </option >
     </ng-container >
</select >

TypeScript:

Add the below-given code snippet to your respective TS file. Here userId is the key which used to compare the available and assigned object. You can change the key on demand.

 compareByuserId(arg1, arg2) {
    if (arg1 && arg2) {
      return arg1.userId== arg2.userId;
    } else {
      return false;
    }
  }

Retrieve & Assign Value:

Now you can directly assign the required object to the ngModel selectedUser.

This will make the select box to have the assigned value as the preselected as default.

Assign the undefined to selectedUser have the select box to have the “Select User” as a default selection.

Tune In for more Angular updates.

How To Send Push Notification In Ionic Android App

In this tutorial, I am going to explain how to send Push Notification in Ionic Apps in a simple and more efficient way. Here am using Firebase Cloud Messaging (Google Cloud Messaging) for Android push notification and OneSignal to manage more segments for push notification to users and various platforms. You can integrate OneSignal with various platforms to push Notification.

This tutorial written for ionic 2 and above but still ionic 1 and cordova projects can follow same steps except sdk installation for send push notification.

send push notification

Send push notification to you hybrid ionic app in 10 simple steps

Step 1: Create Firebase account

Create Firebase account from https://firebase.google.com and Create a new project. Use your App Name for easier identification.

Step 2: Navigate to Project Settings

Once the project is created, go to the project click Settings icon and Navigate to Project Settings.

 

Step 3: Get Server Key and Sender ID

In the Settings page, Navigate to Cloud Messaging tab to get Server Key and Sender ID. Copy Both keys and save in secure place. We need this key to configure OneSignal platform.

Step 4: Create OneSignal Account

Now Create OneSignal account from https://onesignal.com and Create a new app. Use your App Name for easier identification.

 

Step 5: Select Platform in OneSignal

Now Select Android platform from the list and Click Next. You will be prompted to insert your Server Key and Sender ID.

Paste the Value which we copied from firebase in Step 3 and Click Next.

Step 6: Select SDK

Select the SDK of our Project. Currently, here we have to select Ionic/Cordova/Phonegap and Click Next.

 

Step 7: Install OneSignal SDK

OneSignal will generate App Id for the app. Now its time to install OneSignal SDK in our Ionic app.

$ ionic cordova plugin add onesignal-cordova-plugin

$ npm install --save @ionic-native/onesignal

After plugin installed, now add a plugin to your App Modules file “App.Module.ts”.

...

import { Onesignal} from '@ionic-native/onesignal';

...

@NgModule({
  ...

  providers: [
    ...
    Onesignal
    ...
  ]
  ...
})
export class AppModule { }

Step 8 : Configure “app.component.ts”

Usage

Let’s Initiate OneSignal and Subscribe the Device to OneSignal Service. Use the following code in “app.component.ts” file. Replace OneSignal App Id and Firebase Sender ID in the following code.

import { OneSignal } from '@ionic-native/onesignal';

constructor(private oneSignal: OneSignal) { }

...
//Replace APP ID and Sender ID
this.oneSignal.startInit('', '');

//Type of Alert
this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);

//Handle Event when push notification is received when app is running foreground 
this.oneSignal.handleNotificationReceived().subscribe(() => {
 // do something when notification is received
});

//Handle Event When user clicks on the push notification
this.oneSignal.handleNotificationOpened().subscribe(() => {
  // do something when a notification is opened
});

//Subscription Initialized Successfully.
this.oneSignal.endInit();

More OneSignal functions available here https://ionicframework.com/docs/native/onesignal/

Step 9: Add Android Support repository

Make Sure your Android SDK installed with Android Support Repository and Google Repository.

Step 10: Trigger Push notification to your App

Build your app and Go to OneSignal page and click registered devices and Try Sending One.

Note: If you receive push notification when app is opened and app running in background but not when the app is closed. Then the problem is your device custom ROM terminates the GCM to save battery. Make the app trusted or add to the auto startup.

See also: How to post feeds on Facebook from Mobile App

Upgrade Application from Angular 2 to Angular 4

Angular 2 to Angular 4 upgrade is much easier than you imagine. Minimal changes in your package.json and tsconfig.json is enough to run your app developed in angular 2.  As Angular has backward compatibility which runs previous release apps in the new upgraded version.

angular 2 to angualr 4

Angular 2 to Angular 4

Pakage.json changes

angular 2 to angular 4

For upgrade, just change the “Dependencies” & “devDependencies ” portion of the package.json

Upgraded Package.json content.

"dependencies": {
        "@angular/common": "^4.0.0",
        "@angular/compiler": "^4.0.0",
        "@angular/core": "^4.0.0",
        "@angular/forms": "^4.0.0",
        "@angular/http": "^4.0.0",
        "@angular/platform-browser": "^4.0.0",
        "@angular/platform-browser-dynamic": "^4.0.0",
        "@angular/router": "^4.0.0",
        "core-js": "^2.4.1",
        "rxjs": "^5.2.0",
        "systemjs": "^0.19.47",
        "zone.js": "^0.8.5"
    },
    "devDependencies": {
        "@types/node": "^6.0.60",
        "concurrently": "^3.1.0",
        "lite-server": "^2.3.0",
        "typescript": "^2.2.2"
    }

tsconfig.json changes:

angular 2 to angular 4

Upgraded tsconfig.json content

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

Clean your node_module directory after altering the package & tsconfig files.

Run the below command in the node root directory which will make your Angular 2 application up and run in Angular 4 framework.

npm install && npm update && npm start

Key points for Angular 4 development

  • Don’t use extends onInit event or with any life cycle event.
  • Don’t use DefaultIterableDiffer,KeyValueDiffers#factories or IterableDiffers#factories.
  • Don’t use deep import as it is not a part of public API.
  • Don’t use Renderer.invokeElementMethod as it is removed. (No replacement as of now).
  • Rename template tag to ng-template.
  • Replace OpaqueTokens with InjectionTokens.
  • Remove ChangeDetectorRef argument from DifferFactory.create(…).
  • Replace ngOutletContext with ngTemplateOutletContext.
  • Replace CollectionChangeRecord with IterableChangeRecord.
  • Import BrowserAnimationsModule if you are using animation in your application.
  • Replace RootRenderer with RendererFactoryV2.
  • By default, novalidate will add to the FormModule. To revoke the native behavior add ngNoForm / ngNativeValidate.

Finally, now you are good to go with Angular 4.

Most Common Genesis Hooks and Filters – [WordPress]

I  will list all the most common Genesis hooks and filters used by me while developing a website without boring you with more contents.

For a basic overview of Genesis framework read here.

Genesis hooks filtersWhile customizing a WordPress,  use a child theme to make all your changes so your parent theme will remain clean.

Below mentioned are the common tasks achieved by Genesis hooks and filters while developing a website

  • Change number of columns in Footer.
  • Registering the custom sidebar
  • Hooking registered side bar to appropriate section
  • Change the default position of the primary menu
  • Remove the site title for Frontpage
  • Change the Copyrights content
  • Modify Breadcrumb Prefix and Format
  • Create a new custom post type.
  • Add the custom post to archive query.
  • Remove comments section on Custom post type

Add the following code snippets to the function.php of Genesis child theme.

Change number of columns in Footer

This line will be already there in the function.php. Increase or decrease the footer column count. You can see the respective number of footer sidebars registered in the widget area.

add_theme_support( 'genesis-footer-widgets', 3 );

Registering the custom sidebar

This code snippets let you create and register a custom sidebar which allows you to add the widgets to your website

genesis_register_sidebar( array(
 'id'          => 'Unique_id_for_custom_sidebar',
 'name'        => __( 'Name for Custom sidebar', 'theme_name' ),
 'description' => __( 'Description for custom sidebar', 'theme_name' )
));

Genesis Hooks to pull registered side bar to appropriate section

This Genesis hook method allows you to replace the sidebar content in the place of declared hook section
Refer here for Complete hook Guide.
You can add custom HTML wrapper to the custom sidebar with the help of “before” and “after” parameter.

add_action( 'genesis_header_right', 'menu_header_right');
function menu_header_right() { 
 if (is_active_sidebar( 'menu_header_right' ) ) { 
   genesis_widget_area( 'menu_header_right', array( 
    'before' => '<div class="menu_header_right widget-area"><div class="wrap">',
    'after' => '</div></div>', ) );
 }
}

Change the default position of the primary menu

These Genesis hooks allow you to change the default position of the primary menu by removing it from default position and add it to the appropriate section using the hook name.

here I remove the primary menu from its default position and add it to genesis_header_right

remove_action( 'genesis_after_header','genesis_do_nav' ) ;
add_action( 'genesis_header_right','genesis_do_nav' );

Remove the site title for Frontpage

Remove the title section of the page if it is front page using condition and remove action.

add_action( 'get_header', 'remove_title_frontpage' );
 function remove_title_frontpage() {
  if ( is_front_page()) {
  remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
 }
}

Change the Copyrights content

Here am used a filter to change the content of the existing footer credits function. Replace the echo command content with the appropriate HTML code.

add_filter( 'genesis_footer_creds_text', 'footer_creds_text' );
function footer_creds_text () {
	echo 'Custom HTML Code';
}

Modify Breadcrumb Prefix and Format

Modify the args[‘sep’] value to change the breadcrumb separator. You can also add the prefix to the breadcrumb. Here am adding a single space for better visibility and readability.

add_filter( 'genesis_breadcrumb_args', 'custom_breadcrumb' );
function custom_breadcrumb( $args ) {
  $args['labels']['prefix'] = '';
  $args['sep'] = ' > ';
  return $args;
}

Create a new custom post type

By creating a custom post type you can have a separate post section under WordPress admin menu with given name. The below code snippet will create custom post type “News” and add it to the WordPress admin menu. Change the values from “News” to require name if you want to create your own post type

add_action( 'init', 'create_custom_post_news' );

function create_custom_post_news() {

	$labels = array(
			'name' => __( 'News' ),
			'singular_name' => __( 'News' ),
			'all_items' => __('All News'),
			'add_new' => _x('Add new News', 'News'),
			'add_new_item' => __('Add new News'),
			'edit_item' => __('Edit News'),
			'new_item' => __('New News'),
			'view_item' => __('View News'),
			'search_items' => __('Search in News'),
			'not_found' =>  __('No News found'),
			'not_found_in_trash' => __('No News found in trash'),
			'parent_item_colon' => ''
			);

			$args = array(
			'labels' => $labels,
			'public' => true,
			'has_archive' => true,
			'exclude_from_search' => false,
			'menu_icon' => 'dashicons-admin-post',
	    'rewrite' => array('slug' => 'news'),
	     'taxonomies' => array( 'category', 'post_tag' ),
	      'supports'  => array( 'title', 'editor', 'thumbnail' , 'custom-fields', 'excerpt', 'comments', 'genesis-cpt-archives-settings' )
	 );

		register_post_type( 'news', $args);

}

Add the custom post to archive query

The newly created custom posts are not available in the search result of the website.  Add the newly created post to the archive with the following code.
Add the name given in register_post_type to the $query->set( ‘post_type’, array()) seperated by coma

add_action('pre_get_posts', 'query_post_type');
function query_post_type($query) {
  if($query->is_main_query()
    && ( is_category() || is_tag() )) {
        $query->set( 'post_type', array('post','news') );
  }
}

Remove comments section on Custom post type

Here I removed the comment section for the custom post type news.

add_action( 'init', 'remove_custom_post_comment' );

function remove_custom_post_comment() {
    remove_post_type_support( 'custom_post_name1', 'comments' );
}

These are the most commonly used hooks and filters while developing the normal website. Start developing your WordPress site with Genesis framework.

Genesis Framework Simple Reference Guide

In Genesis Framework Simple Reference Guide, Let’s start with a small intro about Genesis framework. Genesis framework is most flexible WordPress theme with more customization option. Genesis framework let you develop a site on WordPress in a way you want it. If you prefer WordPress for development this framework will give you more power and flexibility to develop the website. You can create your own customized theme using Genesis framework.

Genesis Framework Simple Reference Guide

 

Genesis framework is one-time purchase.

So, it’s worth buying and use it for multiple site development

Genesis Framework Simple Reference Guide

Genesis framework’s customization based on the hooks, filters. Using these options you can develop a website right from the scratch.

Hooks –   Inject the desired code at desired place without changing any WordPress default file.

Filters – allow you to modify/decorate  the existing function

Download and install the Genesis Theme and also install the child theme for Genesis and activate it.

Do all the customization in child themes function.php

This will keep the parent theme clean.

You can put your custom contents section in the required place by creating/registering the sidebar and  hook it in function.php ( child theme)

Refer the below image for the Genesis Hook guide

Genesis Framework Simple Reference Guide

the hook guide will help you to understand the names given to refer section of the website. Use this hook name to replace it with required custom contents.

Registering sidebar in Genesis

If you want to put your custom HTML code or content in place of the hook names, first you need to register the sidebar. The registered sidebar will appear in the Appearance – > Widget section of the WordPress.

Once the register sidebar appears in the widget section drag drop the require widget to the corresponding sidebar. You can also insert custom content blocks to the registered sidebar. These content block let you add custom codes.

genesis_register_sidebar( array(
 'id'          => 'menu_header_right',
 'name'        => __( 'Menu - Header Right', 'custom_name' ),
 'description' => __( 'custom_description.', 'custom_name' ),
) );

Add the above code snippet to the child themes function.php. Now you can see the new sidebar available in widget page with the name mentioned in the code.

Genesis Framework Simple Reference Guide

Hook the registered sidebar

After registering the sidebar,  we need to determine the place where the appropriate sidebar needs to be hooked.

add_action( 'genesis_header_right', 'menu_header_right');

function menu_header_right() {
 if (is_active_sidebar( 'menu_header_right' ) ) {
   genesis_widget_area( 'menu_header_right', array(
  'before' => '<div class="menu_header_right widget-area"><div class="wrap">',
  'after' => '</div></div>',
  ));
 }
}

This piece of code will hook the custom sidebar in the place of  “genesis_header_right”  as mentioned in the hook guide. With the help of  ‘before’ & ‘after’ attribute, you can wrap side bar with a custom HTML & class for styling.

Genesis Filters

Filters in Genesis tends access to modify the result of the existing function. I will explain the filter concept with the example.

In a breadcrumb, the default separator will be “/” and the breadcrumb will look like “Home/some_page” If I want to modify the default separator of the breadcrumb from “/” to “>” which can be achieved by filters.

function change_breadcrumb_separator( $args ) {
   $args['sep'] = ' > ';
   return $args;
}
add_filter( 'genesis_breadcrumb_args', 'change_breadcrumb_separator' );

Genesis general settings

Apart from the custom hooks & filters Genesis framework has some general settings.

  • Default site layout
  • Section for adding logo image
  • Breadcrumb options
  • Comment and Track Backs
  • content archive
  • Blog page template
  • Header / footer scripts.

These titles itself reveal the core purpose of the settings.

Genesis framework simple reference guide gave a basic idea about implementation for more hooks and filters visit the link below.

Most common hooks in genesis framework used for website development are available here.

Ready made themes also available in Genesis framework. Check it out!

Setup Sass In Create-React-App Without Ejecting

If you are using Create-React-App module to manage your no configuration react application development environment, this guide is to setup Sass compiler into the environment without ejecting the setup.

Setup Sass In Create-React-App Without Ejecting

We know create-react-app comes with eject option, which will deploy all automatic confirmation to manual configuration, Even for a professional developers, it will be a headache while doing an upgrade in future. Currently, the create-react-app doesn’t come with Sass compiler but we can integrate it out of the box. This tutorial is to explain how to setup Sass compiler in the existing/new application without ejecting.

Node and NPM needs to be installed before continuing following steps.

Step 1:

Create react app using create-react-app by following syntax

npm install -g create-react-app
create-react-app
my-app cd my-app/
npm start

Step 2:

Install node-sass-chokidar from npm

npm install --save node-sass-chokidar

Step 3:

Open package.json and add the following into scripts configuration.

"scripts": {
“build-css”: “node-sass-chokidar src/ -o src/”,
“watch-css”: “npm run build-css && node-sass-chokidar src/ -o src/ –watch –recursive” }

To watch sass and compile use following command

npm run watch-css


Step 4:
Sometimes we miss to run the command while running the application, So let’s add this watch css to the application run command.

"scripts": {
“build-css”: “node-sass-chokidar src/ -o src/”,
“watch-css”: “npm run build-css && node-sass-chokidar src/ -o src/ –watch –recursive”,

 

“start”: “react-scripts start”,

 

“build”: “react-scripts build”,

 

“start-js”: “react-scripts start”,

 

“start”: “npm-run-all -p watch-css start-js”,

 

“build”: “npm run build-css && react-scripts build”, }

now we don’t need to run separate commands to compile css.
Now running

npm start

and

npm run build

The command builds Sass files too.

Password protection to Website using htaccess

Password protection to Website using .htaccess is much easier than you ever think. This .htaccess authentication is not only for protection. As a developer, we always have multiple staging and dev environment before production. So authenticating those web servers with .htaccess is recommended.  Especially authenticating website with .htaccess will protect your environment from unauthorized access and unwanted SEO crawlings.

password protection htaccess

The site protected with htaccess will prompt for the authentication whenever it gets the hit. 

You can setup this .htaccess authentication within two simple steps.

  • Create encrypted password file.
  • Configure and map the password file in .htaccess

Creating an encrypted password file

First of all, create a new password file in the document root. This password file will hold all username with the respective password in encrypted format. Each encrypted username and password will be in new line. You can create your own encrypted username and password set without relying on any online tools.

$ htpasswd -nbm username Password

Copy the generated encrypted password to the password file.

 “myName:$2y$05$LwGdq19WrsD9w0VzFg0ZuetbL5/bw.S7yyDsjj1rXS13buZuWRBNW”

Note: Give desired random file name to the password file preceded with “.” .

htpasswd command executable is found in the apache/bin if you are using XAMPP in local dev machines. 

 

Configure and map the password file in .htaccess. 

We are almost done, the next thing is to add the below mention lines to your .htaccess file in the document root.

AuthType Basic
AuthName "My Protected Area"
AuthUserFile /absolute/path/to/password/file
Require valid-user

Note:

  • in addition use the full absolute path in the AuthUserFile . If you use relative path it will result in 500 Server error
  • If you use relative path / password file is not accessible  will result in 500 Server error

As a result, you can see an authentication popup whenever you hitting the URL freshly.

htaccess authentication

 

Know furthermore about the encryption options available.

Know furthermore about the htpasswd attributes

Angular directive that dynamically change input box width respective to the placeholder

Recently I get with a requirement to dynamically change input box width respective to the placeholder length. Now I am going to give a small heads up about use case and how I accomplished the task.

dynamically change input box length

Mission:

This application is developed with angularJs. As it has multiple language support placeholder also changes respective to the language. For some of the language, placeholder is not fully visible and for some of the language, the input box width was too large compared to the placeholder. So here the mission is to dynamically change the width of the input box respective to the placeholder length.

Mission Accomplished.

To accomplish the above mission I create a custom directive to change the width of the input box dynamically. Here the challenge is to find the width of the placeholder. The length property of the placeholder will give you the character count. Using that we can’t able to find the element width of the placeholder text.

In this directive, I used two key things to find the width of the placeholder text

  1. Font size – this will get the current font size used in the input box
  2.  <span> – Sudo element to calculate the actual element width of the placeholder

Calculating the Font Size

The below given js code will return the font size used in the input box which invoked this directive

var fontSize = parseFloat(window.getComputedStyle(elem[0], null).getPropertyValue('font-size'));

Pseudo Element

After that dynamically create a pseudo element with the style of above identified font size because this will help us to get the exact width of the placeholder content. Once the process of identifying the width is donr then the pseudo element got removed from the DOM.

Options

minwidth – in addition, this attribute will set the minimum width for the input box

bufferwidth – in addition, this attribute will add buffer with for input box for better readability and appearance.

Angular Directive to Dynamically Adjust input box width respective to the placeholder length

Code Snippet

See the Pen Angular Directive to Dynamically Adjust input box width respective to the placeholder length by icodefy (@icodefy) on CodePen.

You can find the working snippest here. Drop your suggestion and valuble comments.

Image zoom for e-commerce

Folks this time lets make some fun with implementing product image zoom for e-commerce site by using jQuery and customizing some jQuery plugins. Now lots of new frameworks and libraries available for the JavaScript. Even though jQuery still hold its better position. It is still used because of its flexibility and easy manipulation of the dom elements.

Mission

Today the mission is to implement a product zoom for a popular e-commerce site which is using jQery for dom manipulations.

Mission Accomplished

Lots of zoom plugins are available online wits lots of various features. Here am not going to give you a plugin and make you use the same for your implementation.

Am just going to explain how I implemented a product zoom by customizing already existing free plugins. sure, this combination and customization will give you a pro look for the product display page’s zoom image.

This customized product zoom has some remarkable function apart from the zooming product image. It holds the enlarged gallery and MegaEnlarge through which you can view the product more clear.

Just Download and go through the code I used simple HTML and Jquery in the way that everyone can understand. Go through the comments in zoom.js & index.html for more clarity.

Demo   |   Download

This jquery zoom implementation has four features

  1. Vertical Thumb image gallery carousel.
  2. Product Zoom
  3. Enlarged Gallery
  4. Mega Enlarge

Vertical Carousel

iZoom - ecommerce product zoomProduct Zoom

iZoom - ecommerce product zoom

Enlarged Gallery

iZoom - ecommerce product zoom

Mega Enlarge with PanZoom

 

Hotlink for demo and the working example links are dropped below just check it out!

Demo   |   Download

Plugin Credits

Product Zoom: ElevateZoom  [Free Plugin with numerous options]

Vertical Thum Gallery Carousel: rcarousel  [ Support horizontal/vertical ]

Enlarged Gallery: Fancybox

MegaEnlarge : ImagePannign.

The comments section is opened for valuable suggestion.

Happy Coding!