Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by David Choi -
Number of replies: 16

Hello.

I am actually very new to moodle. But upon several readings and experiments, I was able to successfully install moodle on localhost.

In order to achieve for the best, I really wanted that shadowbox feature, where the distraction is not allowed.

I've been following the detailed instruction for downloading jQuery on Moodle 2.0 and been following several past posts about getting shadowbox and colorbox.

They weren't successful. I am not even sure if I did set-up the jQuery correctly. All I want to do is to post a youtube video on a page, and when someone clicks the youtube video, the video does the "shadowbox" feature.

What can I do...? I really need a detailed instruction that works...

Average of ratings: -
In reply to David Choi

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hello David and welcome to the Forum!

The times I have tried and failed getting the Shadowbox to work is legendary here on the Themes forum, I think I tried this in 2010 and failed, in 2011 I failed , perhaps in 2012 I may succeed! LOL

If you can explain to me how it actually works in a normal HTMP page setting I should be able to tell you how to achieve the same in Moodle. The fact is I never was able to understand how it was supposed to work, as the instructions on the website are not really that user friendly.

If you have got it working in a simple HTML setting then it should be easy enough to transfer the idea over to Moodle.

I would love to be able to sort this out. So please tell me how much you understand the Shadow box and then lets try and fix this one before the end of the year! smile

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by David Choi -

Hello Mary,

I just got a sample html working for the Shadowbox, which does the shadowbox transition with only youtube video being stream. However, I can't think of a way to configure this on Moodle.

I used this video(

) to follow a simple instruction. 

It works, under one condition: All of the shadowbox files are in same folder. Other sources doesn't need to be in this file though.

Please note, the youtube video's URL did not work at first. Apparently, Shadowbox isn't capable of having direct youtube links. Instead, you can extract only the video from the URL by modifying the URL. I gathered this information from this other web link: http://shadowbox.1309102.n2.nabble.com/display-youtube-video-with-shadowbox-td2868611.html

By replacing the old URL with fixed URL, the video worked! If you wish to see the detail, please do see the attachment for the sample code.

As an explanation, CSS must be referenced from the main index file's <head>. 

The javascript part, which is shadowbox.js, must be scripted in main index file's <head>.

Then initializing the shadowbox within the javascript must be done in <head>.

After all the inclusion, shadowbox feature can be used by placing rel="shadowbox" inside <a> with links.

Now, how would I configure this into Moodle? Knowing that Moodle is in php, I am not a php programmer. So this might be challenging.

 I'm really excited with hopes for getting this done on Moodle! smile

Thanks,

David

 

Average of ratings: -
In reply to David Choi

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi David,

I am up late and just saw your reply.

This looks promising. Getting JS scripts to work is easy. You just add the JS file to a folder in your theme which has to be called javascript. Then you need to name each JS file in your theme's config.php like so...

$THEME->javascripts = array('filename', 'filename', '...');

