WordPress.org

Plugin Directory

Changeset 620835


Ignore:
Timestamp:
11/04/12 04:50:04 (18 months ago)
Author:
ericmann
Message:

Update to new v2.0 API.

Location:
js-banner-rotate
Files:
6 added
4 deleted
4 edited

Legend:

Unmodified
Added
Removed
  • js-banner-rotate/trunk/includes/jsbrotate.css

    r227504 r620835  
    11#banner-block { 
    2     margin:0; 
    3     padding:0; 
     2    margin: 0; 
     3    padding: 0; 
    44} 
    55 
    66.banner-container { 
    77    border: 1px solid #4B4B4B; 
    8     margin-bottom:20px; 
    9     position:relative; 
    10     clear:both; 
    11     width:100%; 
     8    margin-bottom: 20px; 
     9    position: relative; 
     10    clear: both; 
     11    width: 100%; 
    1212} 
    1313 
    1414.banner-top-links { 
    1515    height: 33px; 
    16     left:50%; 
    17     margin-left:-50px; 
    18     margin-top:-1px; 
    19     position:absolute; 
    20     top:0px; 
    21     width:100px; 
    22     z-index:1000; 
     16    left: 50%; 
     17    margin-left: -50px; 
     18    margin-top: -1px; 
     19    position: absolute; 
     20    top: 0px; 
     21    width: 100px; 
     22    z-index: 1000; 
    2323} 
    2424 
    2525.banner-top-links ul { 
    2626    margin: 0 10px; 
    27     padding:0; 
     27    padding: 0; 
    2828} 
    2929 
    3030.banner-top-links ul li.images-link { 
    31     float:left; 
    32     height:23px; 
    33     list-style-type:none; 
    34     margin-bottom:0; 
    35     width:100%; 
    36     text-align:center; 
    37     color:#fff; 
     31    float: left; 
     32    height: 23px; 
     33    list-style-type: none; 
     34    margin-bottom: 0; 
     35    width: 100%; 
     36    text-align: center; 
     37    color: #fff; 
    3838} 
    3939 
     
    4242    height: 23px; 
    4343    position: relative; 
    44     z-index:100px; 
    45     text-decoration:none; 
     44    z-index: 100px; 
     45    text-decoration: none; 
    4646} 
    4747 
    4848.banner-top-links ul li.images-link a { 
    49     color:#fff; 
    50     font-variant:small-caps; 
     49    color: #fff; 
     50    font-variant: small-caps; 
    5151} 
    5252 
    5353.home-banner { 
    5454    overflow: hidden; 
    55     position:relative; 
     55    position: relative; 
    5656} 
    5757 
    5858.banner { 
    5959    opacity: 0; 
    60     filter:alpha(opacity=0); 
    61     position:absolute; 
     60    filter: alpha(opacity = 0); 
     61    position: absolute; 
    6262} 
    6363 
    6464.banner-container ul.banner-links { 
    65     bottom:1px; 
    66     margin-bottom:0 !important; 
    67     padding:0 4px !important; 
    68     position:absolute; 
    69     right:38px; 
    70     z-index:10; 
     65    bottom: 1px; 
     66    margin-bottom: 0 !important; 
     67    padding: 0 4px !important; 
     68    position: absolute; 
     69    right: 38px; 
     70    z-index: 10; 
    7171} 
    7272 
    7373.banner-container ul.banner-links li { 
    74     color:#AB106C; 
    75     cursor:pointer; 
    76     display:block; 
    77     float:left; 
    78     font-family:georgia,'times new roman',serif; 
    79     font-size:120%; 
    80     margin:0 !important; 
    81     padding:2px 4px 4px; 
     74    color: #AB106C; 
     75    cursor: pointer; 
     76    display: block; 
     77    float: left; 
     78    font-family: georgia, 'times new roman', serif; 
     79    font-size: 120%; 
     80    margin: 0 !important; 
     81    padding: 2px 4px 4px; 
    8282} 
    8383 
    8484.banner-container ul.banner-links li.current { 
    85     background:#AB106C none repeat scroll 0 0; 
    86     color:#FFFFFF; 
     85    background: #AB106C none repeat scroll 0 0; 
     86    color: #FFFFFF; 
    8787} 
    8888 
    8989#jsBanners img { 
    90     max-width:99.9%; 
    91     width:auto !important; 
    92     width:99.9%; 
     90    max-width: 99.9%; 
     91    width: auto !important; 
     92    width: 99.9%; 
    9393} 
     94 
    9495#banner-block .banner-top-links .image-frame { 
    95     height:100%; 
    96     width:100%; 
     96    height: 100%; 
     97    width: 100%; 
    9798} 
     99 
     100#rotating-images .top-layer, 
     101#rotating-images .bottom-layer { 
     102 
     103} 
     104 
     105#rotating-images .top-layer { 
     106    z-index: 10; 
     107} 
  • js-banner-rotate/trunk/includes/jsbrotate.js

    r227504 r620835  
    1 window.onload = jsbinit; 
     1/** 
     2 * Object that controls the image rotation. 
     3 * 
     4 * @param options Array of options, including the fade duration, interval timeout, and images to rotate through. 
     5 * @constructor 
     6 */ 
     7var ImageRotator = function (options) { 
     8    var currentImage = 0, 
     9        fadeDuration = 4, 
     10        fadeInterval = 8, 
     11        images = [], 
     12        self = this; 
    213 
    3 function jsbinit() { 
    4     var allBanners = document.getElementById("jsBanners").getElementsByTagName("span"); 
    5     var totalBanners = allBanners.length; 
    6     var lastBanner = totalBanners - 1; 
    7     show = new Array(); 
    8     hide = new Array(); 
    9     for(var i = 0; i < allBanners.length; i++) { 
    10         show[i] = new YAHOO.util.Anim(allBanners[i], {opacity:{to:1}}, imgfade); 
    11         hide[i] = new YAHOO.util.Anim(allBanners[i], {opacity:{to:0}}, imgfade); 
     14    /** 
     15     * Attempt to preload images into the browser so large images won't cause a delay when rotated through. 
     16     */ 
     17    this.preloadImages = function () { 
     18        var i, 
     19            preload_image_obj; 
     20 
     21        if (document.images) { 
     22            for (i = 0; i < images.length; i += 1) { 
     23                preload_image_obj = new Image(); 
     24                preload_image_obj.src = images[i]; 
     25            } 
     26        } 
     27    }; 
     28 
     29    /** 
     30     * Fade the images. 
     31     * 
     32     * - Copy the image in the foreground to the background 
     33     * - Hide the foreground image 
     34     * - Replace the hidden foreground image with the next in the rotation 
     35     * - Fade the foreground image back in. 
     36     */ 
     37    this.fadeImage = function () { 
     38        var imageEl = jQuery('#rotating-images'), 
     39            top = imageEl.find('.top-layer'), 
     40            bottom = imageEl.find('.bottom-layer'); 
     41 
     42        currentImage += 1; 
     43 
     44        if (currentImage >= images.length) { 
     45            currentImage = 0; 
     46        } 
     47 
     48        bottom.css('backgroundImage', top.css('backgroundImage')); 
     49        top.stop().hide(); 
     50        top.css('backgroundImage', 'url(' + images[currentImage] + ')'); 
     51        top.fadeIn(fadeDuration * 1000, function () { 
     52            setTimeout(self.fadeImage, fadeInterval * 1000); 
     53        }); 
     54    }; 
     55 
     56    if ('undefined' !== typeof options.images) { 
     57        images = options.images; 
    1258    } 
    13     var k = 0; 
    14     for(var j=0; j < allBanners.length - 1; j++) { 
    15         createListener(j);                           
     59 
     60    if ('undefined' !== typeof options.display) { 
     61        self.fadeInterval = options.display; 
    1662    } 
    17     show[lastBanner].onComplete.subscribe(function() {createNext(lastBanner, true);}); 
    18      
    19     show[0].animate(); 
    20 } 
    21 function createNext(id, last) { 
    22     if(last==false) { 
    23         setTimeout(function() { 
    24             hide[id].animate(); 
    25             show[(id+1)].animate(); 
    26             }, imgdisp); 
    27     } else { 
    28         setTimeout(function() { 
    29             hide[id].animate(); 
    30             show[0].animate(); 
    31             }, imgdisp); 
     63 
     64    if ('undefined' !== typeof options.fade) { 
     65        fadeDuration = options.fade; 
    3266    } 
    33 } 
     67}; 
    3468 
    35 function createListener(id) { 
    36     show[id].onComplete.subscribe(function() {createNext(id, false);}); 
    37 } 
     69 
     70jQuery(document).ready(function () { 
     71    var options = { 
     72        images: window.images, 
     73        display: window.jsb_options.display, 
     74        fade: window.jsb_options.fade 
     75    }, 
     76        rotator = new ImageRotator(options); 
     77 
     78    // The first image in the rotation will always be loaded. Attempt to load the others so the queue moves quickly. 
     79    rotator.preloadImages(); 
     80 
     81    setTimeout(rotator.fadeImage, window.jsb_options.display * 1000); 
     82}); 
  • js-banner-rotate/trunk/jsbrotate.php

    r512639 r620835  
    11<?php 
    2 /* 
    3 Plugin Name: JS Banner Rotate 
    4 Plugin URI: http://www.jumping-duck.com/wordpress/ 
    5 Description: Create a JavaScript-driven rotating banner image on your WordPress site. 
    6 Version: 1.3.3 
    7 Author: Eric Mann 
    8 Author URI: http://www.eamann.com 
    9 License: GPLv2+ 
     2/** 
     3 * Plugin Name: JS Banner Rotate 
     4 * Plugin URI: http://jumping-duck.com/wordpress/plugins/js-banner-rotate/ 
     5 * Description: Create a JavaScript-driven rotating banner image on your WordPress site. 
     6 * Version: 2.0 
     7 * Author: Eric Mann 
     8 * Author URI: http://eamann.com 
     9 * License: GPLv2+ 
    1010 */ 
    1111 
    12 /* Copyright 2009-10  Eric Mann  (email : eric@eamann.com) 
    13  
     12/** 
     13 * Copyright 2009-12  Eric Mann, Jumping Duck Media 
     14 * 
    1415 * This program is free software; you can redistribute it and/or modify 
    15  * it under the terms of the GNU General Public License as published by 
    16  * the Free Software Foundation; either version 2 of the License, or 
    17  * (at your option) any later version. 
    18  
     16 * it under the terms of the GNU General Public License, version 2 or, at 
     17 * your discretion, any later version, as published by the Free 
     18 * Software Foundation. 
     19 * 
    1920 * This program is distributed in the hope that it will be useful, 
    2021 * but WITHOUT ANY WARRANTY; without even the implied warranty of 
    2122 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the 
    2223 * GNU General Public License for more details. 
    23  
     24 * 
    2425 * You should have received a copy of the GNU General Public License 
    2526 * along with this program; if not, write to the Free Software 
     
    2728 */ 
    2829 
    29 /* 
    30  * This plugin uses Javascript libraries originally developed by Yahoo. 
    31  * Please refer to http://developer.yahoo.com/yui/ for more information on the YUI. 
    32  */ 
    33  
    3430/* Define plugin variables */ 
    35 if( ! defined( 'JSB_VER' )) 
    36     define( 'JSB_VER', '1.3.1' ); 
    37 if( ! defined( 'JSB_BASE' )) 
    38     define( 'JSB_BASE' , dirname(__FILE__) ); 
    39 if( ! defined( 'JSB_DIRECTORY' )) 
    40     define( 'JSB_DIRECTORY' , get_option('siteurl') . '/wp-content/plugins/js-banner-rotate' ); 
    41 if( ! defined( 'JSB_INC' )) 
    42     define( 'JSB_INC' , JSB_DIRECTORY . '/includes' ); 
    43 if( ! defined( 'JSB_BASE_INC' )) 
    44     define( 'JSB_BASE_INC', JSB_BASE . '/includes' ); 
     31define( 'JSB_DIRECTORY',     plugin_dir_url( __FILE__ ) ); 
     32define( 'JSB_INC_DIRECTORY', dirname( __FILE__) . '/' ); 
    4533 
    4634/* Check to see if this is a new installation or an upgrade */ 
    47 $current_ver = get_option('jsb_version'); 
    48 update_option('jsb_version', JSB_VER); 
     35delete_option( 'jsb_version' ); 
     36update_option( 'js-banner-rotate-core', 2, '', 'no' ); 
    4937 
    50 /* 
    51  * Sets admin warnings regarding required PHP and WordPress versions. 
     38require_once( 'lib/class.js-banner-rotate.php' ); 
     39require_once( 'lib/class.jsb-banner.php' ); 
     40 
     41/** 
     42 * Shortcut function to manually invoke the rotating banner from PHP rather than through a shortcode. 
     43 * 
     44 * The options array: 
     45 * <code> 
     46 * $options = array( 
     47 *     'height'  => ... 
     48 *     'width'   => ... 
     49 *     'link'    => ... 
     50 *     'images'  => ... 
     51 *     'numvis'  => true/false 
     52 *     'imgdisp' => ... 
     53 *     'imgfade' => ... 
     54 * ); 
     55 * </code> 
     56 * 
     57 * @param array $options 
    5258 */ 
    53 function _jsb_wp_warning() { 
    54     $data = get_plugin_data(__FILE__); 
    55      
    56     echo '<div class="error"><p><strong>' . __('Warning:') . '</strong> ' 
    57         . sprintf(__('The active plugin %s is not compatible with your WordPress version.') .'</p><p>', 
    58             '&laquo;' . $data['Name'] . ' ' . $data['Version'] . '&raquo;') 
    59         . sprintf(__('%s is required for this plugin.'), 'WordPress 2.8 '); 
    60     echo '</p></div>'; 
     59function jsbrotate( $options ) { 
     60    JS_Banner_Rotate::jsbrotate( $options ); 
    6161} 
    6262 
    63 // START PROCEDURE 
     63// Wireup actions 
     64add_action( 'wp_enqueue_scripts',   array( 'JS_Banner_Rotate', 'enqueue_scripts' ) ); 
    6465 
    65 // Check required WordPress version. 
    66 if ( version_compare(get_bloginfo('version'), '2.8', '<')) { 
    67     add_action('admin_notices', '_jsb_wp_warning'); 
    68 } else { 
    69     include_once ( JSB_BASE_INC . '/core.php' ); 
    70 } 
     66// Wireup shortcodes 
     67add_shortcode( 'jsbrotate',         array( 'JS_Banner_Rotate', 'shortcode_handler' ) ); 
    7168?> 
  • js-banner-rotate/trunk/readme.txt

    r512639 r620835  
    44Tags: javascript, banner, header, image rotate, yui 
    55Requires at least: 2.8 
    6 Tested up to: 3.2 
    7 Stable tag: 1.3.3 
     6Tested up to: 3.5 
     7Stable tag: 2.0 
    88License: GPLv2+ 
    99 
     
    1212== Description == 
    1313 
    14 This plugin uses the Yahoo! User Interface (YUI) Javascript libraries to create a platform-agnostic rotating banner image for your website.  Unlike similar Flash implementations, this feature will work even on Flash-disabled web browsers.   
     14This plugin uses JavaScript to create a platform-agnostic rotating banner image for your website.  Unlike similar Flash implementations, this feature will work even on Flash-disabled web browsers. 
    1515 
    1616Note that you will need to upload your images separately using WordPress' built-in image gallery feature.   
     
    2929= Accepted Arguments = 
    3030 
    31 The shortcode/template tag accepts several parameters: 
    32  
    33 * As many image URLs as you want: [jsbrotate images=http://blog.url/image1.jpg|http://blog.url/image2.jpg /] 
    34 * Slideshow link: [jsbrotate link=http://whateveryouwant.com /] 
    35 * Image height and width: [jsbrotate height=200 width=900 /] 
    36 * Image display and fade time: [jsbrotate imgdisp=8 imgfade=4 /] 
    37  
    38 The default height and width is whatever is set for "large" images in the WordPress Media administration section (usually 1024x1024).  You must override these in the shortcode if you want to specify different values. 
    39  
    40 You can toggle the title display - the title defaults to "Home." 
     31The shortcode/template tag accepts several parameters ... 
     32 
     33**Images** 
     34 
     35Specify your images in a pipe-delimited list: 
     36 
     37` 
     38images=http://blog.url/image1.jpg|http://blog.url/image2.jpg 
     39` 
     40 
     41**Banner Link** 
     42 
     43Link your entire banner to a specific page on the site or to an external URL: 
     44 
     45` 
     46link=http://whateveryouwant.com 
     47` 
     48 
     49**Banner Title** 
     50 
     51Give your banner a title so people know what it's about: 
     52 
     53` 
     54titlevis=true title=Portfolio 
     55` 
     56 
     57**Height and Width** 
     58 
     59Specify the dimensions of your banner.  All images not already at these proportions will be stretched/scaled to fix: 
     60 
     61` 
     62height=500 width=230 
     63` 
     64 
     65**Display and Fade Duration** 
     66 
     67Manage the length of time each image is displayed on the screen and the length of time it takes to fade between them: 
     68 
     69` 
     70imgdisp=8 imgfade=3 
     71` 
    4172 
    4273== Frequently Asked Questions == 
     
    4980 
    5081You can have as few as 1 image (which is a bit boring) and as many as you want in the rotation. 
    51  
    52 Previous versions of the plug-in have limited you to just 5 images ... 
    5382 
    5483Just make sure your list of images is pipe-delimited (use the | key to separate the URLs). 
     
    99128*You can only have one rotating banner on any given page.  If you're using the banner in your posts, only the first post on the page will rotate!* 
    100129 
     130= I think I found a bug! / I want to request a change! = 
     131 
     132If you thing you've found something going wrong with the plugin, or if there's a feature you'd like added or changed, please create a new issue on GitHub: https://github.com/ericmann/JS-Banner-Rotate/issues 
     133 
     134= Where can I go for more support? = 
     135 
     136This plugin is offered without any warranty or express user support. 
     137 
     138If you've found a bug, please report it on GitHub (https://github.com/ericmann/JS-Banner-Rotate/issues). 
     139 
     140If you can't figure out how to do something please feel free to ask around in the community support forums (http://wordpress.org/support/plugin/js-banner-rotate). 
     141 
    101142== Screenshots == 
    102143 
     
    106147 
    107148== Changelog == 
     149 
     150= 2.0 = 
     151* Refactor display system to use a pluggable template. 
     152* Deprecate older `image1=` API. 
     153 
     154= 1.4 = 
     155* Switch to jQuery (issue 1) 
     156* Fix white background image (issue 2) 
     157* Contextual script inclusion and execution (issue 3) 
     158* Upgrade to PHP5 OOP syntax 
    108159 
    109160= 1.3.3 = 
     
    158209== Upgrade Notice == 
    159210 
     211= 2.0 = 
     212The old `image1=` syntax is now deprecated. Please upgrade to using a pipe-delimited list passed to `images=`. 
     213 
     214= 1.4 = 
     215New versions require PHP5. If your system is not running PHP5, the plugin will not activate properly! 
     216 
    160217= 1.3.1 = 
    161218Fixes security vulnerability. Upgrade immediately. 
Note: See TracChangeset for help on using the changeset viewer.