Custom javascript code to footer

[mykee]

Hi all,

I have a question: how can I put a custom (ex. javascript) code to before </body> tag with a plugin?
I write a plugin, and I used page_header filter, but this not helped, I need insert my code to end of page.

Thanks,
Mykee

[Stramm]

Have a look at the list of plugin hooks
http://documentation.coppermine-gallery.net/en/dev_plugin_hooks.htm

eg. you can use page_start to add your .js to the list of added files

Depending on what you want to achive use eg. the hooks file_data, page_html or gallery_footer to call your script. As said, have a look at the list of hooks and chose the one that fits your needs.

[mykee]

Thanks, I used page_html and page_footer too, code is there on footer, but no runned. :-( I get this error in IE debugger: jQuery not defined. If I add directly this code, then working. I don't understand...

Here is my code:

Code Select Expand

$thisplugin->add_filter('gallery_footer','isotope_footer_addons');

Code Select Expand

function isotope_footer_addons($html)
{
global $ISOTOPESET, $CONFIG, $CPG_PHP_SELF, $JS;

   $footblock =
<<< EOT
<script type="text/javascript">
  $(function (){
      var $container = $('#isocontainer');
   
      $container.imagesLoaded( function(){
        $container.isotope({
          itemSelector : '.photo'
        });
      });
      $(".tiptip").tipTip();
     
EOT;
if ($ISOTOPESET['isotope_lbox'] == 1) {
$footblock .= <<< EOT
// Use this example, or...
// $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
// $('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox({
  imageLoading: 'plugins/isotope/lightbox2/images/lightbox-ico-loading.gif',
imageBtnClose: 'plugins/isotope/lightbox2/images/lightbox-btn-close.gif',
imageBtnPrev: 'plugins/isotope/lightbox2/images/lightbox-btn-prev.gif',
imageBtnNext: 'plugins/isotope/lightbox2/images/lightbox-btn-next.gif',
  containerResizeSpeed: 350,
  keyToClose: 'x',
  txtImage: 'Kép:',
txtOf: ', Összesen:',
  attribute: 'rel'
  });
  // Select all links with lightbox class
// This, or...
// $('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
EOT;
}
$footblock .= <<< EOT

});
</script>
EOT;

  $htmlclose = $footblock."</body>";
   $html = str_replace("</body>", $htmlclose, $html);

    return $html;
}


Here is my direct code to html part, what working:

Code Select Expand

<script type="text/javascript">
    $(function(){
      var $container = $('#isocontainer');
   
      $container.imagesLoaded( function(){
        $container.isotope({
          itemSelector : '.photo'
        });
      });
      $(".tiptip").tipTip();

   <?php if ($ISOTOPESET['isotope_lbox'] == 1) { ?>   
// Use this example, or...
// $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
// $('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox({
  imageLoading: 'plugins/isotope/lightbox2/images/lightbox-ico-loading.gif',
imageBtnClose: 'plugins/isotope/lightbox2/images/lightbox-btn-close.gif',
imageBtnPrev: 'plugins/isotope/lightbox2/images/lightbox-btn-prev.gif',
imageBtnNext: 'plugins/isotope/lightbox2/images/lightbox-btn-next.gif',
  containerResizeSpeed: 350,
  keyToClose: 'x',
txtImage: 'Kép:',
txtOf: ', Összesen:',
  attribute: 'rel'
  }); // Select all links with lightbox class
// This, or...
// $('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
  <?php } ?>
 
    });     
</script> 

[mykee]

Tried with page_footer, page_html too, insert to before </body> and to head with document ready functions, but not helped. Inserted code not runned. I drop this solution, and integrate script after display code (inside body), and then working. I don't understand why not working in head or before closed body. Like render html, and insert code after this, and browsers not running this code. 

[Stramm]

Please zip your plugin and attach it to your next post

[mykee]

Here is my plugin. Include four jQuery plugin in one addon with different licenses, and not ready yet. I plan a few function too, but working now correctly.

[mykee]

Just for a fair play: here is corrected licensed plugin for JQuery authors, who's include my plugin header with site links. Many thanks for authors!

I hope this will ok.

[Αndré]

Is this thread solved?

[mykee]

No, original problem is live (put code after site render and not working), but solved with inline script. This solution no nice, because I'd like put code to footer, but I cannot use.

[Αndré]

Please try the attached plugin. The main issue was that you used

Code Select Expand

$container
instead of

Code Select Expand

container
or

Code Select Expand

\$container

[mykee]

Many thanks for great help, I will try it at today, and rewrite this plugin with your codes!  Many thanks!

[mykee]

Thanks, this tip helped and solved my problem! Many thanks for great help!

[mykee]

Eh, I have a problem with language parameter. I added this global to function:

Code Select Expand

global $ISOTOPESET,$CPG_PHP_SELF,$lang_plugin_isotope;
But when I use print_r, then I see: lang array is empty.  Why not get my plugin language?

Here is footer script now:

Code Select Expand

