Adding jQuery Functions - Specifically, Fancybox

I am new to Dolphin but not new to programming; I have medium skill levels.  I wanted to add fancybox to Dolphin as I am very familiar with it having used it in other projects including writing a TinyMCE plugin for it for a blog application that uses TinyMCE. as the WYSIWYG.

I am asking for some help on understanding Dolphin; I have been spending time searching the forums reading up on how it is structured.  Now I see there is a plugin that uses fancybox so I know it is compatible with Dolphin.  I understand how Dolphin is loading the javascript libraries and CSS but I do not know how to add a javascript/jQuery to the list so that they can be loaded in by Dolphin.  I place the fancybox CSS and javascript files in the proper location, and added fancybox to the plugin directory.

What is the best way to add the jquery.min.js to Dolphin?  I would think I would want it to be included in the same manner as the other jQuery scripts.  Or do I need to place this in the _header.html file for the template?  The same question as well about loading in the css for fancybox   I added the css file to the css directory in the base directory.

I noticed that when I added the fancybox function to the _header.hml file that the member toolbar (the one that is by default at the bottom) disappears leading me to think there is some conflict somewhere.  Since there is a plugin using fancybox, I know it is possible to include it with Dolphin.

Of course any help with this is greatly appreciated.

have a look in
/inc/params.inc.php

//--- Add default CSS ---//
$oSysTemplate->addCss(array(
    'common.css',
    'general.css',
    'anchor.css',
    'forms_adv.css',
    'login_form.css',
    'top_menu.css',
    'BxCustomProfileMenu.css'
));
//--- Add default JS ---//
$oSysTemplate->addJs(array(
    'jquery.js',
    'jquery.jfeed.js',
    'jquery.dimensions.js',
    'functions.js',
    'jquery.dolRSSFeed.js',
    'jquery.float_info.js',
    'jquery.webForms.js',
    'jquery.form.js',
    'jquery.dolPopup.js',
    'common_anim.js',
    'login.js',
    'ie7_flash_fix.js',
    'BxDolVoting.js',
    'user_status.js',
));

Thank you very much, that is a big help.  Is there a depository for Dolphin listing the functions and classes?  If there is, it will help tremendously as I learn to write plugins.  I know I have a long ways to go and much to learn.

Development

Documentation for developers creating Dolphin extensions.

http://www.boonex.com/trac/dolphin/wiki/Dolphin7Docs#Development

It definitely added the jquery-1.4.3.min.js as I checked the source.  However, adding jquery-1.4.3.min.js results in the member toolbar at the bottom (default location) disappearing.  So there is a conflict somewhere I must learn in order to be able to use fancybox.and have the toolbar.  If anyone can give pointers on this conflict I would be grateful

Dolphin already includes jQuery. So your attempt to include it again and even perhaps a different version is more than likely what is causing the problem.

Keep in mind, that not all jQuery scripts are loaded on every single Dolphin page by default.   Deano has a good mod to add scripts to the head of any page,  including those you build in page builder.  It will allow you to load js or css into only the pages where you need it.  Adding js or css  to params.inc.php will load it into every single page, so you should do this only for the functionality you want on every single page.   You cannot load scripts and css into individual pages head section without the use of a mod like this: 

http://www.boonex.com/m/Head_Injections

After reading the replies I just realised I loaded in the wrong script; that certainly can cause problems   I did not want to load jQuery, I wanted to load the fancybox library. 

Thanks for the link to the mod, I will check that out. 

Here's how easy the mod makes things:

1. Enter the page title of the page where you want to inject js/css into the head.  If you are uncertain of the page title, load the page in a browser and view the source.  Enter what you see between the <title> </title> tags.

The result:

To keep things neat, create a 'fancybox' subdirectory in your sites 'plugins' directory, then create a 'js' and a 'css' directory in the plugins/fancybox directory.  Upload the js and css to the respective subdirectories. The head injection code would look something like this:

<script type="text/javascript" src="<bx_url_root />plugins/fancybox/js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="<bx_url_root />plugins/fancybox/js/jquery.easing-1.4.pack.js"></script>
<link rel="stylesheet" href="<bx_url_root />plugins/fancybox/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<bx_url_root /> will be replaced with your sites url when the page code is parsed.

