By Karinaj on

I want to add functionallity to my site with a jquery plugin that isn't in the drupal core. Should I build my own module for that or maybe I can put it somewhere and use a standart funcionality of drupal 7 for using it?

⋅ Categories: Drupal 7.x

Comments

joe casey’s picture

joe casey commented

Here's what I did: Create a js subdirectory in your theme, if there isn't one there already.
Put the jquery plugin there, along with whatever other js you need to control the plugin.

Then add the details to your theme's .info file:

scripts[] = js/custom-slideshow.js
scripts[] = js/jquery.cycle/jquery.cycle.all.min.js

Where custom-slideshow.js is my own control information for jquery.cycle (transition effect, delay, etc.)
custom-slideshow.js uses the selector #my_slideshow, where I want jquery.cycle to be active.
For my purposes I made a block with an empty div <div id="my_slideshow"></div>. Your plugin may need a different setup.

That did it for me.

Note 1: I needed jquery.cycle because I couldn't find a gallery module that was Drupal 7-ready.
Note 2: I put this right in the Bartik core theme, which is not the best way, but I haven't got Bartik sub-theming working yet.

apos’s picture

apos commented

custom-slideshow.js uses the selector #my_slideshow

Hi Joe,

could you post the code of your custom-slideshow.js file.

I am using http://drupal.org/project/jquery_plugin for "jQuery.cycle".
I have a lot of trouble getting cycle via jquery_plugin run with drupal 7.

jQuery with e.g. accordion (which is already included in drupal 7) is working well using the following code in my content (using php textfilter module)

<?php
drupal_add_library('system', 'ui.accordion');
drupal_add_js('jQuery(document).ready(function(){jQuery("#myCustomDiv").accordion();});', 'inline');
?>

<div id="myCustomDiv">
<h3><a href="#">Section 1</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

[...]

But how does the according code for drupal_add_library and drupal_add_js for the cycle via jquery_plugin look like?
Unfortunately documentation gives us almost only drupal 6 examples.

Greets Axel

apos’s picture

apos commented

OK got it working so far like this:

- using php as textfilter
- enabled jquery_plugin module
- just written into the content of a page (no template.php, not Drupal.behavior. ..., or other complicated constructions)

<?php
drupal_add_library('jquery_plugin', 'cycle');
drupal_add_js('jQuery(document).ready(function(){
     jQuery("#mySlideshow").cycle();
});', 'inline');
?>

<div id="mySlideshow" class="slideshow">
    <img src="/sites/yoursite/files/images/picture1.png" />
    <img src="/sites/yoursite/files/images/picture2.png" />
</div>

Where "slideshow" is the according css-class formatting the slideshow.

holy Cow ... adding parameters / settings was a mess, but is really easy, if you are aware of dealing with php code ;)

<?php
drupal_add_library('jquery_plugin', 'cycle');
drupal_add_js('jQuery(document).ready(function() {jQuery("#mySlideshow").cycle({
    fx:  \'scrollDown\',
    speed: 2000,
    timeout: 20000
});});', 'inline');
?>

That's the whole magic: backslashes. This is more worst than bash scripting ;)

Now you can do all the magic like in http://www.malsup.com/jquery/cycle .

So I hope it helped someone.
Greets Axel

gphilippe’s picture

gphilippe commented

i tried but i could not in an article ( no effect at all) but i did with view and the cycle libraries in all/librairies.
What are the need to do this in an article ?

apos’s picture

apos commented

see reply: http://drupal.org/node/1043478#comment-4233810

choitz’s picture

choitz commented

This really helped!!

jaypan’s picture

jaypan
Location Victoria, BC
commented

As this functionality is site based rather than theme based - i.e. you want it on your site no matter what theme you are using - it's best to create it with a module. There isn't a standard functionality that will implement your plugin.

Contact me to contract me for D7 -> D10/11 migrations.

apos’s picture

apos commented

Sorry for the late answer, but I didn't got an email.

There seams be missing something in your jquery installation. Be aware that not all jquery versions work with all jquery plugins. Thats why I stay with the drupal modules! Be aware that jquery is always part of drupal 7 in a certain version !!!

See e.g. : http://drupal.org/project/jquery_plugin , http://drupal.org/project/jquery_update

Just include the jquery_plugin module (not tested with third party js files, but should work if the plugin and used jquery version are in perfect harmony, if not using jquery_update module might help).
Then enable the php module (which gives you a new textfilter).

Then either write your "article" completely in php textfilter, which is not that a good idea or simply create a new block with no title ( include the titlename <none> and it will be invisible) and include you php code there with (!) the php textfilter enabled. The block must be on the same side like your article. Since it includes not text, only javascript, it is invisible, put it into the header or somewhere else.

Example:

Put this into a block located in the header of you site: 

<?php
drupal_add_library('jquery_plugin', 'cycle');
drupal_add_js('jQuery(document).ready(function() {jQuery("#mySlideshow").cycle({
    fx:  \'scrollDown\',
    speed: 2000,
    timeout: 20000
});});', 'inline');
?>

Then put the following into you article using whatever textfilter you like:

[... other text]
<div id="mySlideshow" class="slideshow">
    <img src="/sites/yoursite/files/images/picture1.png" />
    <img src="/sites/yoursite/files/images/picture2.png" />
</div>
[... other text]

The same works for e.g. Accordion.
I am sure, you will get it working ;)

Greets
Axel

kriskhaira’s picture

kriskhaira commented

Hi. Searching for a solution to this problem led me to this page. I followed the above examples with some changes - I've put my code in template.php and an external JS.

1. Install the jQuery plugins module

2. Edit template.php:

function THEMENAME_preprocess_html(&$variables, $hook) {
  if (drupal_is_front_page()) {
    drupal_add_library('jquery_plugin', 'cycle');
    drupal_add_js(drupal_get_path('theme', 'THEMENAME').'/js/slideshow.js');
  }
}

3. Create slideshow.js and insert this file:

jQuery(document).ready(function() {
  jQuery(".view-slideshow ul").cycle();
});

Remember to clear your theme registry after editing functions in template.php.

Update: Worth nothing that for a slideshow feature, you can just use the Views Slideshow module.

smubzi’s picture

smubzi commented

here''s what I have on the .js

$(document).ready(function() { $('.slideshow') .before('
bhill9270’s picture

bhill9270 commented

Instead of using the href and accompanying text, it is creating it's own hrefs with numbers. Anyone know how to tell it to use the pagers I want instead of creating a new div on the fly?

NIKS_Artreaktor’s picture

NIKS_Artreaktor commented

I'm trying to add plugin jquery.backstretch.min.js

If load it by that way
in page--front.tpl.php

drupal_add_js(drupal_get_path('theme', 'tour') . '/js/jquery.backstretch.min.js','file');

add setting for function....
IT DON'Tt WORKING

BUT IF
Load jquery.min.js (that already loaded by JQuery update module) TWICE - IT WORKING.

drupal_add_js('/sites/all/modules/jquery_update/replace/jquery/1.5/jquery.min.js','file');
 drupal_add_js(drupal_get_path('theme', 'tour') . '/js/jquery.backstretch.min.js','file');

What I'm doing WRONG ???

Please tell :)

www.ArtReaktor.com

roblog’s picture

roblog
Primary language English
Location Cymru
commented

If your using the jQuery Update module, like I am, I found I could only make this work with the version number set up to v1.8. On my system v1.9 and v1.10 do not work. Hopefully this will save someone the load of hassle I just went through to get this solution working. Very helpful post though :)