Colorbox problem

Topic Closed

Posts

I have found a problem with Colorbox after updating from TS 4.x to TS 5.x

In my theme template I have lines

   <?php  common::AddColorBox(); ?>
   <script>$(document).ready(function(){$(".fotobox").colorbox();});</script>

And I have successfully use link with class="fotobox" to open images in colorbox style on TS 4.x.

But on TS 5.x this no longer work.

May be I need to make some changes in template?

7 years ago#9435

juergen

1.5K	Posts
64.5K	Downloads
16	Plugins

Change the line

<script>$(document).ready(function(){$(".fotobox").colorbox();});</script>

<?php $page->jQueryCode .= '$(".fotobox").colorbox();'; ?>

Since Typesettter 5 all JavaScript libraries including jQuery will be loaded at the very end of the <body> element. Therefore, using JavaScript in the <head> that requires jQuery will cause errors.

7 years ago#9439

lena.mahotilo

Posts

Thank You!

I have read in posts something about this new feature of TS but didn't associate it to my problem. May be this solution should be in FAQ?

In http://www.typesettercms.com/Docs/Javascript

7 years ago#9440

juergen

1.5K	Posts
64.5K	Downloads
16	Plugins

I have read in posts something about this new feature of TS but didn't associate it to my problem.

It has turned out that putting the scripts at the very end of the markup improves page loading performance (enabling "progressive rendering"), especially on mobile devices.
So it's sort of "Best Practice" nowadays. With Typesetter 5 we have yet to get used to it.

BTW: using …

<?php
$page->head_js[] = "/path/to/some/script.js";      // LOAD A JS FILE
$page->head_script .= "\n var welcome = 'Helllo World!'; \n";     // WRITE JS CODE TO THE PAGE
$page->jQueryCode .= "$(document).ready( function(){ alert(welcome); });";     // EXECUTE JS CODE WHEN THE DOM IS LOADED
?>

…is always better than adding separate <script> tags to the template. This way Typesetter will be able to combine/concatenate the script code and load things in proper order.

You can still have vanilla Javascript in the <head> section of the page by adding a <script> tag to the template. But there are only rare cases where we actually need this.
With TS 5 we just do not have jQuery at this point.

Another tip: When things like tihs occur, check your browsers console for errors.
In our case it would have shown an error message like "$ is undefined", which is always a sign that for some reason jQuery is not/not yet loaded ($ = jQuery).

If more tricky Javacript errors occur, posting such a message to the forum can help a lot to find the cause and speed things up.

May be this solution should be in FAQ?

Yes there are quite some docs to be updated.
BTW: You can do this yourself. As a logged-in forum member you can edit the docs pages. Find the "Edit" link at the bottom..

Edited: 7 years ago#9441

juergen

1.5K	Posts
64.5K	Downloads
16	Plugins

May be this solution should be in FAQ?

Added

7 years ago#9442

daisychain

Posts

How do I add CDN scripts with this method? If I try e.g.

$page->head_js[] = "https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.1/isotope.pkgd.js";

the prefix for my site is to the url and I get 'file not found'.

Also, to add multiple scripts, do I just repeat that line each time, or is there a shorter way?

7 years ago#9493

juergen

1.5K	Posts
64.5K	Downloads
16	Plugins

...the prefix for my site is to the url and I get 'file not found'.

The function which deals with the script calls/inclusions is here. Maybe we need sth. like a $page->head_js_cdn array for that purpose.

Sorry, I don't have an answer for this one. A good question though.

Maybe Josh can enlighten us?

Also, to add multiple scripts, do I just repeat that line each time, or is there a shorter way?

You could pre-build an array with multiple script paths to be added and merge it with the head_js array afterwards but it wouldn't be much shorter, so I'd recommend to repeat the line - it's also easier to read IMO.

Edited: 7 years ago#9494

juergen

1.5K	Posts
64.5K	Downloads
16	Plugins

How do I add CDN scripts with this method?

For now the only way I can find is to load external scripts dynamically, e.g. as seen below


<?php
  //[...]
  gpOutput::GetHead();

  $external_js[] = "https://somecdn.com/some-jquery-plugin.js";
  $external_js[] = "https://somecdn.com/another-jquery-plugin.js";
 
  $page->head_script .= "\nvar external_js = " . json_encode($external_js) . "; \n";
  $page->head_script .= "\nfor (var i=0; i<external_js.length; i++){
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = external_js[i];
    // script.onload = function(){ /* do sth. if needed */ };
    document.body.appendChild(script);
  } \n";

  // INIT the plugins using $page->jQueryCode
  $page->jQueryCode .= "\n$('#myElement').some_jquery_plugin({ 
    option1 : 'value1', 
    option2 : 'value2' 
  });\n";

  //[...]
?>

Maybe there is already a better way I have overseen.
If not, it should be implemented into the CMS, e.g. like
$page->head_external_js[] = 'https://somecdn.com/some-jquery-plugin.js';

Edited: 7 years ago#9495

juergen

1.5K	Posts
64.5K	Downloads
16	Plugins

Maybe there is already a better way I have overseen.

;-) There is one.

After looking again into the MoveScript function I just realized, we can actually use …

$page->head .= '<script src="https://somecdn.com/some-jquery-plugin.js"></script>';

… because it will be moved to the scripts block at the end of the body element.

/edit: I added this to the Documentation

Edited: 7 years ago#9496

daisychain

Posts

Thank you, this worked for me. Still a few kinks but I have to work out if it's in the scripts/code or an upgrade issue.

7 years ago#9497

Topic Closed

Colorbox problem

News

Log In