Michael Janea

 

 

BLUEIMP GALLERY

blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.

It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading and can be extended to display additional content types.

 

Upcoming features:

  • Image Gallery
  • Video Gallery

 

Demo

 

Dependencies

It requires the following plugins to work: CKFinder, Widget and Line Utilities.

 

How to Install

  1. Extract the downloaded file (blueImpGallery.zip)
  2. Copy the "blueImpGallery" folder to "ckeditor/plugins/" folder
  3. Open the file "ckeditor/config.js"
  4. Add these lines:
    config.extraPlugins = 'widget,lineutils,blueImpGallery';
    config.filebrowserImageBrowseUrl = '/ckeditor/file-manager/ckfinder.html';
    config.contentsCss = 'https://blueimp.github.io/Gallery/css/blueimp-gallery.css';
    config.allowedContent = true;
    config.blueImpGallery_fileManager = 'ckfinder';
    config.blueImpGallery_fileManager_directory = 'http://your-domain.com/ckeditor/file-manager/';
    config.blueImpGallery_thumbnail_directory = 'http://your-domain.com/ckeditor/file-manager/thumbs/';
    config.blueImpGallery_thumbnail_width = 64; //for filemanager only
    config.blueImpGallery_thumbnail_height = 64; //for filemanager only
    config.blueImpGallery_bootstrap = false;
    config.blueImpGallery_ckfinder_version = 3;
  5. Use the toolbargroupname: "BlueImpGallery" in your toolbar (see the example below)
    config.toolbar = [
        { name: 'insert', items: [ 'BlueImpGallery', '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. Done
  1. Extract the downloaded file (blueImpGallery.zip)
  2. Copy the "blueImpGallery" 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.filebrowserImageBrowseUrl = '/ckeditor/file-manager/ckfinder.html';
    config.blueImpGallery_fileManager = 'ckfinder';
    config.blueImpGallery_fileManager_directory = 'http://your-domain.com/ckeditor/file-manager/';
    config.blueImpGallery_thumbnail_directory = 'http://your-domain.com/ckeditor/file-manager/thumbs/';
    config.blueImpGallery_thumbnail_width = 64; //for filemanager only
    config.blueImpGallery_thumbnail_height = 64; //for filemanager only
    config.blueImpGallery_ckfinder_version = 3;
  5. Open the file "sites/all/modules/ckeditor/css/ckeditor.css"
  6. Add this line at the top:
    @import  url('https://blueimp.github.io/Gallery/css/blueimp-gallery.css');
  7. Open the file "sites/all/modules/ckeditor/plugins/blueImpGallery/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 blueImpGallery icon to "Current Toolbar" -> click "Save"
  12. 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.blueImpGallery_fileManager

file manager to be used when browsing for an image

Default Value: ckfinder
Choices: ckfinder, kcfinder, filemanager, elfinder
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.blueImpGallery_fileManager_directory

path (root) where your images are saved by your file manager

example:

CKFinder: config.blueImpGallery_fileManager_directory = 'http://your-domain.com/ckeditor/file-manager/';
KCFinder: config.blueImpGallery_fileManager_directory = '/ckeditor/kcfinder/upload/';
Filemanager: config.blueImpGallery_fileManager_directory = 'http://your-domain.com/ckeditor/Filemanager-master/userfiles/';
elFinder: no need to use this configuration
config.blueImpGallery_thumbnail_directory

path where your thumbnails are saved by your file manager

example:

CKFinder: config.blueImpGallery_thumbnail_directory = 'http://your-domain.com/ckeditor/file-manager/thumbs/';
KCFinder: config.blueImpGallery_thumbnail_directory = '/ckeditor/kcfinder/upload/.thumbs/';
Filemanager: config.blueImpGallery_thumbnail_directory = 'http://your-domain.com/ckeditor/Filemanager-master/userfiles/_thumbs/';
elFinder: no need to use this configuration
config.blueImpGallery_bootstrap

where to use Bootstrap BlueImp Gallery markup or not

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

width of your thumbnail

NOTE: this configuration is only applicable for Filemanager
config.blueImpGallery_thumbnail_height

height of your thumbnail

NOTE: this configuration is only applicable for Filemanager
config.blueImpGallery_ckfinder_version

CKFinder version

Default Value: 2
Choices: 2, 3

 

Logs

  • 1.2
    • ADDED: CKFinder 3 support. You may now choose from CKFinder 2 and 3
  • 1.1
    • ADDED: elFinder support
    • ADDED: config.blueImpGallery_fileManager_directory variable to easily browse file manager folder
    • ADDED: config.blueImpGallery_thumbnail_width variable for filemanager is using this as prefix
    • ADDED: blueImpGallery_thumbnail_height variable for filemanager is using this as prefix
    • ADDED: use file name as default caption
    • CHANGED: config.filebrowserBrowseUrl to config.filebrowserImageBrowseUrl
    • FIXED: multiple deletion bug
  • 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. BlueImp Gallery

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. BlueImp Gallery

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.