Add jcarousel support

Wrong issue queue.

Did you ever figure this out? I'm in the same boat! I've tried forums, the developers and no one answers!

jcarousel support is in progress. i haven't finished implementing it yet, and can't till next month. expect something early april.

aaron

Has there been any updates to this? JCarousel would be a great addition to this.

subscribing

subscribing

subscribing

subscribing

Looks like there needs to be a new plugin created for using jCarousel module. Marking as feature request.

Coming soon :D

Super psyched this feature is coming. :D

I'll be switching to this module if this gets implemented.

subscribe

subscribe

I will be using this, it will really complete the thumbnail view.

FYI: The Galleria Module integrates with jCarrousel and this hack works for auto advance: http://drupal.org/node/632650
though I am back to views_slideshow-6.x-2.0-beta2.

subscribe

Postponing to be looked at in a future release.

Subscribing.

subscribing

subscribe

Attached is a rough version based on ThumbnailHover. Extract it into the contrib directory and enable the module to use. It supports fields or node/teasers just like ThumbnailHover. The tar.gz includes JCarousel as a library although you can also add it with jQ and it will prefer that version.

The options form has settings for the name of the JCarousel theme as well as the path. It defaults to use the built in tango theme in the included JCarousel package.

fearlsgroove is there a way we can use http://drupal.org/project/jcarousel to provide the carousel?

EDIT: I misread ... you had actually asked to simply let JCarousel supply the carousel library, which it can certainly look for.

Hrmm i tried this out on a test site, and using JCarousel's library it comes out borked. Also borked with jq and jcarousel modules enabled. Not sure why exactly .. perhaps it uses an older version of the library? Library re-use is the only positive use-case here, so if you think it's a deal-breaker I can try to look into it, but I don't consider it a high priority. I'd be all for it if it "just worked" :D

The problem is that JCarousel's version is quite a bit older -- the markup has changed so the default theme, which this views_slideshow version sets as the tango version it includes, doesn't work right. It would seem to make more sense to support the new version. If JCarousel would simply update their included version all would be well; maybe I'll submit an issue there

fearlsgroove, Would you mind implementing this into a new module and releasing it on d.o.? I think for now we don't need any additional modules inside views_slideshow. What do you think?

I'll look into it if you'd prefer it weren't included in the module itself.

Any news on the jcarousel support in v.slideshow, i'm after a solution like this for a site i'm working on?

Hello, may I ask about the current status of this functionality? I'd also need this feature.
Thank you very much for your efforts on this! :)

Stefan

I would like to know if development on this is still on going as well. I think is a great idea to include this functionality into the module itself. I have been playing around with the jcarouselthumbs module posted by @fearlsgroove but I have not been able to get it working with the latest recommended release of view slideshow.

+1 for an update

I'll say as far as views_slideshow module is concerened I haven't looked at it. Now in version 3.x I am working on allowing a way for pluggable pager system. This could allow for easier ways of adding support for jcarousel. Now that said views 3 has a new pluggable pager system that I haven't looked at yet and I might be able to use that for the pagers. So there is still a lot of work to be figured out.

I've created a new project to house this plugin:
http://drupal.org/project/views_slideshow_jcarouselthumbs

It's VS 2.x compatible only at the moment. There should be a -dev release by tomorrow. Feedback appreciated!

awesome, @fearlsgroove! i've added a link from the main project page for that.

Nice work I actually plan to use this for a new project so I will give you my feedback soon. Thank you for working on this.

Another solution:
- install http://drupal.org/project/jcarousel (tested with 6.x-2.3)
- configure views_slideshow as ThumbnailHover (6.x-2.3)
- paste into view's Footer following php code

print '<script type="text/javascript">jQuery(\'.views_slideshow_thumbnailhover_breakout_teasers\').wrapInner(\'<ul class="breakout_teasers_carousel jcarousel-skin-default"></ul>\').find(\'ul > div.views_slideshow_thumbnailhover_div_breakout_teaser\').wrap(\'<li></li>\');</script>'; 
jcarousel_add('breakout_teasers_carousel');

tactiuseu works great! Is there an easy way to make more than 4 thumbnails show in the carousel?

jcarousel_add('breakout_teasers_carousel', array('visible' => 5));

The solution in #38 didn't work for me in id D7 (I made the necessary changes to match the pager classes for D7) but I figured out another way to do it if anyone comes across this post:

EDIT: This post was written using the development version of Views Slideshow (April 5, 2011) and at that time the preprocessor function (used below) was named template_preprocess_views_slideshow_pager_fields_render(). Since then it has been changed to template_preprocess_views_slideshow_pager_fields(). I've updated this post to reflect the correct function name.

