“MVC Image Processing” Documentation by “askerov” v1.0


“MVC Image Processing”

Created: 22/11/2015
By: Rufat Askerov
Email: rufet.esgerov@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. C# Code Explanation

A) HTML Structure - top

This theme is a fixed layout with two columns. All of the information within the main content area is nested within a div with an id of "primaryContent". The sidebar's (column #2) content is within a div with an id of "secondaryContent". The general template structure is the same throughout the template. Here is the general structure.

HTML Structure

B) CSS Files and Structure - top

I'm using 6 CSS files in this theme. The first one is a default bootstrap library file. This file contains some general styling, such as anchor tag colors, font-sizes, etc.

The second file contains all of the specific stylings for the slider some inputs.Slider using example1,example4 and example7

The third file is common style for the page.

The fourth file for the jrop style in example3,example4

The fifth file for the color picker style in example3

The sixth file for the customizable select box with support for searching in example3


C) JavaScript - top

This theme imports nine Javascript files.

  1. jQuery
  2. jQuery blockUI
  3. Common (my custom scripts)
  4. Bootstrap
  5. Bootstrap slider
  6. Bootstrap colorpicker
  7. Select2
  8. jQuery jcrop
  9. Examples (my custom scripts)
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. jQuery blockUI is a plugin simulate synchronous behavior when using AJAX, without locking the browser.
  3. Most of the animation in this site is carried out from the common script. There are a few functions worth looking over.
    	
            $.blockUI.defaults.css = {
                    border: '1px solid #c0c0c0',
                    width: '200px',
                    height: '64px',
                    background: '#fff',
                    padding: '5px'
                };
            $(document).on('click', '.nav a', function () {
                    elementId = $(this).attr('href');
                    height = parseInt($('.nav').css('height').replace("px", "")) + 10;
                    $("html, body").animate({
                         scrollTop: $(elementId).offset().top - height
                    }, "slow");
                    return false;
                });
    
  4. Bootstrap is a front-end development framework.The framework contains global CSS settings with built-in components and extensible classes in the form of typography, navigation, buttons and much more
  5. Bootstrap slider is a plugin for slider (example1 , example4 and example7).
  6. Bootstrap colorpicker is a plugin for colorpicker (example3).
  7. Select2
  8. jQuery jcrop is a image cropping plugin (example3 and example4).
  9. Examples is my custom scripts for in this plugin.For example :
            $(document).ready(function () {
                $('#example1_contrast').slider({
                    formatter: function (value) {
                         return value;
                    }
                });
                $('#example1_brightness').slider({
                    formatter: function (value) {
                         return value;
                    }
                });
            });
            $(document).on('change', '.example2_sizeList ', function () {
                $('.example2_customSize').hide();
                if ($(this).val() == '-1') {
                    return;
                }
                if ($(this).val() == '0') {
                    $('.example2_customSize').show();
                } else {
                    example2_sample();
                }
            });
    

D) C# Code Explanation - top

In order to process image you must add this classes :

  1. ImageEditor
  2. ImageEditorResponse
  3. Utils
C# Structure

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Rufat Askerov

Go To Table of Contents