Geeklog France
 

jQuery plugin

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.

Installation

Automatic install

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

Manual install

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. Rename the “public_htmln” folder to “jquery” and move it to /path/to/geeklog/public_html/

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

5. There's no step 5 - 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.

Upgrade

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.

Configuration

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

Core (remove from 1.3+)
Use CND for jQuery library Default is no, then jQuery plugin use the javascript included file version. Set it to yes if you want to use google or another as a content network delivery for jQuery.
CND url Give the url of the javascript file you want to use.
Plugins
Use lightbox plugin Do you want to load the lightbox plugin. Default is no.
Use feedback plugin Do you want to load the feeback plugin. Default is no.
Use date picker plugin (remove from 1.3+) Do you want to load the date picker plugin. Default is no.
Use color picker plugin (remove from 1.3+) Do you want to load the color picker plugin. Default is no.
Use code highlighter plugin (remove from 1.4+) Do you want to load the code highlighter plugin. Default is no.
Use ckeditor plugin (remove from 1.4+) Do you want to load the ckeditor plugin. You need to diseable the advanced editor (fckeditor) in the config (Users and Submissions). Default is no. CKEditor will be available for logged-in users in story submission, comment and in staticpages too for admin. To allow images upload your public_html/images/ckfinder/userfiles/ folder must be writable.
Lightbox
Lightbox width in px (without px)Default is 75
Lightbox height in px (without px)Default is 75

Usage

Users

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 create in your images/cache folder (make sure this folder exists and is writable) and display, 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]

Admin

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.

Developpers

Demo page for Menu color

Datepicker

<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>

Read more about Date picker in our forum.

colorpicker

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

Use these features in your plugins

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);

Changelog

Next version

  • [todo] convert to COM_createHTMLDocument

Version 1.4.0 Feb 6th 2013

  • [rem] CKEditor plugin, code highlighter
  • [new] Media gallery browser for forum plugin
  • [update] timthumb script 2.8.10

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

Authors

  • The jQuery plugin is made by ::Ben and release under the GPL.
Connecté en tant que : Guest (Guest)
plugins/jquery.txt · Dernière modification: 2013/02/24 09:12 par ::Ben
 

Download geeklog

Last version 2.0

Change language

Categories

  • Geeklog (40)
  • Plugins (62)
  • Thèmes (18)
  • User Functions





    Don't have an account yet? Sign up as a New User

    Lost your password?

    Annonces

    En ligne

    Guest Users: 21