/**
 * This is the theme function that formats all the pager items and renders
 * them for the template file (views-slideshow-pager-field.tpl.php)
 * 
 * We are going to override the $vars['rendered_field_items'] to be a themed
 * jcarousel of the pager items instead of it's normal output.
 * 
 * This is a copy of the function template_preprocess_views_slideshow_pager_fields
 * with a few modifications to create the jcarousel
 * 
 * In addition to this function, you will need to override a bit of javascript
 * which is described further down in this post
 */
function [YOUR_THEME_NAME]_preprocess_views_slideshow_pager_fields(&$vars) {
  
  // If it's the view we want to jcarousel-ify the pager for
  if ($vars['view']->name == '[YOUR_VIEW_NAME]' && $vars['view']->current_display == '[YOUR_VIEW_DISPLAY]') {
  
    // Build our javascript settings.
    $js_vars = array(
      'viewsSlideshowPagerFields' => array(
        $vars['vss_id'] => array(
          $vars['location'] => array(
            'activatePauseOnHover' => $vars['settings']['views_slideshow_pager_fields_hover'],
          ),
        ),
      ),
    );

    // Add the settings to the page.
    drupal_add_js($js_vars, 'setting');

    $vars['classes_array'][] = $vars['attributes']['class'];
    $vars['widget_id'] = $vars['attributes']['id'];
    // Add our class to the wrapper.
    $vars['classes_array'][] = 'views_slideshow_pager_field';

    // An array to store the pager items to be passed into theme('jcarousel') at the end
    $jcarousel_items = array();

    // Render all the fields.
    $vars['rendered_field_items'] = '';
    foreach ($vars['view']->result as $count => $node) {
      $rendered_fields = '';
      foreach ($vars['settings']['views_slideshow_pager_fields_fields'] as $field => $use) {
        if ($use !== 0 && is_object($vars['view']->field[$field])) {
          $rendered_fields .= theme('views_slideshow_pager_field_field', array('view' => $vars['view'], 'field' => $field, 'count' => $count));
        }
      }

      // Save the themed pager items to an array rather than a concatenated string
      $jcarousel_items[] = theme('views_slideshow_pager_field_item', array('vss_id' => $vars['vss_id'], 'item' => $rendered_fields, 'count' => $count));
    
    }
    // This Javascript should live somewhere in you theme.
    // The details of the file are after this function
    drupal_add_js(drupal_get_path('theme', '[YOUR_THEME_NAME]') . '/scripts/views_slideshow_pager.js');
    // These are options for the jcarousel plugin
    // See sorgalla.com/projects/jcarousel/#Configuration for more options information
    $options = array(
      'scroll' => 1, // how many to scroll by
      'visible' => 2, // only show two items at a time
      'vertical' => TRUE, // use a vertical pager
    );
    // Override the rendered field items output
    $vars['rendered_field_items'] = theme('jcarousel', array('items' => $jcarousel_items, 'options' => $options));
    
  }
  // Otherwise we just preprocess normally
  else {
    template_preprocess_views_slideshow_pager_fields($vars);
  }
  
}

In addition to the above theme function override, you will need to add a little bit of javascript to a file named views_slideshow_pager.js somewhere in your theme folder. The reason you need to do this is because by default the views slideshow actions that are applied to the pager items are applied directly to the children of the pager items containing div. However, now that we've put a jcarousel as the first child of that containing div, the actions no longer get properly applied. The override below is almost an exact copy of the original Drupal.behaviors.viewsSlideshowPagerFields, except now it uses the .find() method to figure out which elements to apply the slideshow actions to.

/**
 * @file sites/all/themes/my_custom_theme/scripts/views_slideshow_pager.js
 *
 * Override the viewsSlideshowPagerFields to use find() instead of
 * children() to figure out which elements to apply the actions to
 * This allows for jcarousel to be used for the pager by simply
 * overriding the theme function: 
 * template_preprocess_views_slideshow_pager_fields()
 */

