WordPress.org

Plugin Directory

Changeset 375452


Ignore:
Timestamp:
04/21/11 01:37:40 (7 years ago)
Author:
Thorned Rose
Message:

1.4 Update

  • Changed shortcode to [nggvid]nggvid.
  • Streamlined javascript so it's more efficient.
  • Now works with all the same video formats as ShadowboxJS without the need to add new individual formats.
Location:
ngg-video-extend/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • ngg-video-extend/trunk/ngg-video-extend.js

    r357044 r375452  
     1/** 
     2 *  
     3 * ngg-video-extend.js - Simple replacement at it's finest ;) 
     4 *  
     5 */ 
     6 
    17jQuery(document).ready(function($) { 
     8   
    29  $(".ngg-gallery-thumbnail a").each(function (arr){ 
    3      
    4     var vTitle = $(this).attr("title"); 
    5     var vCode = vTitle.substring(vTitle.indexOf("["), vTitle.indexOf("]")+1); 
     10    var theText = $(this).attr("title"); 
     11    if(theText.indexOf("[nggvid]") > -1) { 
     12        var theURL = theText.substring(theText.indexOf("[nggvid]") + 8, theText.indexOf("[/nggvid]")); 
     13        var theReplacement = theText.replace("[nggvid]" + theURL + "[/nggvid]", ""); 
    614     
    7     if(vCode == "[vimeo]") { 
    8         var vURL = vTitle.substring(vTitle.indexOf("[vimeo]")+7, vTitle.indexOf("[/vimeo]")); 
    9         $(this).attr("rel","shadowbox;width=480;height=390"); 
    10         $(this).attr("href", vURL); 
    11          
    12         var replacedTitle = $(this).attr("title").replace("[vimeo]" + vURL + "[/vimeo]", ""); 
    13         $(this).attr("title", replacedTitle); 
    14     } 
    15     else if(vCode == "[youtube]") { 
    16         var vURL = vTitle.substring(vTitle.indexOf("[youtube]")+9, vTitle.indexOf("[/youtube]")); 
    17         $(this).attr("rel","shadowbox;width=480;height=390"); 
    18         $(this).attr("href", vURL); 
    19          
    20         var replacedTitle = $(this).attr("title").replace("[youtube]" + vURL + "[/youtube]", ""); 
    21         $(this).attr("title", replacedTitle); 
    22     } 
    23     else if (vCode == "[flv]") { 
    24         var vURL = vTitle.substring(vTitle.indexOf("[flv]")+5, vTitle.indexOf("[/flv]")); 
    25         $(this).attr("rel", "shadowbox;width=480;height=390"); 
    26         $(this).attr("href", vURL); 
    27          
    28         var replacedTitle = $(this).attr("title").replace("[flv]" + vURL + "[/flv]", ""); 
    29         $(this).attr("title", replacedTitle); 
    30     }     
     15        $(this).attr("href", theURL);        
     16        $(this).attr("title", theReplacement); 
     17    } 
     18    $(this).attr("rel","shadowbox;width=480;height=390"); 
    3119  }); 
    3220   
    3321  $(".ngg-gallery-thumbnail span").each(function (arr){ 
    34     var vTitle = $(this).text(); 
    35     var vCode = vTitle.substring(vTitle.indexOf("["), vTitle.indexOf("]")+1); 
    36      
    37     if(vCode == "[vimeo]") { 
    38         var vURL = vTitle.substring(vTitle.indexOf("[vimeo]")+7, vTitle.indexOf("[/vimeo]")); 
    39         var replacedText = vTitle.replace("[vimeo]" + vURL + "[/vimeo]", ""); 
    40         $(this).text(replacedText); 
    41     } 
    42     else if(vCode == "[youtube]") { 
    43         var vURL = vTitle.substring(vTitle.indexOf("[youtube]")+9, vTitle.indexOf("[/youtube]"));    
    44         var replacedText = vTitle.replace("[youtube]" + vURL + "[/youtube]", ""); 
    45         $(this).text(replacedText); 
    46     } 
    47     else if(vCode == "[flv]") { 
    48         var vURL = vTitle.substring(vTitle.indexOf("[flv]")+5, vTitle.indexOf("[/flv]")); 
    49         var replacedText = vTitle.replace("[flv]" + vURL + "[/flv]", ""); 
    50         $(this).text(replacedText); 
    51     }    
     22    var theText = $(this).text(); 
     23    if(theText.search("[nggvid]") > -1) { 
     24        var theURL = theText.substring(theText.indexOf("[nggvid]")+8, theText.indexOf("[/nggvid]")); 
     25        var theReplacement = theText.replace("[nggvid]" + theURL + "[/nggvid]", ""); 
     26             
     27        $(this).text(theReplacement); 
     28    } 
    5229  }); 
    5330   
    5431  $(".ngg-imagebrowser a").each(function (arr){ 
    55      
    56     var vTitle = $(this).attr("title"); 
    57     var vCode = vTitle.substring(vTitle.indexOf("["), vTitle.indexOf("]")+1); 
    58      
    59     if(vCode == "[vimeo]") { 
    60         var vURL = vTitle.substring(vTitle.indexOf("[vimeo]")+7, vTitle.indexOf("[/vimeo]")); 
    61         $(this).attr("rel","shadowbox;width=480;height=390"); 
    62         $(this).attr("href", vURL); 
    63          
    64         var replacedTitle = $(this).attr("title").replace("[vimeo]" + vURL + "[/vimeo]", ""); 
    65         $(this).attr("title", replacedTitle); 
    66     } 
    67     else if(vCode == "[youtube]") { 
    68         var vURL = vTitle.substring(vTitle.indexOf("[youtube]")+9, vTitle.indexOf("[/youtube]")); 
    69         $(this).attr("rel","shadowbox;width=480;height=390"); 
    70         $(this).attr("href", vURL); 
    71          
    72         var replacedTitle = $(this).attr("title").replace("[youtube]" + vURL + "[/youtube]", ""); 
    73         $(this).attr("title", replacedTitle); 
    74     } 
    75     else if (vCode == "[flv]") { 
    76         var vURL = vTitle.substring(vTitle.indexOf("[flv]")+5, vTitle.indexOf("[/flv]")); 
    77         $(this).attr("rel", "shadowbox;width=480;height=390"); 
    78         $(this).attr("href", vURL); 
    79          
    80         var replacedTitle = $(this).attr("title").replace("[flv]" + vURL + "[/flv]", ""); 
    81         $(this).attr("title", replacedTitle); 
    82     }     
     32    var theText = $(this).attr("title"); 
     33    if(theText.indexOf("[nggvid]") > -1) { 
     34        var theURL = theText.substring(theText.indexOf("[nggvid]") + 8, theText.indexOf("[/nggvid]")); 
     35        var theReplacement = theText.replace("[nggvid]" + theURL + "[/nggvid]", ""); 
     36         
     37        $(this).attr("href", theURL);        
     38        $(this).attr("title", theReplacement); 
     39    } 
     40    $(this).attr("rel","shadowbox;width=480;height=390"); 
    8341  }); 
    8442   
    8543  $(".ngg-imagebrowser-desc p").each(function (arr){ 
    86     var vTitle = $(this).text(); 
    87     var vCode = vTitle.substring(vTitle.indexOf("["), vTitle.indexOf("]")+1); 
    88      
    89     if(vCode == "[vimeo]") { 
    90         var vURL = vTitle.substring(vTitle.indexOf("[vimeo]")+7, vTitle.indexOf("[/vimeo]")); 
    91         var replacedText = vTitle.replace("[vimeo]" + vURL + "[/vimeo]", ""); 
    92         $(this).text(replacedText); 
    93     } 
    94     else if(vCode == "[youtube]") { 
    95         var vURL = vTitle.substring(vTitle.indexOf("[youtube]")+9, vTitle.indexOf("[/youtube]")); 
    96         var replacedText = vTitle.replace("[youtube]" + vURL + "[/youtube]", ""); 
    97         $(this).text(replacedText); 
    98     } 
    99     else if(vCode == "[flv]") { 
    100         var vURL = vTitle.substring(vTitle.indexOf("[flv]")+5, vTitle.indexOf("[/flv]")); 
    101         var replacedText = vTitle.replace("[flv]" + vURL + "[/flv]", ""); 
    102         $(this).text(replacedText); 
    103     } 
    104   });  
     44    var theText = $(this).text(); 
     45    if(theText.search("[nggvid]") > -1) { 
     46        var theURL = theText.substring(theText.indexOf("[nggvid]")+8, theText.indexOf("[/nggvid]")); 
     47        var theReplacement = theText.replace("[nggvid]" + theURL + "[/nggvid]", ""); 
     48             
     49        $(this).text(theReplacement); 
     50    } 
     51  }); 
     52   
    10553}); 
  • ngg-video-extend/trunk/ngg-video-extend.php

    r357044 r375452  
    33Plugin Name: NGG Video Extend 
    44Description: Addon plugin for Nextgen Gallery that adds the ability to have video lightboxes. Requires <a href="http://wordpress.org/extend/plugins/nextgen-gallery/" target="_blank">NextGEN Gallery</a> and <a href="http://wordpress.org/extend/plugins/shadowbox-js/" target="_blank">Shadowbox JS</a> 
    5 Version: 1.3.4 
     5Version: 1.4 
    66Author: Mark & Samantha Fisher / Liquid Silver 
    77Author URI: http://www.liquidsilver.net.nz 
     
    2525?> 
    2626<?php 
     27 
    2728function plugin_is_active( $plugin_path ) {//lets have a lookie at what plugins are enabled 
    2829    $return_var = in_array( $plugin_path, apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ); 
    2930    return $return_var; 
     31} 
     32 
     33function nggve_update_msg(){ 
     34    if ( isset( $_GET['upgrade-plugin'] ) && isset( $_GET['ngg-video-extend'] ) ) {// .../wp-admin/update.php?action=upgrade-plugin&plugin=ngg-video-extend%2Fngg-video-extend.php&_wpnonce=xxxxx... 
     35        add_action( 'admin_notices', 'nggve_upgrade_shortcode_notice' ); 
     36        function nggve_upgrade_shortcode_notice() { 
     37            echo '<div class="error"><p>IMPORTANT: NGG Video Extend now only uses one shortcode for <i>all</i> types of video - <b>[nggvid][/nggvid]</b>. Please make sure you update your shortcode!</p></div>'; 
     38        } 
    3039    } 
    31      
     40} 
     41 
     42register_activation_hook( __FILE__, 'nggve_update_msg' ); 
     43 
    3244if ( plugin_is_active( 'nextgen-gallery/nggallery.php' ) && plugin_is_active( 'shadowbox-js/shadowbox-js.php' ) ) {//have to make sure both NextGEN Gallery and Shadowbox JS are enabled 
    33     add_action( 'wp_footer', 'ngg_video_extend_init' );//which they are so lets insert our javascript in the footer 
     45    add_action( 'wp_footer', 'nggve_scripts' ); 
     46} 
    3447 
    35     function ngg_video_extend_init() { 
    36         wp_register_script( 'ngg-video-extend', plugins_url ( 'ngg-video-extend.js', __FILE__ ), array( 'jquery' ), '', true ); 
    37         wp_print_scripts( 'ngg-video-extend' ); 
    38         } 
     48function nggve_scripts() { 
     49    wp_register_script( 'ngg-video-extend', plugins_url ( 'ngg-video-extend.js', __FILE__ ), array( 'jquery' ), '', true ); 
     50    wp_print_scripts( 'ngg-video-extend' ); 
    3951} 
    4052 
    4153if ( ! plugin_is_active( 'nextgen-gallery/nggallery.php' ) ) {//if NextGEN Gallery isn't enabled, spit out an error message 
    42     add_action( 'admin_notices', 'ngg_enabled_error' ); 
    43     function ngg_enabled_error() { 
     54    add_action( 'admin_notices', 'nggve_ngg_enabled_error' ); 
     55    function nggve_ngg_enabled_error() { 
    4456        echo '<div class="error"><p><b>NGG Video Extend not activated!</b> The required <a href="http://wordpress.org/extend/plugins/nextgen-gallery/" target="_blank">NextGEN Gallery</a> plugin is not installed and/or activated.</p></div>'; 
    4557    deactivate_plugins( plugin_basename( __FILE__ ) );//and deactivate ourselves 
     
    4961 
    5062if ( ! plugin_is_active( 'shadowbox-js/shadowbox-js.php' ) ) {//if Shadowbox JS isn't enabled, let the people know it ain't a happening thing 
    51     add_action( 'admin_notices', 'shadowbox_enabled_error' ); 
    52     function shadowbox_enabled_error() { 
     63    add_action( 'admin_notices', 'nggve_shadowbox_enabled_error' ); 
     64    function nggve_shadowbox_enabled_error() { 
    5365        echo '<div class="error"><p><b>NGG Video Extend not activated!</b> The required <a href="http://wordpress.org/extend/plugins/shadowbox-js/" target="_blank">Shadowbox JS</a> plugin is not installed and/or activated.</p></div>'; 
    5466    deactivate_plugins( plugin_basename( __FILE__ ) );//and deactivate ourselves 
  • ngg-video-extend/trunk/readme.txt

    r357080 r375452  
    22Contributors: Thorned Rose, m.fisher 
    33Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=4KHH4PNK5D7GC 
    4 Tags: nextgen gallery, ngg, video, videos, shadowbox, lightbox, gallery 
     4Tags: nextgen gallery, ngg, video, videos, shadowbox, lightbox, gallery, movie, movies 
    55Requires at least: 3.0 
    6 Tested up to: 3.1 
     6Tested up to: 3.1.1 
    77Stable tag: trunk 
    88 
     
    1111== Description == 
    1212 
     13**IMPORTANT: The shortcode has changed to [nggvid][/nggvid] for ALL types of video! If you are upgrading, make sure you update your shortcodes.** 
     14 
    1315This plugin allows you to have a video lightbox popup in a NextGEN gallery. It's very easy to use - just enable the addon and insert some shortcode \(along with the URL of the video\) in the image description and voila, one video! See the installation instructions and screenshots for more details. 
    1416 
    15 Currently supports YouTube, Vimeo and FLV. 
     17Supports all the same video formats as Shadowbox JS - YouTube, Vimeo, Viddler, Metacafe etc as well as external and self-hosted asf, avi, dv, f4v, flv, moov, mov, movie, mp4, mpg, mpeg, swf, wm and wmv. 
    1618 
    1719*Please note:* Obviously as this uses [NextGEN Gallery](http://wordpress.org/extend/plugins/nextgen-gallery/) for the gallery, NGG is a required plugin. [Shadowbox JS](http://wordpress.org/extend/plugins/shadowbox-js/) is also required! 
     
    2022 
    21231. Upload the `ngg-video-extend` folder and contents to the `/wp-content/plugins/` directory 
    22 2. Ensure that NextGEN Gallery and Shadowbox JS plugins are installed and activated. 
    23 3. Activate the plugin. 
    24 4. Make sure that NextGEN Gallery 'Effects' are set to "Lightbox" - go to NextGEN Gallery 'Options' > 'Effects' tab. Choose "Lightbox" from the 'JavaScript Thumbnail effect' dropdown and Save Changes. 
    25 5. If you are wanting to use FLV videos, make sure they're enabled in Shadowbox JS - under 'Settings' > Shadowbox JS, ensure that 'FLV' is checked (ticked) under 'Players', 'Enable FLV Support' is set to "true" and 'FLV Links' under 'Shadowbox Automation' is also set to "true" and Save Changes. 
     241. Ensure that NextGEN Gallery and Shadowbox JS plugins are installed and activated. 
     251. Activate the plugin. 
    2626 
    2727**-- USAGE --** 
    2828 
    29291. In NextGEN Gallery, upload a suitable image for your video to your gallery 
    30 2. Edit the image you just uploaded with whatever Title you want 
    31 3. In the description, add: 
    32  
    33 For YouTube: 
    34 `[youtube]http://www.youtube.com/embed/12345[/youtube]` followed by your description 
     301. Edit the image you just uploaded with whatever Title you want 
     311. In the description, add: 
     32 
     33`[nggvid]http://www.example.com/video/12345[/nggvid]`followed by your description 
     34 
     35Examples: 
     36 
     37YouTube: 
     38`[nggvid]http://www.youtube.com/embed/12345[/nggvid]`followed by your description 
    3539 
    3640Vimeo: 
    37 `[vimeo]http://player.vimeo.com/video/12345[/vimeo]` followed by your description 
     41`[nggvid]http://player.vimeo.com/video/12345[/nggvid]`followed by your description 
    3842 
    3943FLV videos: 
    40 `[flv]http://www.example.com/theflv.flv[/flv]` followed by your description. You may use a relative link for self hosted files e.g. `[flv]videos/myvideo.flv[/flv]` 
    41  
    42 *Example:* `[youtube]http://www.youtube.com/embed/8uTThzrBYwg[/youtube]One of the best movies evar!` 
    43  
    44 **IMPORTANT** Due to a limitation of NextGEN Gallery, this won't automatically work on single images inserted with NGG's shortcode `[singlepic id=x]`. To get this to work with single images, you need to switch to code (HTML) view and wrap the NGG shortcode like thus `<span class="ngg-gallery-thumbnail nggve">[singlepic id=x]</span>`. Feel free to use <p\>, <span\>, <div\> etc as suits your needs. 
    45  
     44`[nggvid]http://www.example.com/theflv.flv[/nggvid]`followed by your description. You may use a relative link for self hosted files e.g. `[nggvid]videos/myvideo.flv[/nggvid]` 
     45 
     46*e.g.* `[nggvid]http://www.youtube.com/embed/8uTThzrBYwg[/nggvid]One of the best movies evar!` 
     47 
     48** IMPORTANT ** Due to a limitation of NextGEN Gallery, this won't automatically work on single images inserted with NGG's shortcode `[singlepic id=x]`. To get this to work with single images, you need to switch to code (HTML) view and wrap the NGG shortcode like thus `<span class="ngg-gallery-thumbnail nggve">[singlepic id=x]</span>`. 
    4649Bear in mind however, that this will apply NGG Gallery styling to your image such as the border and floating the image left. If you don't want this styling or behaviour, you can do one of two things: 
    47  
    48 * Add a style attribute to the element tag e.g. `style="float:none;"` so it looks like `<span class="ngg-gallery-thumbnail nggve" style="float:none;">[singlepic id=x]</span>`. (This will only remove the left alignment behaviour so if you also want to change the way it looks you need to use the alternative method below) 
     50* Add a style attribute to the span tag e.g. `style="float:none;"` so it looks like `<span class="ngg-gallery-thumbnail nggve" style="float:none;">[singlepic id=x]</span>`. (This will only remove the left alignment behaviour so if you also want to change the way it looks you need to use the alternative method below) 
    4951 
    5052*OR* 
    5153 
    5254* Add the following code to your template's style.css: 
    53 `X.nggve {float:none !important;}` where 'X' is your HTML element i.e. span, p, div etc. 
     55`span.nggve {float:none !important;}` 
    5456 
    5557This is the preferable option as it will mean you don't have to add the style attribute to each and every single NGG image you use. 
    5658 
    5759If you also want to change the way it looks add this to your stylesheet as well: 
    58 `X.nggve img {border:0 none; background:none;}` 
    59  
     60`span.nggve img {border:0 none; background:none;}` 
    6061 
    6162 
    6263To change the hover add this: 
    63 `X.nggve img:hover {background:none;}` 
    64  
     64`span.nggve img:hover {background:none;}` 
    6565 
    6666 
     
    7373= What types of video are supported? = 
    7474 
    75 Currently you can use have YouTube, Vimeo and FLV (external or self-hosted). If you would like another format, you can request it in the [support forum](http://wordpress.org/tags/ngg-video-extend?forum_id=10). Eventually we will add other video formats as they are needed. 
     75YouTube, Vimeo, Viddler, Metacafe etc as well as external and self-hosted asf, avi, dv, f4v, flv, moov, mov, movie, mp4, mpg, mpeg, swf, wm and wmv. 
    7676 
    7777= When I click on a thumbnail, just the image pops up with no video but I can see another lightbox in the background = 
     
    9797= It doesn't load the video and the thumbnail image appears instead = 
    9898 
    99 Check the shortcode is correct and that there's no text or extra square brackets before the [shortcode]. 
     99Check the shortcode is correct and that there's no text or extra square brackets before the [shortcode]. nggvid 
     100 
     101= After updating to 1.4, it doesn't load the video and the thumbnail image appears instead = 
     102 
     103The shortcode changed between 1.3 and 1.4 so now you only need one shortcode no matter what type of video you use. Check your shortcodes are [nggvid][/nggvid]. 
    100104 
    101105= It's not working on my single image [singlepic id=x]! = 
     
    107111EITHER: 
    108112 
    109 * Add a style attribute to the element tag e.g. `style="float:none;"` so it looks like `<span class="ngg-gallery-thumbnail nggve" style="float:none;">[singlepic id=x]</span>` 
     113* Add a style attribute to the span tag e.g. `style="float:none;"` so it looks like `<span class="ngg-gallery-thumbnail nggve" style="float:none;">[singlepic id=x]</span>` 
    110114 
    111115OR 
    112116 
    113 * Add the following code to your template's style.css: `X.nggve {float:none !important;}` where X is the HTML element you used i.e. span, div, p etc. This is the preferable option as it will mean you don't have to add the style attribute to each and every single NGG image you have. 
     117* Add the following code to your template's style.css: `span.nggve {float:none !important;}`. This is the preferable option as it will mean you don't have to add the style attribute to each and every single NGG image you have. 
    114118 
    115119= After wrapping my [singlepic] shortcode as above, I don't like the way the image border/background/hover/etc looks = 
    116120 
    117121Follow the above instructions as for the style.css `float:none` but add whatever CSS you like e.g. 
    118 `X.nggve img {background:none; border:2px solid #f00;} 
    119 X.nggve img:hover{background:#ff0;}` 
     122`span.nggve img {background:none; border:2px solid #f00;} 
     123span.nggve img:hover{background:#ff0;}` 
    120124 
    121125 
     
    134138== Changelog == 
    135139 
     140= 1.4 = 
     141* Changed the shortcode to [nggvid][/nggvid] so no more multiple different shortcodes needed 
     142* As a consequence of above, the javascript is now MUCH more efficient. YAY. 
     143 
    136144= 1.3.4 = 
    137145* Now works with all types of NextGEN Gallery shortcodes rather thsn just [gallery id=x]. Oops! 
     
    162170== Upgrade Notice == 
    163171 
    164 = 1.3.4 = 
    165 This update fixes NGGVE not working on anything other than a gallery. Now works with all! Please upgrade ASAP. 
     172= 1.4 = 
     173Changed the shortcode to [nggvid][/nggvid]. Please ensure that you update your shortcodes accordingly! This also makes the plugin more efficient. 
    166174 
    167175== Optional but recommended == 
     
    179187 
    180188 
    181  
    182189*Explanation:* Basically this code reads - 
     190 
    183191    do the following stuff: 
    184192        if not the singular page/post "My Gallery" 
     
    186194 
    187195 
    188  
    189196'my-gallery' is the page slug of the page you used the NextGEN Gallery shortcode on. 
    190197 
Note: See TracChangeset for help on using the changeset viewer.