Michael Janea

 

 

NIVO SLIDER

The Nivo Slider is world renowned as the most beautiful and easy to use image slider on the market. There is literally no better way to make your website look totally stunning.

 

Demo

 

Dependencies

It requires the following plugins to work:

 

How to Install

  1. Extract the downloaded file (nivoSlider.zip)
  2. Copy the "nivoSlider" folder to "ckeditor/plugins/" folder
  3. Open the file "ckeditor/config.js"
  4. Add these lines:
    config.extraPlugins = 'widget,lineutils,nivoSlider';
    config.contentsCss = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.min.css';
    config.allowedContent = true;
    config.nivoSlider_fileManager = 'ckfinder';
    config.nivoSlider_ckfinder_version = 3;
    config.filebrowserImageBrowseUrl = '/ckeditor/file-manager/ckfinder.html';
    config.mj_variables_multiple_image_select = false;
    config.mj_variables_allow_html = false;
  5. Use the toolbargroupname: "NivoSlider" in your toolbar (see the example below)
    config.toolbar = [
        { name: 'insert', items: [ 'NivoSlider', 'Source' ] }
    ];
  6. Open the file "ckeditor.html"
  7. Configure the CKEditor's options to your own preferences
  8. Update the source path of "ckeditor.js"
    <script type="text/javascript" src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
  9. Make sure to clear your browser's cache
  10. Initialize the plugin in your front-end side by using the following code:
    $('.ckeditor.nivoSlider').nivoSlider();
  11. Done
  1. Extract the downloaded file (nivoSlider.zip)
  2. Copy the "nivoSlider" folder to "sites/all/modules/ckeditor/plugins/" folder
  3. Open the file "sites/all/modules/ckeditor/ckeditor.config.js"
  4. Add these lines:
    config.allowedContent = true;
    config.nivoSlider_fileManager = 'ckfinder';
    config.nivoSlider_ckfinder_version = 3;
    config.filebrowserImageBrowseUrl = '/ckeditor/file-manager/ckfinder.html';
    config.mj_variables_multiple_image_select = false;
    config.mj_variables_allow_html = false;
  5. Open the file "sites/all/modules/ckeditor/css/ckeditor.css"
  6. Add this line at the top:
    @import  url('https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.min.css');
  7. Open the file "sites/all/modules/ckeditor/plugins/nivoSlider/ckeditor.html"
  8. Configure the CKEditor's options to your own preferences
  9. Update the source path of "ckeditor.js"
    <script type="text/javascript" src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
  10. Make sure to clear your browser's cache
  11. Go to your Drupal's admin side -> Configuration -> Content Authoring -> CKEditor -> Profile -> Choose any profile you want and click "Edit" link -> Editor Appearance -> Available buttons -> Drag & drop nivoSlider icon to "Current Toolbar" -> click "Save"
  12. Initialize the plugin in your front-end side by using the following code:
    $('.ckeditor.nivoSlider').nivoSlider();
  13. Done
Not yet supported
This plugin is not compatible with IPS. IPS strips out some important HTML tags and attributes.

 

More Set-up Information

Option Description
config.nivoSlider_fileManager

file manager to be used when browsing for an image

Default Value: ckfinder
Choices: ckfinder, kcfinder, filemanager
config.nivoSlider_ckfinder_version

CKFinder version

Default Value: 2
Choices: 2, 3
config.nivoSlider_options

you can set here your frontend's Nivo slider options to properly preview it inside the CKEditor

config.filebrowserImageBrowseUrl

example:

CKFinder: config.filebrowserImageBrowseUrl = '/ckeditor/file-manager/ckfinder.html';
KCFinder: config.filebrowserImageBrowseUrl = '/ckeditor/kcfinder/browse.php?opener=custom&type=images';
Filemanager: config.filebrowserImageBrowseUrl = '/ckeditor/Filemanager-master/index.html?Type=Image';
elFinder: config.filebrowserImageBrowseUrl = '/ckeditor/elFinder/elfinder.html';

 

(see http://docs.ckeditor.com/#!/guide/dev_file_manager_configuration)
config.mj_variables_multiple_image_select

to switch on/off multiple adding of images (note: filemanager doesn't have this feature

Default Value: false
Choices: true, false
config.mj_variables_allow_html

to switch on/off escaping of HTML tags

Default Value: false
Choices: true, false

 

Logs

  • 1.5
    • ADDED: CKFinder 3 support. You may now choose from CKFinder 2 and 3
  • 1.4.2
    • FIXED: minor bug with CKFinder popup
  • 1.4.1
    • FIXED: escape HTML bug for new lines
  • 1.4
    • CHANGED: config.filebrowserBrowseUrl to config.filebrowserImageBrowseUrl
  • 1.3
    • ADDED: Drag and drop sorting
    • ADDED: elFinder support
  • 1.2
    • ADDED: Validation for required fields
    • FIXED: Tab index
    • FIXED: function() default parameter value bug for IE and Safari
    • FIXED: multiple instances bug
  • 1.1
    • ADDED: config.mj_variables_multiple_image_select variable to allow multiple adding of images (note: filemanager doesn't have this feature)
    • ADDED: image preview
    • CHANGE: use config.filebrowserImageBrowseUrl for browsing file manager instead of config.nivoSlider_kcFinderAbsolutePath and config.nivoSlider_fileManagerAbsolutePath
    • REMOVED: capability to add html tags
    • DROPPED: roxyfileman support
  • 1.0
    • Initial release

 

Package Details

INDIVIDUAL 

$7.00

 

  • Free updates for 6 months (?)
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. Nivo Slider

INDIVIDUAL
+ UPDATES

$21.00

$42.00

  • Free updates for 6 months
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. Nivo Slider

ULTIMATE BUNDLE

$99.00 (?)

$437.00

  • Free updates for 1 year (?)
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. MJ Bundle
      • MJ Accordion
      • MJ Breadcrumbs
      • MJ Buttons
      • MJ Carousel
      • MJ Tab
      • MJ Ribbons
      • MJ Word Art
      • MJ Accordion Banner
    2. Bootstrap Bundle
      • Bootstrap Breadcrumbs
      • Bootstrap Buttons
      • Bootstrap Carousel
      • Bootstrap Collapse
      • Bootstrap List Group
      • Bootstrap Panel
      • Bootstrap Tab
      • Bootstrap Alert
      • Bootstrap Grid
      • Bootstrap Dropdown Buttons
    3. Foundation Bundle
      • Foundation Accordion
      • Foundation Alert
      • Foundation Breadcrumbs
      • Foundation Buttons
      • Foundation Panel
      • Foundation Tab
    4. Social Media Bundle
      • Facebook Like
      • Facebook Share
      • Twitter Share
      • Google +1
      • Google+ Share
    5. jQuery UI Bundle
      • jQuery UI Accordion
      • jQuery UI Tabs
    6. Semantic UI Bundle
      • Semantic UI Accordion
      • Semantic UI Tab
      • Semantic UI Icons
    7. Text Shadow
    8. Box Shadow
    9. FontAwesome Premium
    10. Nivo Slider
    11. BlueImp Gallery
    12. YouTube Search

CONTACT ME

Your opinion is important to me. Take part on my goal to continuously improve my work by giving your suggestions and comments. You may also send your concerns or inquiries here.