(function ($) {
// Add views slieshow api calls for views slideshow pager fields.
Drupal.behaviors.viewsSlideshowPagerFields = {
  attach: function (context) {
    // Process pause on hover.
    $('.views_slideshow_pager_field:not(.views-slideshow-pager-field-processed)', context).addClass('views-slideshow-pager-field-processed').each(function() {
      // Parse out the location and unique id from the full id.
      var pagerInfo = $(this).attr('id').split('_');
      var location = pagerInfo[2];
      pagerInfo.splice(0, 3);
      var uniqueID = pagerInfo.join('_');

      // Add the activate and pause on pager hover event to each pager item.
      if (Drupal.settings.viewsSlideshowPagerFields[uniqueID][location].activatePauseOnHover) {
        // Use .find() instead of .children()
        $(this).find('.views-slideshow-pager-field-item').each(function(index, pagerItem) {
          $(pagerItem).hover(function() {
            Drupal.viewsSlideshow.action({ "action": 'goToSlide', "slideshowID": uniqueID, "slideNum": index });
            Drupal.viewsSlideshow.action({ "action": 'pause', "slideshowID": uniqueID });
          },
          function() {
            Drupal.viewsSlideshow.action({ "action": 'play', "slideshowID": uniqueID });
          });
        });
      }
      else {
        // Use .find() instead of .children()
        $(this).find('.views-slideshow-pager-field-item').each(function(index, pagerItem) {
          $(pagerItem).click(function() {
            Drupal.viewsSlideshow.action({ "action": 'goToSlide', "slideshowID": uniqueID, "slideNum": index });
          });
        });
      }
    });
  }
};
})(jQuery);

subscribe

A note to #41, the function has been renamed apparently leaving off "render" to [YOUR_THEME_NAME]_preprocess_views_slideshow_pager_fields(&$vars)
Thanks, drclaw!

While the snippet in #38 worked well, it didn't provide functionality which scrolled the carousel automatically when using the prev/next buttons.

In the Views Slideshow JCarousel Thumbs module this works well.

#41 worked great, Thanks!

As mentioned by #43, you need to remove the word "_render" from function name, as well
template_preprocess_views_slideshow_pager_fields_render($vars);

Thanks for the tip. I guess that function name has changed recently. I updated the post with an "edit" note at the top.

Hi drclaw.

Seems that the function has the _render at the end (that was the only way that works for me).

I'm using:

Drupal 7.8
Libraries 7.x-1.0
Token 7.x-1.0-beta5
jCarousel 7.x-2.4-alpha3
Views 7.x-3.0-rc1
Views Slideshow 7.x-3.0-alpha1
Views Slideshow: Cycle 7.x-3.0-alpha1
Views UI 7.x-3.0-rc1

Thanks a lot !

Hi Yaazkal,

I think it's changed in the Views Slideshow: 7.x-3.0-dev version. The alpha is pretty old (last updated 2011-mar-12) so it's no surprise it still has the _render.

drclaw

Hi drclaw thanks for your answer.

Thanks a lot for your code it was very helpfull for me :)

Thanks for all of the wonderful information drclaw!

I'm stuck though. I added the javascript code to the views_slideshow.js file. I don't seem to have a 'views_slideshow_pager.js' file. Is this ok? Does it matter where you put it in the file?

You still make the format for the view as slideshow, right?

What I really don't get is where do you put the php code? I can't find any place to put it in the view. Or do you put it in a file?

Thanks again.

(I am running D7 and I believe I have all of the most recent versions of the modules yaazkal listed)

wicked! it works! cheers!

php function goes into template.php

js goes into 'views_slideshow_pager.js' located in your theme in the scripts folder

use the newest dev-version of views slideshow.

now lets apply that to http://drupal.org/node/1091972

Thanks discipolo, but I'm still stuck. I am running Views Slideshow 7.x-3.x-dev, and I can't find a template.php or views_slideshow_pager.js.

We are looking in the views_slideshow folder, correct? (sites>all>modules>views_slideshow)

I have views_slideshow.js in the js folder within views_slideshow. I also have views_slideshow_cycle.js in the corresponding folder. I ran a search on my computer (drupal is running locally), and there is no views_slideshow_pager.js. :(

I cannot find any template.php files in any of the folders in views_slideshow either. Do you mean the template I am using for the entire site (drupal>themes>theme-name)?

template.php is in your theme folder and views_slideshow_pager.js is a file you add to your theme.

Sorry for all of the questions, but I'm still a bit confusued. So you save the javascript as a new file called views_slideshow_pager.js in sites>all>modules>views_slideshow>theme?

I don't have a template.php file in my views_slideshow>theme folder either. Do I save the above code as template.php?

I've never worked with php before. Do I change the places that say things like "[YOUR_THEME_NAME]" or "[YOUR_VIEW_DISPLAY]" to go with the view that will contain the slideshow? Leaving it as-is gives a syntax error in Dreamweaver for the first function line.

In your sites/all/themes/[your-theme-directory]

Ok, I've found the folder for sites/all/themes/, but the only thing in there is a readme file. Do I create a folder for the theme? Does it matter what I call it?

Here is what I've done (which didn't work):

