Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
There is a form for configuring options for the flexslider. It would be great if it allowed for adding callback functions. Is there a way to override the ctools plugin? Or, does the module need a patch to accomplish that?
Comments
Comment #1
minorOffense CreditAttribution: minorOffense commentedWhat kind of callback are you looking for? Do you mean in javascript when certain actions occur in the slideshow? Or a hook of some kind in PHP to act on something?
Comment #2
wiktorb CreditAttribution: wiktorb commentedThere are 4 callback functions in flexslider configuration:
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide
but you can't setup it in current release unless you hack the module. It would be nice if I can add js file with callback functions to theme, and then specify functions names in configuration set admin/config/media/flexslider/edit/set_name
Comment #3
iamsquared CreditAttribution: iamsquared commentedThey are js functions that come standard with flexslider... any plans to integrate them?
Comment #4
minorOffense CreditAttribution: minorOffense commentedI'm a little hesitant adding a set of text areas where a user can enter arbitrary javascript to be executed.
I'll give it some thought, see how I might be able to get this in.
Comment #5
Adam S CreditAttribution: Adam S commentedI was just wondering if there was a way to do this in code? I'm sure there is a way but I couldn't figure it out.
Comment #6
eduardo.flores CreditAttribution: eduardo.flores commentedI was also looking for more than a month a way to use the after callback function, and right now I have just got it working. I'm using Flexslider Views Slideshow module for creating the sliders.
I edited the file flexslider/flexslider_views_slideshow/js/flexslider_views_slideshow.js in this file you can find all the current options, I added the after callback. In that file there is a variable called fullId which can be used to know which code to add to each slider:
this worked for me very well,
hope this can help you,
Eduardo
Comment #7
wiktorb CreditAttribution: wiktorb commentedI made a patch which adds callbacks settings to optionset.
Comment #8
minorOffense CreditAttribution: minorOffense commentedComment #9
Dentorat CreditAttribution: Dentorat commentedHas there been any update to this? I tried running the patch in #7, which gave me the options in the drupal interface, but as far as I could tell, they didn't actually work
Comment #10
minorOffense CreditAttribution: minorOffense commentedWe can't add the callbacks to the UI. The function drupal_json_encode takes any javascript and converts it to a string value. Which means the browser won't treat the text as "code" and you'll get errors.
If you want to use the callbacks, you'll have to use the library the old fashioned way. I'm keeping my eye on a module which offers a replacement for the default drupal_json_encode function which allows "code" text to be sent, but it's got some show-stopping issues at the moment.
Comment #11
Novascreen CreditAttribution: Novascreen commentedWhy don't you forward the events to the dom container so one can delegate multiple event handlers to it from anywhere?
I changed my flexslider.load.js in this way:
to
and then use:
You could also add the flexslider object as parameter.
I know this might not be the best implementation on my side, but i think you get the idea.
Comment #12
yang_yi_cn CreditAttribution: yang_yi_cn commentedI think a configurable UI might be too complicated, but #11 is a good solution for anyone want to implement it in code.
Can we get it committed?
Comment #13
yang_yi_cn CreditAttribution: yang_yi_cn commentedconvert #11 to a patch
Comment #14
minorOffense CreditAttribution: minorOffense commentedThere's no means of rendering the js from a text area in drupal to the browser (filters automatically kill that option).
But I do want to implement something like what you've done in that patch. Reading this post from lullabot http://www.lullabot.com/articles/your-javascript-should-expose-apis-too I just need time/feedback on which technique would work best.
Btw, I don't think we can use the
.on
method with jquery 1.4.4. But I could be wrong.Comment #15
yang_yi_cn CreditAttribution: yang_yi_cn commentedit looks like you can catch the event using .on() after jQuery 1.7 (that's the way the official jQuery doc uses), but before that you can use .bind() to catch an event (that's the way done in the lullabot article).
In both case the event can be send by .trigger(), so I don't think it's a problem to put the trigger function in here, it's added since jQuery 1.0 with the ability to trigger default javascript events, and in 1.3 you can trigger custom events.
Comment #16
rooby CreditAttribution: rooby commentedThe views slideshow cycle module allows you to enter js code for callbacks via the slideshow display setting in the views configuration. - However I believe it only lets you add, not edit, so to edit a snippet you have to remove it and re-enter it.
Having said that, I am also not a fan of the idea of entering code snippets into the database via the UI.
It introduces a possible world of pain.
I would love a solution where I can just integrate via javascript in a module or theme, either like #13 or like #14.
Comment #17
rooby CreditAttribution: rooby commentedNew version of patch in #13.
Also supports the views slideshow implementation.
Use bind() instead of on() with the default drupal jQuery, as mentioned in #14.
Comment #18
DaneMacaulay CreditAttribution: DaneMacaulay commentedrooby, exactly what i was thinking.
agree with minorOffense, providing events to act on makes this easily extensible.
keep js out of text inputs.
maybe the events should be more uniquely identified though, a preface of "flexslider_" ought to do the job
Comment #19
Anonymous (not verified) CreditAttribution: Anonymous commentedI've implemented the patch from #17, working great!
Comment #20
gooddesignusa CreditAttribution: gooddesignusa commentedAny chance this patch could be re-rolled for 7.x-2.x-dev version. Thanks in advance
Comment #21
chefnelone CreditAttribution: chefnelone commentedI'm also looking for this patch for version 7.x-2.
@gooddesignusa: did you find a way to get this working?
Comment #22
gooddesignusa CreditAttribution: gooddesignusa commented@chefnelone
I actually got this working manually. Since the patch didn't apply. I didn't create a patch because I didn't have enough time to test to make sure it added the callback to every scenario.
If you want to look over the changes and make a patch / test feel free.
This is what my flexslider.load.js looks like
Inside my theme script file I was running this code
Comment #23
chefnelone CreditAttribution: chefnelone commented@gooddesignusa: thanks!
Your code works but all sliders are shown with the Default "option set" even when you select another option set, for instance: "basic carousel". Have you tried using other option set (provided by the example module) than default?
Comment #24
Denis Danielyan CreditAttribution: Denis Danielyan commented@23
replace
$(this).flexslider($.extend(settings.flexslider.optionsets[optionset], {
with
$(this).flexslider($.extend(optionset, {
Comment #25
kenorb CreditAttribution: kenorb commentedPatch for 7.x-2.0-alpha1, should work also for 7.x-2.x (based on #22 and #24)
If jQuery hooks doesn't work, make sure that flexslider.load.js file is loaded. If not, please add flexslider_add(); into your preprocess function. Also if you're using Views, please make sure that you're using FlexSlider, not Slideshow format.
Comment #26
alexweber CreditAttribution: alexweber commentedPatch in #25 works for me, thanks!
Comment #27
kenorb CreditAttribution: kenorb commentedComment #28
alexweber CreditAttribution: alexweber commented@kenorb, not that I don't appreciate it, but it might be best to let others review this, setting to RTBC based off of one successful use case might be jumping the gun a bit :)
Comment #29
kenorb CreditAttribution: kenorb commentedTo summarise:
Patch from #7 has a little different approach as it's adding the settings for callbacks in UI.
Patch #25 is actually based on #17
The only suggestion about this patch is that triggers should use different names at #18
But based on #18, #19, #21, #22, #26 it seems that it was quite heavily tested by community.
So let maintainer decide what to do next.
Comment #30
minorOffense CreditAttribution: minorOffense commentedCommitted to dev.
Thanks for all the great work everyone!
Comment #31
minorOffense CreditAttribution: minorOffense commentedComment #32
justinen CreditAttribution: justinen commentedI was looking for a way to utilize callback functions to add some custom functionality to my flexslider created with views and luckily I found this post! The update that was submitted was very helpful, but the only thing it was lacking was the slider object parameter. I saw that in #11, Novascreen said "You could also add the flexslider object as parameter.", but this was never actually added to the update.
Unless I'm missing something, this is very important if you want to be able to customize the slider.
In \assets\js\flexslider.load.js under "_flexslider_init", I added the "slider" object as an optional parameter in the trigger function. Feel free to patch this if you think it's valuable to include.
if (optionset) {
// Add events that developers can use to interact.
$(this).flexslider($.extend(optionset, {
start: function(slider) {
slider.trigger('start', [slider]);
},
before: function(slider) {
slider.trigger('before', [slider]);
},
after: function(slider) {
slider.trigger('after', [slider]);
},
end: function(slider) {
slider.trigger('end', [slider]);
},
added: function(slider) {
slider.trigger('added', [slider]);
},
removed: function(slider) {
slider.trigger('removed', [slider]);
}
}));
Comment #33
l0calh0rst CreditAttribution: l0calh0rst commented@justinen: I second that. Was looking for the same thing.
To properly catch that event with the slider (adding an optionial pause here):
Comment #34
rooby CreditAttribution: rooby commentedIf you have something valuable to add please open a new issue and suply a patch file.
Comment #35
hkirsman CreditAttribution: hkirsman commentedSo how do you access the slider if it's not passed as a parameter in the callback? I think this issue is half-way done.
For example it's quite easy to make tabindex work if there would be slider object:
Proposed solution #32 from justinen works.
Comment #36
hkirsman CreditAttribution: hkirsman commentedComment #37
JuliaKoelsch CreditAttribution: JuliaKoelsch commentedI agree that the object is very helpful to include in the callback. I needed the currentSlide value so that I could apply additional css to elements outside of the slider.
I have created a patch of the code supplied in #32.
Comment #38
alexweber CreditAttribution: alexweber commentedPatch looks fine to me!
Comment #39
emanaton CreditAttribution: emanaton commentedRe-rolling patch from comment 37 to be compatible with make-file inclusions.
Comment #40
jonathan_hunt CreditAttribution: jonathan_hunt commentedRe-roll to add missing init() callback.
Comment #42
DamienMcKennaThe patch in #40 seems to work.
Comment #43
JuliaKoelsch CreditAttribution: JuliaKoelsch commentedThe latest patch in #40 works for me as well. Thanks!
Comment #44
sokrplare CreditAttribution: sokrplare commentedComment #45
couloir007 CreditAttribution: couloir007 commentedI have applied the patch and used this piece of code just to see if I can get it right.
I am unable to get callbacks working. Is there something else that I am missing?
Thank you.
Comment #46
couloir007 CreditAttribution: couloir007 commentedI realized I had the code located where is was running before flexslider had initialized.
Comment #47
ada05 CreditAttribution: ada05 commented@couloir007 how did you solve it? where did you place the code?
Comment #48
couloir007 CreditAttribution: couloir007 commented@ada05, I put it in a Drupal.behaviors function. Similar to what is below.
Comment #49
bneil CreditAttribution: bneil at The University of Iowa commentedThe patch in #40 works well for me.
Comment #50
minax.de CreditAttribution: minax.de commentedAs the additional patch for passing the slider object into the event handler is not yet committed, a possible workaround would be:
var slider = $(this).data('flexslider');
as documented here: https://github.com/woothemes/FlexSlider#general-notes.Comment #51
maadis.ie CreditAttribution: maadis.ie commentedHi,
I have stalled flexslider module 7.x-2.0-rc1 with flexslider library 2.6, and slideshow is working fine. My slide is normal - photos on image and messages/captions on body field - and I have shown body field on top of the image on transparent. I would like to give sliding and delay effect on messages/captions after the actual image goes on the slide. I have been trying to use start, before and after callback functions, like:
Trying all possible combinations did not work, and now I saw this link. Do I have to apply the patch? The version I am using is 7.x-2.0-rc1. I am trying to give delay and sliding effect of the message of active slide (.flex-active-slide) using after() callback.
I appreciate if you could give me some pointers how I go about this.
Thanks, Maadis
Comment #52
adam1 CreditAttribution: adam1 commentedI read this thread but in the end I didn't know what steps to go to implement the functionality I wrote below. (At the moment I am using flexslider 2.0-rc1). Would be glad if someone could list the steps.
Comment #53
bneil CreditAttribution: bneil at The University of Iowa commented@adam1:
Use the reference in #48 to bind to the start method via the Drupal Behaviors functionality. You will need to add this to a javascript file that a custom module or your theme is loading.
Comment #54
jwilson3Just chiming in to say this issue was the first thing that popped up in my Google search for how to alter a flexslider only after it loads and modifies its own dom structure.
couloir007's post in #48 is the perfect solution. Thanks to all who worked on getting this in.
Comment #55
adam1 CreditAttribution: adam1 commented@bneil thank you!
Comment #57
minorOffense CreditAttribution: minorOffense at Coldfront Labs Inc. commentedPatch applied. Thanks a lot for the hard work!
Comment #59
thronedigital CreditAttribution: thronedigital commentedComment #60
gvsoI followed #48 and I'm unable to make it work.
This doesn't work. I'm using views_slideshow_flexslider. Can that be the reason?
Comment #61
TheGentleman CreditAttribution: TheGentleman commentedSo I'm trying to use the flexslider callback function but nothing seems to be triggering. What I'm trying to do is make a callback to my slideshow and trigger a function after each slide change. My google search brought me here. I'm just trying to trigger a console log to make sure it is even triggering after every slide change. This is what I have in my javascript file
nothing is coming up in my log. I'm sure there's something simple i'm mising but I don't know what it is. I tried #48 solution but nothing is happening either. HELP!
Comment #62
hkirsman CreditAttribution: hkirsman commentedAnd you applied the patch?
Comment #63
lbrassaw CreditAttribution: lbrassaw as a volunteer commentedYou don't have to apply the patch anymore. It's been applied. Use:
Thanks all for the hard work over the years. ;)
Comment #64
randell CreditAttribution: randell commentedTested #63 to work on 7.x-2.0-rc2.
Comment #65
thetwentyseven CreditAttribution: thetwentyseven commentedI have the version 7.x-2.0-rc2 and using the #63 code. It is not working for me.
I can see 'test js' in my console but not the rest. What could be happening? I also tried with a different scope and weight in drupal_add_js. I cleared cache, and advagg too just in case. Any ideas?
Solution: The problem was that I was using flexslider with a view which use the module https://www.drupal.org/project/flexslider_views_slideshow. Therefore I had to apply another patch for that module #2149779: Allow the use of the flexslider callback functions?