Add jquery ui effects [sliding] in ajax loaded views content

Public

Sometime you want to add sliding effect or more jquery ui effect when views load more content by ajax. By default Drupal core support only 3 effect. see here https://api.drupal.org/api/drupal/includes%21ajax.inc/group/ajax/7
#ajax['effect']: The jQuery effect to use when placing the new HTML. Defaults to no effect. Valid options are 'none', 'slide', or 'fade'.
'slide' version of drupal core is just slide in of rows its not slide left, right, up and down.

</> CopyGet raw version
php
  1. //For this you have to create custom module. Jquery ui is added in Drupal 7 core but not all the jquery ui functionality and effect are enabled. You have to enable effect which you want to apply by drupal_add_library().
  2.  
  3. function MYMODULE_init() {
  4. // i am enabling slide effect, you can enable other effect located under /misc/ui like fold, scale, bounce etc.
  5. drupal_add_library('system', 'effects.slide');
  6. drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/js/CUSTOM.js');
  7. }
  8.  
  9. function MYMODULE_views_ajax_data_alter(&$commands, $view) {
  10. if ($view->name == 'YOUR_VIEW_NAME') {
  11. $arguments = array(
  12. array(
  13. 'CUSTOM_KEY' => $EXTRA_DATA_YOU_WANT_TO_PASS,
  14. ));
  15. // Add the custom javascript callback which will be called when content will be deliver through ajax for this view.
  16. $commands[] = ajax_command_invoke(NULL, 'YOUR_CUSTOM_JS_CALLBACK', $arguments);
  17. }
  18. }
  19.  
  20. //in CUSTOM.JS
  21. (function($, Drupal, window, document, undefined) {
  22. $.fn.YOUR_CUSTOM_JS_CALLBACK = function(arg) {
  23. $('.YOUR_JQUERY_SELECTOR').show('slide', {direction: 'right'});
  24. //direction can be up, down, left, right
  25. }
  26. })(jQuery, Drupal, this, this.document);