1

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>
    <div class="field__item odd">
<img typeof="foaf:Image" src="pages/02.jpg" width="300px" height="auto">
    </div>
    <div class="field__item even">
<img typeof="foaf:Image" src="pages/03.jpg" width="300px" height="auto">
    </div>
    <div class="field__item odd">
<img typeof="foaf:Image" src="pages/04.jpg" width="300px" height="auto">
    </div>
</div>
</div>

and the CSS

    .field--name-field-flipping-book-images .field__items{
width:600px;
height:392px;
}
.field--name-field-flipping-book-images .field__items{
background-color:#ccc;
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,
                        elevation:50,
                        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');

});
  • 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 Ur Rehman Sep 1 '14 at 16:58
0

It worked :)

Just wrapped my code inn

(function ($) {  
// All your code here
})(jQuery);

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.