0

I am having trouble getting TurnJS working, i am loading all the images dynamically and i get all the images displayed at first, then after a few seconds once the page has loaded, the first and second image are displayed, the rest hidden, the image moves on hover but the whole flipbook isn't working and its not changing pages (unlike when i tried getting this to work on the basic version, although it wasn't perfect i had the pages turning), i think i may be loading the jquery in the wrong order (See below):

$this->template->styles['/assets/css/magazine.css'] = 'screen';
$this->template->styles['/assets/css/jquery.ui.css'] = 'screen';
$this->template->styles['/assets/css/jquery.ui.html4.css'] = 'screen';
$this->template->jscripts[]='assets/libraries/modernizr.2.5.3.min.js';
$this->template->jscripts[]='assets/libraries/jgestures.min.js';
$this->template->jscripts[]='assets/libraries/jquery-ui-1.8.20.custom.min.js';
$this->template->jscripts[]='assets/libraries/jquery.mousewheel.min.js';
$this->template->jscripts[]='assets/scripts/turn.js';
$this->template->jscripts[]='assets/scripts/turn.min.js';
$this->template->jscripts[]='assets/scripts/turn.html4.js';
$this->template->jscripts[]='assets/scripts/turn.html4.min.js';
$this->template->jscripts[]='assets/scripts/hash.js';
$this->template->jscripts[]='assets/scripts/zoom.js';
$this->template->jscripts[]='assets/scripts/zoom.min.js';
$this->template->jscripts[]='assets/scripts/magazine.js';

Jquery is already loaded so i don't need to load it again here just any extra libraries/scripts i need. The following errors i am getting in firebug are:

  • TypeError: $(...).turn is not a function
  • TypeError: Argument 1 of Node.insertBefore does not implement interface Node.
  • Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
  • TypeError: book.turn is not a function

I have added my code here just so you can see what i have done, any help/guidance would be appreciated!

This is what i am aiming for here

If i look under scripts in firebug, it shows me the following order:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='/apps/assets/libraries/jquery-1.6.2.min.js'>\x3C/script>")</script>
<script type="text/javascript" src="/apps/assets/libraries/jquery-ui-1.8.12.custom.min.js"></script>

...and then all my scripts follow, which shows its loading jquery first?

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
Karina
  • 665
  • 6
  • 17
  • 35
  • It looks odd that you're loading both `turn.js` and `turn.min.js` (and similar for `turn.html4` and `zoom`). – T.J. Crowder Jan 26 '14 at 14:13
  • That output you've added to the end of the question looks suspicious, because it starts with `jquery-ui-1.8.12.custom.min.js`, but the first script in your code block above is `assets/libraries/modernizr.2.5.3.min.js`, jQuery UI is a couple of scripts further down. Perhaps you're not editing the right file, or filling in the right scripts array? – T.J. Crowder Jan 26 '14 at 14:29
  • No it is correct as i am just adding my scripts to an existing array which starts with that `jquery-ui-1.8.12.custom.min.js` thats why its appearing first. Maybe i should try just adding my scripts there instead and see if that makes any difference? – Karina Jan 26 '14 at 14:41
  • 1
    @ Karina: If jQuery UI is already in the array, why are you adding it again? And again -- see my first comment above -- what's with adding both the un-minified and minified versions of things? This all just looks really, really confused and haphazard. I suggest stepping back and working through, very methodically, what you're adding, where, and why. – T.J. Crowder Jan 26 '14 at 14:43

0 Answers0