jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way developpers write JavaScript.

JQuery plugin for geeklog provide tools as lightbox, date picker, color picker, Feedback, syntax highlighter… which can be use in other plugins or directly in stories or static pages.

Download jQuery plugin

As Geeklog 1.8.0 provide now the jQuery library, the plugin from version 1.3+ will only provide ready to use tools.

1. As one of your site's Root users

• visit {site_url}/admin/plugins.php
• Upload the plugin archive (.zip) : Select it on your HD and press Upload.

2. If the installation completed successfully you are ready to go. Otherwise, check the geeklog error.log for errors.

• <geeklog_dir>/logs/error.log

1. Unpack the tarball in /path/to/geeklog/plugins/ (or unpack it on your PC and then upload the “jquery” folder to that directory)

2. Rename the “admin” folder to “jquery” and move it to /path/to/geeklog/public_html/admin/plugins/

3. Log into your site as the Admin user, select “Plugins” from the “Admins only” block, find the “jquery” entry and click on “install”

4. There's no step 4 - the plugin should be ready for use now. Check that you have a autotag in the list of available HTML tags when you create a new story or comment.

To upgrade from an earlier version, please upload all the files from the archive to their respective location, replacing the older versions of the same files or use the automatic way (see Automatic install above).

Once you've done that, log into your site as a member of the Root group (e.g. as user Admin). Go to the Admin's “Plugins” panel.

You can upgrade just by clicking the icon “Update” or click on the “edit” link for the jQuery plugin. You will be presented with an “Update” button. Click that button and you should get a message that the upgrade was successful. That's all.

jQuery plugin configuration is online. Visit {site_url}/admin/configuration.php

Lightbox

JQuery plugin provide a lightbox tool. To show a picture from your server (same domain name) or from another domain name in a lightbox, use the lightbox autotag with the picture url.

With jquery plugin version 1.3+ you can now set width and height parameters (in pixel or auto) for the thumbnail width and height. You can also add a title parameter.

If the picture url is from one of the allowed sites:

• flickr.com,
• staticflickr.com,
• picasa.com,
• img.youtube.com,
• upload.wikimedia.org,
• photobucket.com,
• imgur.com,
• imageshack.us,
• tinypic.com,
• googleusercontent.com,
• twimg.com

a thumbnail is created and displayed, otherwise you will need to set a title parameter.

See my nice picture

[lightbox : http://geeklog.fr/mediagallery/mediaobjects/orig/5/5_garden14.jpg]
[lightbox : http://geeklog.fr/mediagallery/mediaobjects/orig/5/5_garden14.jpg width:75 height:75 See my nice picture]

Code highlighter

Everything between < pre >< code > and < /pre >< /code > will be render with the code highlighter. EG: You can set class=“php” or class=“js” in the code tag to use php brush or js brush.

See available brushes http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

With icons on the right, you can View source, Copy to clipboard or Print code.

CKEditor Logged-in users can submit story and post comment with advanced editor.

Feedback

Admin can use the feedback plugin. This plugin allow you to display a feedback form for your site users. To display the feedback tab, witch control the feedback form, you need at less to add the following code to the page where you want the tab appear. You can add it to a block, a static page, a story or to your template.

<div id="contact"></div>

Javascript will replace this div by the Feedback tab.

CKEditor Admin can post story, comment and staticpage with advanced editor.

To use CKEditor, turn off the advanced editor in the config area Users and submissions » Advanced Editor and turn on CKEditor in the config area » jQuery » Use CKEditor

• Menu color
• Date picker

<script type="text/javascript">
jQuery(function() {
        jQuery('#From').DatePicker({
                format:'m/d/Y',
                date: jQuery('#From').val(),
                current: jQuery('#From').val(),
                starts: 1,
                position: 'top',
                onBeforeShow: function(){
                        jQuery('#From').DatePickerSetDate(jQuery('#From').val(), true);
                },
                onChange: function(formated){
                        jQuery('#From').val(formated);
                        jQuery('#From').DatePickerHide();
                }
        });
        jQuery('#to').DatePicker({
                format:'m/d/Y',
                date: jQuery('#to').val(),
                current: jQuery('#to').val(),
                starts: 1,
                position: 'top',
                onBeforeShow: function(){
                        jQuery('#to').DatePickerSetDate(jQuery('#to').val(), true);
                },
                onChange: function(formated){
                        jQuery('#to').val(formated);
                        jQuery('#to').DatePickerHide();
                }
        });
});
</script>

<form>
    <p>From : <input type="text" maxlength="10" size="10" value="04/01/2011" name="From" id="From" class="inputDate" /></p>
    <p>&nbsp;</p>
</form>

<script type="text/javascript">
      jQuery(document).ready(
        function()
        {
          jQuery("#primary_color").attachColorPicker();
        });
</script>
<input type="text" value="#CCFF00" id="primary_color" />

With jquery plugin 1.3 datepicker and color picker config where remove from the config. If you need to use these features in your plugins, you can use the files from the jquery plugin like this:

// Date picker
global $_SCRIPTS;
$_SCRIPTS->setJavaScriptLibrary('jquery');
$strext = '/jquery/datepicker/datepicker.js';
$_SCRIPTS->setJavaScriptFile('jquery_datepicker', $strext);
$css = '/jquery/datepicker/datepicker.css';
$_SCRIPTS->setCSSFile('jquery_datepicker_css', $css, true);


// color picker
global $_SCRIPTS;
$_SCRIPTS->setJavaScriptLibrary('jquery');
$strext = '/jquery/colorpicker/ColorPicker.js';
$_SCRIPTS->setJavaScriptFile('jquery_colorpicker', $strext);
$css = '/jquery/colorpicker/ColorPicker.css';
$_SCRIPTS->setCSSFile('jquery_colorpicker_css', $css, true);

Next version

• [rem] CKEditor plugin

Version 1.3.1 Jan. 20th, 2012

• [new] Lightbox: hiroron Image file Check
• [fix] Lightbox title param was not display
• [fix] update timthumb to version 2
• [fix] Default external images are now from flickr.com, staticflickr.com, picasa.com, img.youtube.com, upload.wikimedia.org, photobucket.com, imgur.com, imageshack.us, tinypic.com, googleusercontent.com, twimg.com

Version 1.3 June 24th 2011

• [update] to geeklog 1.8.0
• [update] ckeditor 3.6.1
• [update] timthumb script 1.28
• [new] lightbox autotag allow external image but need a title as alternative. External images from flickr.com, picasa.com, blogger.com, wordpress.com, img.youtube.com, upload.wikimedia.org do not need a title.
• [new] lightbox auto tag support width and height parameters for thumbnail. Default size is set in config.
• [new] Remove datepicker and color picker usage in config

Version 1.2 Dec 14th 2010

• [new] Codehighlighter plugin
• [new] ckeditor 3.6.1 + ckfinder plugin

Version 1.1 Dec 4th 2010

• [update] to jQuery 1.4.4
• [new] Feedback plugin
• [fix] lightbox image path issue

Version 1.0.0 Initial release May 6th 2010

• [new]Include jQuery 1.4.2
• [new] Lightbox plugin
• [new] Date picker plugin
• [new] Color picker lightrbox

• The jQuery plugin is made by ::Ben and release under the GPL.