Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1] 2   Go Down

Author Topic: Custom javascript code to footer  (Read 10861 times)

0 Members and 1 Guest are viewing this topic.

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Custom javascript code to footer
« on: August 14, 2013, 10:01:49 am »

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
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

Stramm

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Male
  • Posts: 6006
    • Bettis Wollwelt
Re: Custom javascript code to footer
« Reply #1 on: August 14, 2013, 06:31:35 pm »

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

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #2 on: August 14, 2013, 08:19:28 pm »

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]
$thisplugin->add_filter('gallery_footer','isotope_footer_addons');

Code: [Select]
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]
<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> 
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #3 on: August 16, 2013, 11:19:39 am »

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.  :(
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

Stramm

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Male
  • Posts: 6006
    • Bettis Wollwelt
Re: Custom javascript code to footer
« Reply #4 on: August 16, 2013, 11:43:46 am »

Please zip your plugin and attach it to your next post

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #5 on: August 16, 2013, 12:01:39 pm »

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.
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #6 on: August 16, 2013, 02:39:40 pm »

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.
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15760
Re: Custom javascript code to footer
« Reply #7 on: August 20, 2013, 03:39:24 pm »

Is this thread solved?
Logged

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #8 on: August 21, 2013, 07:57:03 am »

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. :(
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15760
Re: Custom javascript code to footer
« Reply #9 on: August 21, 2013, 10:27:31 am »

Please try the attached plugin. The main issue was that you used
Code: [Select]
$containerinstead of
Code: [Select]
containeror
Code: [Select]
\$container
Logged

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #10 on: August 21, 2013, 10:40:26 am »

Many thanks for great help, I will try it at today, and rewrite this plugin with your codes!  :D Many thanks!
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #11 on: August 22, 2013, 06:14:07 pm »

Thanks, this tip helped and solved my problem! Many thanks for great help!
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #12 on: August 24, 2013, 02:02:47 pm »

Eh, I have a problem with language parameter. I added this global to function:
Code: [Select]
global $ISOTOPESET,$CPG_PHP_SELF,$lang_plugin_isotope;But when I use print_r, then I see: lang array is empty.  :o Why not get my plugin language?

Here is footer script now:
Code: [Select]
// 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;
}
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

Joe Carver

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Gender: Male
  • Posts: 1504
  • aka 'i-imagine'
    • Home Page
Re: Custom javascript code to footer
« Reply #13 on: August 24, 2013, 03:07:17 pm »

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.
Quote from: http://php.net/manual/en/function.print-r.php
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]
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

« Last Edit: August 24, 2013, 03:45:24 pm by Joe Carver »
Logged

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #14 on: August 24, 2013, 04:50:58 pm »

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]
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.
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #15 on: August 24, 2013, 05:03:27 pm »

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]
require('./plugins/isotope/include/init.inc.php');

After put lang codes to function, then working. :) Great thanks!
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #16 on: August 24, 2013, 05:07:06 pm »

Modified to this, and it's ok:
Code: [Select]
global $CONFIG,$ISOTOPESET,$CPG_PHP_SELF;

require('./plugins/isotope/include/init.inc.php');
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #17 on: August 24, 2013, 05:11:34 pm »

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]
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";}
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15760
Re: Custom javascript code to footer
« Reply #18 on: August 26, 2013, 10:21:37 am »

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)
Logged

mykee

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: hu
  • Offline Offline
  • Gender: Male
  • Posts: 140
    • One moment from Hungary
Re: Custom javascript code to footer
« Reply #19 on: August 26, 2013, 10:45:50 am »

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  :o
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]
$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.)

 ???
Logged
My gallery and demo for AnythingSlider, Photocols and CollagePlus plugin: http://foto.acegem.hu/index.php
Pages: [1] 2   Go Up
 

Page created in 0.113 seconds with 20 queries.