JQuery Example Needed...

Dawg · Posted: Sun Jan 24, 2010 7:27 am

Greetings all,
I am working on a whole new way of handling videos for RN.

I have a stand alone that I created that works excellent and I have been converting it to run on RN.

What this does is take a YouTube Embed code and play it on the site. In the standalone I have it using lytebox to open the video player. I would prefer not to reinvent the wheel and would rather use the built in JS in RN.

What I am looking for is a lightbox look that will open a file (vs an image....no not the embed code....player.php)

I know RN uses JQuery but I do not know much about it and how it really is intergrated into RN.

Could someone point the way here.

I have all the functions complete. Display, Display by Category, Add, Edit, Suspend, Readmit, Delete, Category control, Group control of add-edit functions. I am very pleased with how it is comig. Now I jsut need to make the actual player part work in RN.

Thank you for your help!!

Dawg

nuken · Posted: Sun Jan 24, 2010 7:46 am

The Jquery lightbox that is used with RavenNuke is Colorbox.

Only registered users can see links on this board!
Get registered or login to the forums!

Dawg · Posted: Sun Jan 24, 2010 8:33 am

Supports photos, photo groups, slideshow, ajax, inline, and iframed content.

Does that mean I can call a file with it? (inline?)

Thank You for your help!

Dawg

spasticdonkey · Posted: Sun Jan 24, 2010 8:37 am

here is one example of a setup, open includes/jquery/jquery.colorbox.php
find

Code:

$inlineJS = '<script type="text/javascript">
$(document).ready(function(){
$(".colorbox").colorbox({opacity:0.65, current:"{current} of {total}"});
$(".colorboxSEO").colorbox({opacity:0.50, width:"750", height:"300", iframe:true});
});
</script>'."\n";
addJSToHead($inlineJS,'inline');

replace with

Code:

$inlineJS = '<script type="text/javascript">
$(document).ready(function(){
   $(".colorbox").colorbox({opacity:0.65, current:"{current} of {total}"});
   $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
   $(".colorboxSEO").colorbox({opacity:0.50, width:"750", height:"300", iframe:true});
});
</script>'."\n";
addJSToHead($inlineJS,'inline');

and the html

Code:

<a class='example6' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a>

and also make sure the scripts are loaded by your module, or site wide if you using for blocks, etc.

Only registered users can see links on this board!
Get registered or login to the forums!

Dawg · Posted: Sun Jan 24, 2010 8:42 am

SWEET!

Thanks Guys....

I should have sdomething ready for testing soon!

Dawg

Palbin · Posted: Sun Jan 24, 2010 10:42 am

Dawg, is this for the entire site or just a particular module? If it just for a module you should not be editing jquery.colorbox.php in my opinion.

Dawg · Posted: Sun Jan 24, 2010 11:12 am

This will be for the MOD Rn_Video and then there will be blocks to support it.

What would you suggest?

I will drop you a PM with a link so you can see what I am doing.

Dawg

Palbin · Posted: Sun Jan 24, 2010 11:18 am

Actually now that I think about it you should not be using includes/jquery/jquery.colorbox.php at all because it will make upgrading harder.

If this is for a module only you need to place the following in your index before you call include header.php. If this is more of global thing then you need to create /includes/addons/head-youtube.php (replace "youtube" with what ever you want)

Index:

Code:

addCSSToHead('includes/jquery/css/colorbox.css','file');
addJSToHead('includes/jquery/jquery.js', 'file');
addJSToHead('includes/jquery/jquery.colorbox-min.js','file');

$inlineJS = '<script type="text/javascript">
$(document).ready(function(){
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}) iframe:true});
});
</script>'."\n";
addJSToHead($inlineJS,'inline');

head-youtube.php

Code:

<?php
addCSSToHead('includes/jquery/css/colorbox.css','file');
addJSToHead('includes/jquery/jquery.js', 'file');
addJSToHead('includes/jquery/jquery.colorbox-min.js','file');

$inlineJS = '<script type="text/javascript">
$(document).ready(function(){
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}) iframe:true});
});
</script>'."\n";
addJSToHead($inlineJS,'inline');
?>

Dawg · Posted: Sun Jan 24, 2010 11:36 am

Palbin,

Thank you so much!! Your time is very much appreciated!

Dawg

spasticdonkey · Posted: Sun Jan 24, 2010 3:26 pm

Quote:

Actually now that I think about it you should not be using includes/jquery/jquery.colorbox.php at all because it will make upgrading harder.

yes, good point, probably better to define that elsewhere Smile

I guess I'm a little confused why we have to reload all the core JS and CSS. In header.php it doesn't look like there is anything conditional about whether they load or not... Looks like they should load everytime, even if nukeNAV is disabled...??

from header.php

Code:

// Post 138905 Step 6
include_once INCLUDE_PATH . 'includes/jquery/jquery.php';
include_once INCLUDE_PATH . 'includes/jquery/jquery.colorbox.php';
include_once INCLUDE_PATH . 'includes/tabcontent/tabcontent.php';
include_once INCLUDE_PATH . 'includes/ajaxtabs/ajaxtabs.php';
include_once INCLUDE_PATH . 'includes/custom_files/nukeSEO/nukePIEhdr.php';
include_once INCLUDE_PATH . 'includes/custom_files/nukeSEO/nukeFEEDhdr.php';

includes/jquery/jquery.php loads includes/jquery/jquery.js
includes/jquery/jquery.colorbox.php loads includes/jquery/jquery.colorbox-min.js and includes/jquery/css/colorbox.css

Am I missing something here? Or maybe this is to maintain compatibility with future changes?

Palbin · Posted: Sun Jan 24, 2010 4:35 pm

You are not missing anything, but there are two reasons.

The first is that it assures that the main jQuery library is loaded before "your plugins". The second is as you suggest to maintain compatibility with future changes because in my opinion ultimately with the new system none of these should exist.

Code:

// Post 138905 Step 6
include_once INCLUDE_PATH . 'includes/jquery/jquery.php';
include_once INCLUDE_PATH . 'includes/jquery/jquery.colorbox.php';
include_once INCLUDE_PATH . 'includes/tabcontent/tabcontent.php';
include_once INCLUDE_PATH . 'includes/ajaxtabs/ajaxtabs.php';
include_once INCLUDE_PATH . 'includes/custom_files/nukeSEO/nukePIEhdr.php';
include_once INCLUDE_PATH . 'includes/custom_files/nukeSEO/nukeFEEDhdr.php';

spasticdonkey · Posted: Sun Jan 24, 2010 4:39 pm

ok wait, I think I can answer my own question.. so the scripts are loaded in the proper order Smile

because this section of code executes before jquery.php is included, which means any custom included scripts will load before jquery Sad

Code:

// nukeSEO Dynamic HEAD - load HTML, HEAD tags
include_once INCLUDE_PATH . 'includes/nukeSEO/nukeSEOdh.php';

that about right?

spasticdonkey · Posted: Sun Jan 24, 2010 4:41 pm

ahh, you looks like you posted while I was posting Smile

makes sense and I think I'm getting a better understanding of how everything ties together... also makes sense for the future where only required js and css files are loaded.

wHiTeHaT · Posted: Mon Jan 25, 2010 11:11 am

i suggest

Only registered users can see links on this board!
Get registered or login to the forums!