I am trying to integrate 3rd party jquery plugin Turnjs 3rd edition available on github in my website.

For this I have uploaded turnjs script on my server and called it in website through my theme.info file and my layout.inc

Installed jquery update and selected jquery 1.7

created a content type and added multi image field through which I have created this node http://patelbrothers.com.pk/content/mag1

which displays all the images of the field like following

    <div class="field field--name-field-flipping-book-images field--type-image field--label-hidden">
<div class="field__items">
    <div class="field__item even">
<img typeof="foaf:Image" src="pages/01.jpg" width="300px" height="auto">
    <div class="field__item odd">
<img typeof="foaf:Image" src="pages/02.jpg" width="300px" height="auto">
    <div class="field__item even">
<img typeof="foaf:Image" src="pages/03.jpg" width="300px" height="auto">
    <div class="field__item odd">
<img typeof="foaf:Image" src="pages/04.jpg" width="300px" height="auto">

and the CSS

    .field--name-field-flipping-book-images .field__items{
.field--name-field-flipping-book-images .field__items{
background-size:100% 100%;

After that using js injector module I have inserted the following before the closing body tag but still the script is not working.

    $(window).ready(function() {
    $('.field--name-field-flipping-book-images .field__items').turn({
                        display: 'double',
                        acceleration: true,
                        gradients: !$.isTouch,
                        when: {
                            turned: function(e, page) {
                                /*console.log('Current view: ', $(this).turn('view'));*/

$(window).bind('keydown', function(e){

    if (e.keyCode==37)
        $('.field--name-field-flipping-book-images .field__items').turn('previous');
    else if (e.keyCode==39)
        $('.field--name-field-flipping-book-images .field__items').turn('next');


closed as off-topic by Yusef, Mołot, marcvangend, Елин Й., 4life Sep 12 '14 at 15:16

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – Yusef, Mołot, Елин Й., 4life
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Did you check if all required assets, specifically the Turnjs script, are loaded in the browser? If not this may be a Drupal problem. Otherwise, this question seems off-topic to me. – marcvangend Sep 1 '14 at 11:09
  • Please check my answer below, Drupal require to wrap the code which I inserted through jsinjector module in (function ($) { // All your code here })(jQuery); – Fahad Sep 1 '14 at 16:58

It worked :)

Just wrapped my code inn

(function ($) {  
// All your code here

For Reference https://www.drupal.org/update/modules/6/7#javascript_compatibility

Not the answer you're looking for? Browse other questions tagged or ask your own question.