// Add script to footer
function isotope_footer_addons($html) {
    global $ISOTOPESET,$CPG_PHP_SELF, $lang_plugin_isotope;

$isotope_pages_array = array('index.php');
if (in_array($CPG_PHP_SELF, $isotope_pages_array) == TRUE)
{
 
    print_r ($lang_plugin_isotope); exit;
    $betext = $lang_plugin_isotope['linktext'];
    $linktext = "'".$betext."'";
       
   $footblock = <<< EOT
<script type="text/javascript">
$(function(){
//Isotope plugin


     
      var count = $('#isocontainer').length;
      count = count + 1;
      var container = $('.container');
     
      container.imagesLoaded( function(){
        container.isotope({
          itemSelector : '.photo'
        });
      });
     
       $("#isotope_filter:first").attr('id', 'isotope_filter'+0);
       $("#isotope_filter.isotopemenu").attr('id', '').parent().hide();
           
    for (i=0;count>i;i++){     
       $('#isocontainer').attr('id', 'isocontainer'+i);     
      }     
     
      $('a.isoitem').click(function(){
      var selector = $(this).attr('data-filter');
      container.isotope({ filter: selector });
      $(".active").removeClass("active");
      $(this).addClass("active");
      return false;
        });
     
   
     
EOT;

  if ($ISOTOPESET['isotope_adipoli'] == 1) {
  $footblock .= <<< EOT
//Adipoli plugin
      $('.adipoli').adipoli({
          'startEffect' : '{$ISOTOPESET['isotope_adipoli_start']}',
          'hoverEffect' : '{$ISOTOPESET['isotope_adipoli_hover']}',
          'imageOpacity': '0.8', // default: 0.5, set value 0 - full transparent to 1 - no transparent with 0.10 steps
          'animSpeed' : '50' //default: 300 - milliseconds
      });
EOT;
  }
     
//TipTip addons     
    $footblock .= <<< EOT
      $(".tiptip").tipTip({maxWidth: '400px'});
EOT;
     
     
   
   if ($ISOTOPESET['isotope_lbox'] == 1) {
   
   $footblock .= <<< EOT
//Lightbox 0.51 plugin
      alert ({$linktext});
// Use this example, or...
// $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
// $('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox({
  imageLoading: 'plugins/isotope/lightbox2/images/lightbox-ico-loading.gif',
imageBtnClose: 'plugins/isotope/lightbox2/images/lightbox-btn-close.gif',
imageBtnPrev: 'plugins/isotope/lightbox2/images/lightbox-btn-prev.gif',
imageBtnNext: 'plugins/isotope/lightbox2/images/lightbox-btn-next.gif',
  imageBlank: 'plugins/isotope/lightbox2/images/lightbox-blank.gif',
  containerResizeSpeed: 350,
  keyToClose: 'x',
  txtImage: 'Kép:',
  txtOf: ', Összesen:',
  attribute: 'add',
  Linktext: {$linktext}
  }); // Select all links with lightbox class
// This, or...
// $('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
EOT;
  }
 
$footblock .= <<< EOT

    });
</script>
EOT;

    $htmlclose = $footblock."</body>";
    $html = str_replace("</body>", $htmlclose, $html);
}
    return $html;
}

[Joe Carver]

This line doesn't make sense to me, although I am not certain what you are trying to do with the output. If you are just tying to show some text, remove the line entirely or comment it out.

    print_r ($lang_plugin_isotope); exit;

Unless you are trying to do something else, try return instead of exit in that line.

If you would like to capture the output of print_r(), use the return parameter. When this parameter is set to TRUE, print_r() will return the information rather than print it.

[edit]
Don't forget to include the lang file.

Code Select Expand

include(../../your_plugin/lang/plugin_lang.php);
setting the path according your plugin's path.
[/]

Config>>Debug>>Notices should also be showing/helping you too.

This is a great resource for all to use... PHP.NET

[mykee]

Problem with my language only. Because if add global parameters $lang_meta_album_names or $lang_common, then I get array when use print_r like this:

Code Select Expand

print_r ($lang_meta_album_names); exit;

but with my language ($lang_plugin_isotope) not.
Under other function worked (like function isotope_mainpage), but under this function I get empty (false) array.
I will check debug mode, but I think under this no call my $lang_plugin_isotope global.

[mykee]

Thanks, I solved it!
I put code to function isotope_footer_addons($html) from my init.inc.php. No called if use this:

Code Select Expand

require('./plugins/isotope/include/init.inc.php');

After put lang codes to function, then working. Great thanks!

[mykee]

Modified to this, and it's ok:

Code Select Expand

global $CONFIG,$ISOTOPESET,$CPG_PHP_SELF;

require('./plugins/isotope/include/init.inc.php');

[mykee]

Modified to this, and it's ok:

It's not ok, because under admin settings missing any text. I use this in function:

Code Select Expand

global $CONFIG,$ISOTOPESET,$CPG_PHP_SELF;


if (file_exists("./plugins/isotope/lang/{$CONFIG['lang']}.php")) {
  require "./plugins/isotope/lang/{$CONFIG['lang']}.php";
} else {require "./plugins/isotope/lang/english.php";}


[Αndré]

There are 2 possibilities to make your language file array available:
1. include your plugin's init.inc.php file to every function, where needed
2. use the plugin hook "page_start" to make your language array globally accessible (have a look at e.g. the more_meta_albums plugin if you don't know how to do that)

[mykee]

Thanks André!

If I use require line for init.inc.php under isotope_footer_addons($html) function, then under Plugin Manager will not show any text under my plugin 
If I use inline solution (like in my previous comment), then working.

I don't understand why working directly in main code (in same codebase.php), but under page footer functions not. 
Here is filters:

Code Select Expand

$thisplugin->add_filter('plugin_block','isotope_mainpage');
$thisplugin->add_filter('gallery_footer','isotope_footer_addons');


- under function isotope_mainpage() is working directly this "global $lang_plugin_isotope"
- under function isotope_footer_addons($html) is not working this "global $lang_plugin_isotope"

If I add to "page_start" filter, then I can delete this from isotope_mainpage() function?  And this will not get any problem under Plugin Manager? (I will try it.)