Carousel for pager images

I agree with you. Could be a nice feature to have !

I second that, but have to admit, although I played around trying to accoplish this, I failed.

So, if somebody could help out....

Perhaps I could include another jQuery plugin? jCaroussel? Another one?

Just a short question: Is anybody trying to find a solution at the moment or do I still have to play around looking for a solution myself.

I am trying to implement jCaroussel - so far unsuccessfully.

Looking forward to your updates.

Hi, I am not a coder, but have managed to get a very basic carousel working, based on jcarousellite.
I have been working with the dev version of this module. This is just a hack but I am hoping some of the more experienced coders might be able to clean it up and expose some settings from the module.

Just want to get this out there for others to work on as well, I will continue to try and go futher with this. Have selected, 'show prev next controls' and pager style 'image'.

THANK YOU VINSABUS!!

Your version works like a charm. All I have to do for my own design is to make the gap between the big slide and the smaller ones and I will replace the prev/next by arrows (gifs).

You can see it here on my test account: http://wm.net-explorer.org/content/test (ATTENTION!!! Might not work anymore in the future, will not be adjusted by me later on!)

A very grateful,
Kirsten

@vinsabus : can you provide a patch instead? Easier for me to see what you have changed.

@ Kirsten you are welcome! glad it works for you.

@jdanthinne Yes, I realize that is the proper way to do this.. I am trying to learn how to make a patch. The delay has been because I was not entirely happy with the solution myself.. it does get a basic carousel going.. but there are still many problems with it. I have been working on trying to expose settings for the formatter.. so that it would not interfere with your other code.. meaning people should be able to select 'carousel' style for the pager, where now you have only numbers and image.

I also think it would be fantastic if one could make this module like a one stop shop for a multiple value field image. Meaning since we have the code for a carousel there already.. people should be able to select if they want to select that field to display as a carousel or a slideshow, if carousel.. then.. stop it from executing slideshow code.. and just display carousel.. and if they select slideshow.. then it goes through all the various options you have already working beautifully.. with the addition of a carousel style for image pager. What do you think ?

Also for the carousel.. I am trying to work with the code from here.. http://jqueryfordesigners.com/jquery-infinite-carousel/ . This is also the same code for carousel that is used in the galleryformatter module.

Am feeling my way around blindly at the moment.. I am neither an expert in php nor jquery. Also in the dev version of your module. You have included some calculations for image size.. somehow I am getting a huge amount of extra padding between the slides and the pager (vertical space.. horizontal space is calculated correctly.. and I don't even at the moment have any vertical images in my slideshow). Also, in the galleryformatter module.. the captions are displayed in colorbox as well.. that is not happening here.. and would be nice to have happen.. and of course would be great if the whole slideshow could play in fullsize in colorbox :-)

This is somewhere between a wish list.. and my random stabs at the code.. please let me know what you think.. if you think this would be a good direction to go in.. and also how I could do stuff in a way.. that makes collaboration easier. I will of course continue to work on this.

This is the patch for what I submitted at #5

1. New file jcarousellite.js in the 'js' folder. NOTE: (I cannot attach the jcarousellite.js file.. so I have renamed it to jcarousellite.txt)
2. changes in 2 files the field_slideshow.module & field_slideshow.js

Hope this works! (the patches I mean)

The problems with this is that the .prev and .next classes are applied to your slideshow controller as well as the carousel previous and next buttons.. and so apart from scrolling the pager it is also shifting to the next slide.

Thanks for the patch, I'll have a look at that and implement it with correct formatter settings.
For you idea of a one stop shop solution, it's a a good one, but unfortunately, the module is called Field Slideshow, and not Field Carousel, so people would never know that it has possibilities other than a slideshow…

@vinsabus : do you have a test url for me to see this "huge amount of padding"? It's the only problem that keeps me from releasing the 1.0 version.

See here:
http://gator1319.hostgator.com/~feral/test/content/one-project

Also please notice that when I click on the image to open in colorbox.. after that multiple pagers are being created.. this is just the dev version of field_slideshow.. without any hacks for the carousel. This did not happen I think in RC2.

@ jdanthinne: See the link in #6
There you can see the gap, too.

Please try this patch for correct height calculation (wrong variable assignation)…
@vinsabus : strange behavior with colorbox! I'm looking for the bug causing that…

And another patch for colorbox and pager thumbnails compatibility.
All these changes are pushed to next DEV version.

@ jdanthinne : Thanks! have tested the new dev version. The vertical space problem is totally solved. If you check the url from #12, with colorbox I don't get duplicate pagers but the 'prev next' controls are getting duplicated with every click in colorbox !

One of the changes from RC2 to the current dev version is that you are using drupal behaviours instead of directly calling jquery document load in RC2. I am wondering if this might have something to do with it:

http://drupal.org/node/205296

Drupal.behaviors.myModuleBehavior = function(context) {
  // This jQuery code ensures that this element
  // is only processed once.  It is basically saying:
  // 1) Find all elements with this class, that do not
  // have the processed class on it
  // 2) Iterate through them 
  // 3) Add the processed class (so that it will not
  // be processed again).
  $('.module-class-object:not(.module-class-processed)', context).each(function () {
    $(this).addClass('module-class-processed');
    // Do things
  });
};

see number (3) .. ?

@vinsabus : thanks for the tips. I've added a 'processed' class so the script is applied only once.
Additionaly, I've re-moved all markup creation in .module file instead of making it by javascript.
Please test patch or next DEV version and review.

If ok, I can finally add the carrousel!

@ jdanthinne : Fantastic ! Thanks .. please check the url from #12 all colorbox issues gone. Look forward to the carousel!

@ jdanthinne : After applying the patch from #18 at line 299 of field_slideshow.module, by adding these parameters in the array, we can get the titles in colorbox !

$uri['options']['attributes'] = array(
            'class' => array('colorbox'),
            'rel'   => 'field-slideshow',
            'alt'   => $item['alt'],
            'title' => $item['title'],
          );

I suppose it should be possible to get the title set from your caption variable if the user has selected that.

@vinsabus: good idea. Using caption for Colorbox titles.

@jdanthinne ; I am attaching some patches for the current dev to include the carousel along with the full module which includes the js file as well as some changes to css.

The features are:
1. Ability to choose carousel pager style
2. Settings for the carousel.
a) Number of visible images in carousel
b) Scroll by number in carousel, meaning each click will advance how many images.
c) Transition speed of carousel
d) Choose if carousel is circular (continuous carousel or will stop at beginning or end.
e) Choose if you want the carousel to be displayed vertically, default is horizontal.