- Created a Folder in sites/all/themes/ called 'views_slideshow_cycle' (named it the same as the slideshow type I'm using- not sure if that matters)

- Opened a new PHP file in Dreamweaver and copied/pasted the php code. Saved it as sites/all/themes/views_slideshow_cycle/template.php

- Changed '[YOUR_THEME_NAME]' to 'views_slideshow_cycle'; Changed '[YOUR_VIEW_NAME]' to '[product_images]' (the name of the view) ; Changed '[YOUR_VIEW_DISPLAY]' to '[image_view]' (the display name)

- Created a scripts folder in views_sildeshow_cycle (it seemed like this is where the js should go from the php code)

- Created a new js file and copied/pasted the js in it. Saved it as sites/all/themes/views_slideshow_cycle/scripts/views_slideshow_pager.js

Is there a step or file I'm missing? Somthing I'm doing wrong? I already have the slideshow set up, but do you do anything in drupal after saving the js and php files?

Thanks again for the help.

I would either search information on how to create a custom theme or install a contributed theme and work from there. Once you have that done then these instructions will make a lot more sense.

Ok, thank you. I will certainly do that. I didn't understand that's where I needed to start. :)

Has anybody tested on

Views Slideshow 7.x-3.0
jCarousel 7.x-2.5

?