Thanks for the push HL. An actual product review in the products listing would be helpful as well. It will help push the product up the popular module list. Hint :)

Will do.

I now have this working except for one small area, that is creating a proper link to the fancybox icons.  When one clicks on the "View Original" button in the Actions block for a photo, it will open that photo in a lightbox.  This was not a mod but a hacking of the code; installing the bits manually into the proper places.  When I get it finished with the fancybox loading icon and close icon I will post up a tutorial on what I did.  I would have coded a lightbox into the photo mod in the first place instead of using the method of opening a window with onclick.

For some strange reason, with the fancybox CSS loaded, the Account Home and ONLY the account home page will basically load without CSS.  All the content, buttons and such, just down the page.  Strange why it affects that one page.  can't be a permissions thing as it would affect all the pages.  Other sections of the dashboard are fine.

We add the names of the files in /inc/params.inc.php. 

Then we put the css files in the templates/base/css folder.

But there's no js folder in base. Where do we put the .js files?

Thanks.

You could use the /inc/params.inc.php to load in your css/js but I tend to just include them in the _header.html in the template using standard html code.  By the way, as I stated, those are actually template files so will be parsed by the template engine.  So you can use <bx_url_root /> to include the URL of your site; note the / is already added.  Of course you will have to add it to each template you are going to use on your site.  Deano's and Modzzz's module will let you add it based on certain pages

I think you can point to a location for your js file in the function addJs(); or you could just place it where the other js/jquery are located in that list.

There's a section:

__extra_js__

<bx_injection:injection_head />

in the _header.html with css and .js included files of  the template I use. Is this the right place? 

There are a couple of mods on the market for head injections.

However, let's say you want to include some js code in the header file of the template, _header.html.  If the _header.html is not there, just copy it from the base template.

Near the bottom of the file you will find </head>.  You would include your js just before the closing head tag </head>

Let's say you have a folder for your custom js files so you can easily maintain them; say custom_js located under the root of your site.  In that folder you have say a file special.js that does something special.

You would add the following:

<script type="text/javascript" src="<bx_url_root />custom_js/special.js"></script>

I completely forgot; 7.3 has a new head injection field in Basic Settings; you can add your js code there.

I included them in the  _header.html but initially it didn't work, I had to clear the cache folder. When I tried the Basic Settings the .js code appeared on the top of the page. I'm looking forward to finding my next challenge. 

Thank you!

There's another strange issue I'm having. I create a new HTML block with the code I want to use and the Builder visualize it well, but when I open the page with that code there are lot of things that are missing. My .css and .js are included, I can see it in the source code, there isn't any error on that page but the content is not the same.

Now the page is visualized well, but it seems that the javascript doesn't run.

With HTML blocks, you need to turn the editor off; I think the switch is still cookie based so if you clear cookies, the switch reverts.  The default method for HTML blocks should be to load the block without the editor; but Boonex does what Boonex wants to do.

TinyMCE will do code clean up if it is left on; removing such things as js.  The way I handle it is that I keep a backup of the current HTML code for the block external in case of a TinyMCE cleanup corrupts my code.

You can use a php block instead; php blocks are pure code blocks but of course you have to do your HTML .

I figured out how to work with the HTML blocks but now the javascript which controls my html code is not running. It's included the way you told me, I can see it in the source code of the page, but it's not running. 

What can be the problem?

If you see the link to the js in the source code, click on it to make sure the link is valid, you should see the js code displayed.

Is this javascript or jquery?

It's javascript and it opens in the browser. I tried to put a simple write function to see if it appears on the page but nothing appeared. It simply doesn't run. I don't know what to do.

My fault - it's not javascript, but jquery. I put it in Basic Settings in the Body Injection and it run. What a stupid mistake. :D

Glad to hear you got it working.  One thing to remember is to not load in the jquery library twice; Dolphin already loads it and loading it twice can lead to errors.

Actually, loading it in the header template file should work as well.  The main thing is that you got it working.