This is mostly working, there is one definite bug:

(line 187-188 in the module file, after applying the patch .. or lf you look in the attached full module)

'visible' => array(
        ':input[name$="[settings_edit_form][settings][slideshow_pager]"]' => array('value' => 'image', 'value' => 'carousel'),
      ),

I was trying to use the same settings for pager image style as you have made or images, but this code is incorrect and I can't figure out how to do a proper 'or' statement to put the 'value' as either image or carousel. So at the moment.. on the settings form.. one can choose the pager image style only on the carousel. My terrible php skills :( , I have tried google but could not come up with any answers.

Also needed to create some extra divs for carousel.. so have done it but I'm sure there must be a more elegant way to do this.. (see lines 529-577).

I hope this helps. Look forward to your response.

@vinsabus : I was very busy lately, but I'll have a look at that this week.

Here it is… I've made some changes to your patches, but it's still working (on my side).
The only option I've not included is the circular one, because it is not compatible with Cycle (clicking on an image to display it doesn't work).
Please try this patch or next DEV and review.

Just tested the latest dev, the code optimizations are great! several issues though.

1. The bug from #22 still exists. If you select 'image' as pager style, we don't see the option to select images styles.

2. There was an extra div around the carousel in the patch I sent, also adding a 'clearing' div after the carousel-next anchor. Maybe this is a hacky way of doing it.. but currently if I select 'vertical' for the carousel, I don't see the carousel-next anchor.. and other content is not getting pushed down. (Horizontal carousel displays fine right now.. problem is only when selecting vertical.)

3. This is more a feature request, for the caption, if the text is wrapped around by an extra div or a span, then one has an option of overlaying the title on the slides if one wants and can style the div and position text seperately in css.

Hi, sorry for the latest dev, not tested enough… ;-)
I've just made changes to DEV. (patch available here : http://drupalcode.org/project/field_slideshow.git/commit/b8e20b9)
1. The bug from #22 is gone, but I had to add an additional selector, because form states doesn't accept multiple conditions (strange)
2. I've fixed the vertical carousel by adding an additional wrapper
3. I've added an additional span tag around caption text

Please test & review.

Perfect! Many thanks.

Sorry took a while to figure out how to get the code from the git page. Ok so I had another thought :-)

by default, the slideshow displays the images in the order they were added in the imagefield. The user has an option to change the order there, but suppose one wanted to display the last image one added to the field, first in the slideshow (desending sort), would it be possible to include a setting to select the sort order ?

Maybe a radio-button where the default sort is ascending, one can click descending.. and maybe a third option to randomly start at any image in the slideshow. Some people would like that everytime they navigate to a page, a different image is shown to the visitor first.

some code like:

$count = 0;
    foreach ($items as $key => $item) {
      if (!is_array($item)) {
        ...($items[$key]);
      }

reverse the array for descending sort.. or use the random function to randomize the sort.. before the links are generated so that it does not mess up the numeric pager.

What do you think ?

Thanks again for all your efforts and its been great working with you!

Nice idea, but can you open an other issue please, so this one can be closed if carousel is ok.

You are right.. sorry .. new issue here..
http://drupal.org/node/1109182