For example: filename = jquery.123.min  (or whatever the js filename. You do not need to add the .js at the end, Moodle is smart, it knows. smile

I'll take a look at this all in more detail tomorrow and see what can be done.

Cheers & good night!

Mary

Average of ratings: -
In reply to Mary Evans

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by David Choi -

Yup, I just did the $THEME->javascripts = array('shadowbox');

Note, that I am actually modifying the leatherbound theme.

In that theme>leatherbound>style file, I placed my "shadowbox.css" file and all the images in the same file, so that I am not required to modify the .css file's call for the images.

 In config file of the leatherbound, I found the $THEME->sheets = array('core',); and I changed it to $THEME->sheets = array('core','shadowbox',); to include my shadowbox.css.

In theme>leatherbound>layout file, I did not modify frontpage.php and general.php, because I don't know what that exactly does. So instead, I went into my moodle website, and under Appearance>Additional HTML, I put the following code "within the HEAD":

<script type="text/javascript">
Shadowbox.init();
</script>

I manually typed in the html code in the content that I wanted to display. Which is this:

<body><a rel="shadowbox" href="http://www.youtube.com/v/ElxFioGNh24" title="youtube">Hi</a></body>

Because it is youtube link, I had to click "prevent automatic linking" setting for links.

It is still not working. The problem must be either that moodle isn't seeing the shadowbox.css file, or shadowbox.js file.

IF it is seeing those two files, then the problem must be that the call within the moodle is being placed after my html code that uses the shadowbox.

Could you help me out with this? This was and is the biggest challenge that I've been facing.

Regards,

David

p.s. I did create javascript folder on leatherbound theme, and placed my javascript.js in there.

Average of ratings: -
In reply to David Choi

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi David,

Well looks like you have done mostly the correct things, however just a note of caution. In the config.php you do not need a comma after the last CSS file name. In ythe code you posted I see extra commas which will casue PHP to send out a WARNING if you are writing this as one line.

Please see where highlighted below...

$THEME->sheets = array('core','shadowbox',);

However if it is written like this (in a stack) then the comma is OK...

$THEME->sheets = array(
    'core',
    'shadowbox',
);

It may sound strange I know, but it's true...

As for the Additional HTML I would delete that, as you can do this a better way.

What you need to do is create a file and call it myShadowbox.js and ADD the init call Javascript code to that file. Nothing else just that line of code...

Shadowbox.init();

and save it to your theme's javascript directory.

Next you need to update the config.php to ADD the myShadowbox next to your other shadowbox script filename like so...

$THEME->javascripts = array('shadowbox', 'myShadowbox');

Next to test this out open your theme's layout/frontpage.php using a Text Editor and find the page container div... and below it ADD your link...and then save the file

<div id="page">

<a rel="shadowbox" href="http://www.youtube.com/v/ElxFioGNh24" title="youtube">HI</a>

When you test it you will need to Purge all caches in Settings > Site Administration > Development > Purge all caches that after that refresh you screen You should then see the link at the top of the Home page only.

Let me know if it works.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by David Choi -

Hello Mary,

The link does appear on the top of the Home, but when I click it, only the hyperlink works, but not the shadowbox. I am trying to think what the problem is, but can't get a grasp.

I tried downloading the firebug, but I can't get that to work either. I'm using google chrome.

Theoretically, I can see that all the javascript files and css file should be visible by the moodle, but maybe the calls are in the wrong order, or the wrong location.

I'm sorry to report that it didn't work. Maybe I could attach some of the files to make sure that I did follow your steps.

Included is config.php in leatherbound theme.

Sincerely,

David

Average of ratings: -
In reply to David Choi

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Amy Groshek -
David, if you want to do this, you need to learn how to debug javascript. You need to eliminate common issues using some very simple JavaScript debugging with either Firebug or Chrome Dev console:
1) Check for any JS errors in console
2) console.log() all JS objects (jQuery, shadowbox, etc.) that your widget needs to work
3) Try running your init from console
4) Verify that all of your CSS is making it into the page

Some additional stuff:
1) If Moodle's minification chokes on an error in your CSS or JS, the minification stops there, and a bunch of your file will not make it into the page. Test with minification off by turning on theme designer mode.
2) You're calling a JS init in the head which should not be called until all your HTML and JS are loaded into the page. You should write your init script into a new JS file, loaded last by the theme into the footer, and you should wrap that init in a jQuery document.ready() to be sure it doesn't fall on deaf ears. In fact, there's very little reason to load any script not needed to manage shivs/CSS fixes in the header.
3) Filters can alter URLs you place in any HTML area field.

Google and Stackoverflow await. Onward!
Average of ratings: -
In reply to David Choi

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

You are going to kick yourself after you see what it is you forgot to do!!!

all this is stopping you thinking straight.

OK here is where you went wrong...

// $THEME->javascripts = array('shadowbox','myShadowbox');

This may look OK to you, which it is...in one sense, but NOT to Moodle because you left the // at the start. This only tells Moodle to ignore it.

So what you need to do is remove the // and it will look like this...

$THEME->javascripts = array('shadowbox','myShadowbox');

