How it Works

The plugin provides a method called tilezoom which is invoked on a container element.
It’s simple html and javascript. Plugin doesn’t use canvas element, that is why it works with IE browsers too!

Tiles for the image should be generated with OpenZoom tile generator. You can use our TileGenerator (modified version of PHP Deep Zoom Tools) for this.
Then specify XML file path or path to tiles directory with width and height image resolution options. That’s all what you need.

How to use

Be sure to include the JQuery library. And just add this code inside your page head:

<link type="text/css" rel="stylesheet" media="all" href="tilezoom/jquery.tilezoom.css" />
<script type="text/javascript" src="tilezoom/jquery.tilezoom.js"></script>

Commands

The tilezoom function can be called in the following form:

$(document).ready(function(){
  $('#container').tilezoom('command');
});

The following command strings are supported:

'init'   // init tilezoom, default method
'destroy' // destroy tilezoom and unbinds all events
'zoom'  // zoom image to the specified level

Basic examples of usage:

$(document).ready(function(){
  $('#container').tilezoom({
    width: 2835,
    height: 4289,
    path: 'dest/mona_lisa_files',
    mousewheel: true
  });
});

$(document).ready(function(){
  $('#container').tilezoom({
    xml: 'dest/2dollars.xml',
    mousewheel: true
  });
});

Options

The following default options are provided by the plugin. They can be overridden by passing an options object to the tilezoom method.

var defaults = {
  width: null, // original image width in pixels. *(required) if no xml file
  height: null, // original image height in pixels *(required) if no xml file
  path: null, // tiles directory. *(required) if no xml file
  xml: null, // xml file with settings generated with Deep Zoom Tools
  tileSize: 254, // tile size in pixels
  overlap: 1, // tiles overlap
  thumb: 'thumb.jpg', // thumbnail filename
  format: 'jpg', // image format
  speed: 500, // animation speed (ms)
  easing: 'swing', // animation easing (jquery easing function name)
  mousewheel: false, // requires mousewheel event plugin: http://plugins.jquery.com/project/mousewheel
  gestures: false, // requires hammer.js event plugin, https://github.com/hammerjs/hammer.js
  zoomToCursor: true, // stay the same relative distance from the edge when zooming
  offset: '20%', //boundaries offset (px or %). If 0 image move side to side and up to down
  dragBoundaries: true, // If we should constrain the drag to the boundaries
  minZoomLevel: 0, // can't zoom out past level [minZoom]
  maxZoomLevel: 9999, // can't zoom in past level [maxZoom]
  wrapZoom: true, // If we're at the high level of resolution, go back to the start level
  beforeZoom: function($cont) {}, // callback before a zoom happens
  onZoom: function($cont, progress) {}, // callback for each zoom animation step
  afterZoom: function($cont) {}, // callback after zoom has completed
  callBefore: function($cont) {}, // this callback happens before dragging starts
  callAfter: function($cont, coords) {}, // this callback happens at end of drag after released "mouseup"
  initialized: function($cont) {}, // this callback happens after tilezoom  has been fully initalized.
  navigation: true, // navigation container ([true: show nav controls] or [false: don't show nav controls] or [DOM selector to insert controls in])
  zoomIn: null, // zoomIn button
  zoomOut: null, // zoomOut button
  goHome: null, // goHome button, reset to default state
  toggleFull: null // toggleFull button
}

Documentation

Here you can find more info about jQuery TileZoom Plugin.

Demos and Examples

• 2 Dollars (7356 x 3146)
• Mona Lisa (2835 x 4289)

Try

On this TileGenerator demo page you can try to upload your own image and see jQuery TileZoom Plugin in action.

Download

Or you can download latest release on Github.

Changelog

jQuery TileZoom 1.2, 2015-December-02
———————–
Various modernization and flexibility enhancements ( Thanks to Michaël Fortin )
Most useful changes are:
– Mouse input is not disabled when a touchscreen is detected (mouse input didn’t work with Windows devices with seldom-used touchscreens).
– Using Hammer.js for more robust multi-touch input instead of dnaielglyde/TouchIt
– Added onZoom callback (called for each zoom step)
– Removed dependency on ES6 feature (yield, which didn’t bring much to the table anyway).

TileGenerator 1.01, 2014-July-10
———————–
– Fixed exif_read_data error.