I just upgrade and is not working :(

#41 works great for me, except the code will override the "Hide pager if there is only one slide" option by displaying it anyway. I fixed it by adding this code:

function [YOUR_THEME_NAME]_preprocess_views_slideshow_pager_fields(&$vars) {
  // If it's the view we want to jcarousel-ify the pager for
  if ($vars['view']->name == '[YOUR_VIEW_NAME]' && $vars['view']->current_display == '[YOUR_DISPLAY_NAME]') {
    
    // ADDED: This prevents override of the hide_on_single_slide option.
    if ($vars['settings']['hide_on_single_slide'] && count($vars['view']->result) <= 1) {
      template_preprocess_views_slideshow_pager_fields($vars);
      return;
    }
    ... the rest of the code here ...
}

(Using Views Slideshow 7.x-3.0 and JCarousel 7.x-2.6.)

Thanks, drclaw!

Another note regarding #41: Using this code, I was having trouble with activatePauseOnHover getting "unset" with an exposed filter. It worked fine on page load (set to "0"), but once the exposed filter was submitted the value of activatePauseOnHover became "0,0" which was evaluating as TRUE. Don't know what could be causing this, and hopefully there aren't any side effects I haven't seen, yet, but everything seems to work wonderfully now that I've removed the JS settings bit from your code.

This is the snippet I removed:

    // Build our javascript settings.
    $js_vars = array(
      'viewsSlideshowPagerFields' => array(
        $vars['vss_id'] => array(
          $vars['location'] => array(
            'activatePauseOnHover' => $vars['settings']['views_slideshow_pager_fields_hover'],
          ),
        ),
      ),
    );

    // Add the settings to the page.
    drupal_add_js($js_vars, 'setting');

Hi

This feature would be awesome and it's just what I'm looking for, but I can't seem to get this patch to work.

I'm using Zen 7.x so I went on and added this bit of code to the template.php in my custom theme folder:

function [tubetheme]_preprocess_views_slideshow_pager_fields(&$vars) {
  
  // If it's the view we want to jcarousel-ify the pager for
  if ($vars['view']->name == '[frontpage_slideshow]' && $vars['view']->current_display == '[panel_pane_1]') {
  
    // Build our javascript settings.
    $js_vars = array(
      'viewsSlideshowPagerFields' => array(
        $vars['vss_id'] => array(
          $vars['location'] => array(
            'activatePauseOnHover' => $vars['settings']['views_slideshow_pager_fields_hover'],
          ),
        ),
      ),
    );

    // Add the settings to the page.
    drupal_add_js($js_vars, 'setting');

    $vars['classes_array'][] = $vars['attributes']['class'];
    $vars['widget_id'] = $vars['attributes']['id'];
    // Add our class to the wrapper.
    $vars['classes_array'][] = 'views_slideshow_pager_field';

    // An array to store the pager items to be passed into theme('jcarousel') at the end
    $jcarousel_items = array();

    // Render all the fields.
    $vars['rendered_field_items'] = '';
    foreach ($vars['view']->result as $count => $node) {
      $rendered_fields = '';
      foreach ($vars['settings']['views_slideshow_pager_fields_fields'] as $field => $use) {
        if ($use !== 0 && is_object($vars['view']->field[$field])) {
          $rendered_fields .= theme('views_slideshow_pager_field_field', array('view' => $vars['view'], 'field' => $field, 'count' => $count));
        }
      }

      // Save the themed pager items to an array rather than a concatenated string
      $jcarousel_items[] = theme('views_slideshow_pager_field_item', array('vss_id' => $vars['vss_id'], 'item' => $rendered_fields, 'count' => $count));
    
    }
    // This Javascript should live somewhere in you theme.
    // The details of the file are after this function
    drupal_add_js(drupal_get_path('theme', '[tubetheme]') . '/scripts/views_slideshow_pager.js');
    // These are options for the jcarousel plugin
    // See sorgalla.com/projects/jcarousel/#Configuration for more options information
    $options = array(
      'scroll' => 1, // how many to scroll by
      'visible' => 2, // only show two items at a time
      'vertical' => TRUE, // use a vertical pager
    );
    // Override the rendered field items output
    $vars['rendered_field_items'] = theme('jcarousel', array('items' => $jcarousel_items, 'options' => $options));
    
  }
  // Otherwise we just preprocess normally
  else {
    template_preprocess_views_slideshow_pager_fields($vars);
  }
  
}

I then created the views_slideshow_pager.js file in mytheme/scripts folder and pasted the code into it refreshed and got this error: HTTP Error 500 (Internal Server Error): An unexpected condition was encountered while the server was attempting to fulfill the request.

So I did some digging around and decided to take the [] from the function name like this:

function tubetheme_preprocess_views_slideshow_pager_fields(&$vars) {

no crush this time but still no results.

I've tried changing the view name ( I wasn't sure if it should be the name I see in my views dashboard formatted like this name_more_name). I've also tried changing the display name from content_pane_1 which is the machine name under the advanced info for the display to the human name, but still no luck.

Any help would be greatly appreciated.

p.s
Too bad that this feature seems to be left out of the Slideshow views module core, it will make it a complete solution for all of our Slide shows JCarousel needs. Especially so since the Views Slideshow JCarousel Thumbs project seems a bit stuck at the moment with only a dev version and no Drupal 7 porting.

@jjclint

Also remove the brackets from around your view name and display name. The brackets don't serve any purpose except to show where you need to customize the script.

@othermachines

Thanks a bunch you're a life saver finally it works.

Now to theme the bugger :)

So with the help of the kind othermachines the JCarousel pager is finally showing and after some more work now it's also inline and exactly where I want it to appear (horz just under mainframe).
But now, I'm having serious new issues with the pager and the mainframe slideshow which aren't correlated. When ever I click or hover any pager image the mainframe sildeshow just goes all the way back to the first image.

Also, when I scroll to to the last image on the pager the pager images start to disappear one by one with each click. and it dosen't matter if I click backward or forward or which kind of wrap effect I use - first, last or both. Even weirder, when I use circular wrap effect the pager images start to stack on top each other forming more rows.

Any suggestions on this?

@jjclint

It might help if you post your code + exported view. Also- which browser are you using? Indeed it does sound odd.

@othermachines

Thanks man, I've managed to solve it. The problem was caused (again) by my own stupidity. More specifically: I forgot to drop the brackets from this line as well:

drupal_add_js(drupal_get_path('theme', '[tubetheme]') . '/scripts/views_slideshow_pager.js');

So the js path was wrong.

Took the brackets out and what seemed like a devastating defeat for humans in their struggle against the evil machines instantly became a glorious victory for mankind.

Changing the subject a bit, I really think someone should make a plugin bridge with UI out of this patch or port Fearsgroove module for D7. From my digging around I've seen quite a demand in the forums for an easy implantation of this JCarousel pager option.

Someone just posted a D7 patch for Views Slideshow JCarousel Thumbs:

http://drupal.org/node/1091972#comment-5324632

You could help test. :)

Glad you got that sorted. I had to fuss with it quite a bit to get it just right (as you can probably guess from previous posts).

I just tried the D7 port for Views Slideshow JCarousel Thumbs, but couldn't even find a way to "turn it on" in the UI. From digging through the code a little bit, I don't think that's the way to go. I think a views_slideshow sub-module that also depends on the jCarousel module is a much better option. For my own project, I was able to use the hints in #41 with much success.

My plan is to make this work into a stand-alone module, and perhaps we can get some options in the views UI so it can be "turned on" more easily :)

@jenlampton, it really isn't hard to "turn on". I've tried to help you in the other topic but I haven't received any feedback.

#41 worked great for me (1.5 years later!!!) :) Thanks @drclaw!!

Note that I had tried Views Slideshow JCarousel Thumbs with some success a few months back but it was buggy and it's not being maintained so the code in #41 is the better way to go for now.

If you need to get the active class working for the jCarousel, try this out:

http://drupal.org/node/1144512#comment-6962460