I have made a view that displays one item per page, and uses the ajax pager.

I would like to show some simple JQuery transition effect between pages.

I know I could use some other plug in like Views Slideshow, or Views carousel, but neither of those allow you to load nodes by ajax, they load the entire view. And as my views are rather large, this would be too slow.

I did find this issue, which discusses the issue for D6/Views2, but I can't see anything similar in the Views3 ajax_views.js file to apply it to.

Should I just edit my views template, and try and insert some javascript there?

Any pointers greatly appreciated.

CommentFileSizeAuthor
#3 views_ajax_slide.zip1.8 KBspesso

Comments

dawehner’s picture

dawehner
Primary language German
commented
Status: Active » Fixed

You might want to learn the drupal ajax system.

In views/includes/ajax.inc there is the following code

      // Override the display's pager_element with the one actually used.
      if (isset($pager_element)) {
        $commands[] = views_ajax_command_scroll_top('.view-dom-id-' . $dom_id);
        $view->display[$display_id]->handler->set_option('pager_element', $pager_element);

This creates a new ajax command which will execute the following js function: "Drupal.ajax.prototype.commands.viewsScrollTop"

So if you want to implement your own logic here alter the commands via drupal_alter('views_ajax_data', $commands, $view);
and then create an alternative ajax command on the js side. This will give you a lot of flexibility.

medden’s picture

medden commented
Status: Fixed » Active

Thank you so much for taking the time to reply and explain.
The Drupal Ajax API page was really helpful for me.
I'm still trying to wrap my head around the way Drupal does things.
The ajax command you listed (views_ajax_command_scroll_top) seems to get called AFTER the ajax request has gone through.

If I wanted to add my own custom ajax command, that ran as soon as the Pager button was clicked, could you confirm this would be the right way......

create a custom module called 'mypager'.
in mypager.module:

function mypager_ajax(){
      if (isset($pager_element)) {
        drupal_add_js('/sites/all/modules/mypager/mypager.js');
        $commands[] = views_ajax_command_flip_left('.view-dom-id-' . $dom_id);
        $view->display[$display_id]->handler->set_option('pager_element', $pager_element);
      }
}
function mypager_ajax_command_flip_left($selector) {
  $command = array(
    'command' => 'mypagerFlipLeft',
    'selector' => $selector,
  );
  return $command;
}

In mypager.js

Drupal.ajax.prototype.commands.mypagerFlipLeft = function (ajax, response, status) {
  // Flip Left
  $('.views-row').fadeOut();
  $('.views-row').delay(600).fadeIn();
};
})(jQuery);

Will go and try this now, but I can't see anywhere I've bound it to the pager-left button. Think I'm missing something.
Any help appreciated.

spesso’s picture

spesso commented
StatusFileSize
new views_ajax_slide.zip1.8 KB

I had the same problem with a grid view which I wanted to slide from left to right and right to left from page to page. I ended up, starting from this post, with attached module.

medden’s picture

medden commented

Thanks for posting your code spesso.
Will try it out when I get a chance.

spesso’s picture

spesso commented

You are welcome... take it with care as there are lots of hardcoded things for my necessities of the moment. But it should point the way and help.

Main thing I fixed after working a bit with it is function:

function views_ajax_slide_(&$commands, $view) {
  if (arg(0) == "press" || arg(1) == "204") {
	  foreach ($commands as &$command) {
	    if ($command['command'] == 'viewsScrollTop') {	  	
	      $command['command'] = '';
			  
	    }
	    if ($command['command'] == 'insert') {
	      $command['command'] = 'ajaxFlipLeft';
		  $command['method']  = '';	
	    }
	  }
  }
}

If you don't restrict it to specific URL you will have problems with general ajax things like imagefield substitution as ajax_render_alter is invoked everywhere and "insert" method is very common.
It's obvious that paths should be somewhere in settings but this is the fast version!

:-)

b.one’s picture

b.one commented

Hi Spesso, how do you install your module "views_ajax_slide" ?
I dont find where to activate it in my view.

Thanks

mustanggb’s picture

mustanggb commented
Issue summary: View changes
Status: Active » Closed (outdated)