So fingers crossed...let's see it it works. smile

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by David Choi -

WOW! It's working now.

I couldn't figure out if it was // in front of the $THEME.

I wasn't using any special software to modify codes. I was using notepads, and it just showed me multiples of //, making me assume that that was supposed to be there.

Also, my sample page on the course is also working! I bet this was the reason...

Another big thanks to Mary! 

David

Average of ratings: -
In reply to David Choi

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi David,

So pleased this is working now.

Now that you have the Shadowbox working, and you are that little bit more familiar with Moodle, if might be the right time to try and change the way the myShadowbox.js is called.

If you read Amy's comments, she explains how it should be done. I'm still learning too, so it's always good to get some feedback from someone with more experiance.

Amy has been helping me fix Moodle Themes, recently, and we are both learning more about how Moodle works. So this is a good opportunity for you to learn somemore, and I am really pleased that you got this to work.

It might also be a good time for me to write down how it was done, as I may forget by tomorrow! LOL

Take care,

Mary

 

Average of ratings: -
In reply to David Choi

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Ravi Vare -

 Hi All,

Very Nice Video

 Plz. Suggest any Precautions When applying to Moodle.

Ravi

Average of ratings: -
In reply to Ravi Vare

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

The Video was interesting but not easy to see what you changed. So perhaps you could upload a sample of the changes you made?

Also the changes for the pix was not clear in the video. For anyone viewing this comment the correct way to add an image in CSS in Moodle is as follows

url([[pix:theme|image/someimagename]])

where

image = the sub-directory of pix within your theme

and

someimagename = the file name of the image you want to display minus the file extention.
For example:
flowers.jpg = flowers

Also...jQuery in Moodle 2.5 should be added as this tutorial tells you

http://docs.moodle.org/dev/jQuery

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Ravi Vare -

Hi Mary,

Thanks as usual !!!

i Can't get exact 'Logic' of "How to install Colorbox in Moodle " sad [Very Confusing]sad

--------------

url([[pix:theme|image/someimagename]])

OR

url([ [pic:theme|image/someimagename] ] )

--------------

I am using Moodle 2.4.5+ (Build: 20130712)

I think,

We have to make NEW start !!!:-)

TIA,

Ravi

----------------

PS=

What i want to do with 'Colorbox'?

I have 'Page' [Resource Type] Where i put number of Embedded Video

Here i want Effect of colorbox.smile

Average of ratings: -
In reply to Ravi Vare

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Ravi,

It is pix like this directory in Base theme

https://github.com/moodle/moodle/tree/master/theme/base/pix

Average of ratings: -
In reply to Mary Evans

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Ravi Vare -

Hi Mary,

I am raising this issue in New/ Fresh Thread.

How to install/configure colorbox in Moodle?

Plzzz. put your Valuable Suggestion

TIA

Ravi

Average of ratings: -
In reply to Ravi Vare

Re: Applying Shadowbox/Colorbox/Lightbox on Moodle v2.3

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Ravi,

Off the top of my head looking at the ColorBox video on YouTube around 9:38 and how he then goes on to add custom classes to things such that they are picked up by his custom ColorBox initialisation code I would say you need to clone / adapt a theme like the jQuery part of the MyMobile theme in Moodle 2.5.

MyMoblie has code (included using the jQuery documentation mechanism Mary pointed out) that adds an extra jQuery component 'jQueryMobile' - in this case it would be 'jquery.colorbox-min.js' - and some custom code 'custom.js' which would be the custom initialisation code mentioned.  The theme also adds it's own additional css so look at that also to add any additional css you want as per the examples in 'colorbox-master.zip'.

So I don't think you need to worry so much about 'pix' etc. (I could be wrong) but rather get the theme to load and initialise ColorBox and then edit your Moodle content to have the custom classes you define (as shown in the video) that the initialisation code uses.

I realise this is not a complete guided solution as that would take me a few hours, but should get you 'back in the room'.

Cheers,

Gareth

Average of ratings: Useful (1)