jQuery TileZoom 1.1.1, 2014-February-04
———————–
– Added “initialized” callback which happens after tilezoom plugin has been fully initalized.

jQuery TileZoom 1.1, 2012-October-11
———————–
– Add touch gesture support (jQuery required dependency:
https://github.com/danielglyde/TouchIt). Supports pinch to zoom in and
out, double tapping to zoom and tap dragging
– Add a gestures property and sets to false (just like mousewheel).
– Add dragBoundaries boolean to optionally turn off constraining image
to boundaries while dragging
– Add double-click to zoom-in
– Fix unbind the mousemove on mouse up
– Add public resize() method if the container resizes
– Fix issue where certain mousewheels (or trackpads) were giving a
non-interger based delta were causing it to scale the holder to an
un-even level (images would fail)
– Add optimization to not re-zoom if we’re already at the correct level
– Add CSS support for default navigation always showing with gestures on
Thanks to Matt Moore for all of these issues fixed.
===
– Fix issue “position: fixed;” on some Android 2.x devices.
Thanks to ericente

The post jQuery TileZoom Plugin appeared first on WebCodingStudio.

This module integrates JQuery syntax Highlight plugin into Drupal for syntax highlighting of source code snippets in any Drupal contents.

Please feel free to check out and use our Drupal Highlighting module.

Third party library dependency

This module requires JQuery syntax Highlight plugin which was written before. By defalut this library is included in the module installation.

But you can also download the latest version from JQuery syntax Highlight plugin page and copy it into the module folder.

Language Support

Highlighting module supports the same languages as the original JQuery plugin: HTML, CSS, PHP and Javascript.

How to use

Drupal 6

After installing “Highlighting” module add new input filter “Highlighter”.
To highlight your code, you should select “Highlighter” filter for the node and then just use this native formats:

<pre class="code">source code</pre>

To see more usage examples please check the original article.

Drupal 7

In Drupal 7 the module doesn’t create separate input format but adds new filter which should be enabled for input format you plan to use with highlighting the code. For example you can enable this filter for “Full Html” input format.

Demo

See Drupal 6 demo page with css, html, php, js syntax highlighted.

Download

Please use the links below for Drupal 6 and Drupal 7 versions accordingly:

Download

To do

1. Create admin configuration form for changing plugin options: source, zebra, indent and list

The post Drupal Highlighting module appeared first on WebCodingStudio.

How to use

Be sure that you have include the JQuery library. And just add this code inside your page head:

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

Call Highlighter on any selected pre tag:

$(document).ready(function(){
  $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
});

Default params:

var defaults = {
  // show source code tab
  source: true,
  // show zebra
  zebra: true,
  //indents: "tabs" or "space"  
  indent: 'tabs',
  //ordered ("ol") or unordered ("ul') list
  list: 'ol'
}

And use such “pre” tags in page content to highlight code:

<pre class="code">default</pre>
<pre class="code" lang="js">js code</pre>
<pre class="code" lang="css">css code</pre>
<pre class="code" lang="html">html code</pre>
<pre class="code" lang="php">php code</pre>

Soon I plan to write a module for Drupal and plugin for WordPress based on this script.

Demo

See demo page with css, html, php, js syntax highlighted.

Download

Or you can download latest release on Github.

Changelog

Jquery Highlight 1.06, 2015-June-01
———————–
Added bash suppport, improved JS highlighting (Thanks again to owenBeresford).

Jquery Highlight 1.05, 2015-December-02
———————–
Many many many more PHP functions (Thanks again to owenBeresford).

Jquery Highlight 1.04, 2015-February-12
———————–
Added class, var, the PHP5 keywords, number formatting and others (Thanks to owenBeresford).

Jquery Highlight 1.03, 2015-February-11
———————–
Fixed incorrect comment parsing in PHP ( # )

Jquery Highlight 1.02, 2014-July-10
———————–
Added flex-* CSS keywords
//TODO Review a list of CSS properties and add missing to the plugin.

Jquery Highlight 1.1, 2013-May-23
———————–
– Added SQL highlighting (Thanks to ondrovic). Need to add nice color scheme.
– Introduced support of HTML5 syntax via valid “data-” attributes (Thanks to PieroWbmstr).

The post JQuery syntax Highlight plugin appeared first on WebCodingStudio.