User menu

You are here

Views jQFX Cloud Carousel

This module integrates Professor Cloud's "Cloud Carousel" - a 3d Carousel written in javascript.

I have modified the script to use Colorbox instead of Slimbox. Since slimbox isn't really supported by any drupal modules, and colorbox is pretty ubiquitous, this improves integration, makes installation easier, makes the site more consistent, and eliminates the need for an additional overlay plugin.

Thanks to Professor Cloud for creating this plugin javascript. He has a lot of interesting things on his site. I'd encourage checking it out here.

This isn't a particularly difficult plugin to install. The thing that makes it seem a bit complicated is that there are three (was four) different items that need to be uploaded to the website in order to enable full functionality. And that is assuming that all module dependencies are already installed.

Module Dependencies

If you do not already have all of the above installed, download and install them.

The Cloud Carousel installation involves the following:

Optional Modules

These aren't strictly necessary, but they work well with the carousel. I used these in setting up the demo above.

The unpacked views jqfx cloudcarousel module simply needs to be uploaded to your usual modules directory and enabled. The plugins need to be uploaded to your sites/all/libraries directory so the structure is as follows:

The cloud-carousel plugin js file needs to be available at sites/all/libraries/cloud-carousel/cloud-carousel.js
The mousewheel plugin needs to be available at sites/all/libraries/jquery.mousewheel/jquery.mousewheel.js

Create or edit your content type.

Titles and captions are created from the alt and title tag attributes of the images in the content type you wish to display.  If you want to display titles and captions you must have the ability to add these attributes to you image fields.  To enable image attributes navigate to admin --> structure --> content types.  Select 'manage fields' in the content type(s) that will be displayed in the Carousel (or create a new content type).  Edit the image field that you want to display and be sure that the 'alt' and 'title' boxes are checked.  This will provide a textfield for adding information to uploaded images when creating or editing a node.  If this is a new content type an image field will need to be created for it.

Create the image nodes

Create the nodes that you wish to display under admin --> content --> add.  If title and image attributes were properly enabled it should be possible to add them to the uploaded images.

Create your view

Create a node view. If you are new to views you may want to find a tutorial for it. There are many out there.  Only the images in the node view will be displayed in the Carousel.  Add the the image fields that you wish to display under the 'fields' section.  To have slimbox functionality the image fields should be linked to their file.  The images can also be linked to a node or anything else as desired.  Also add your filters, arguments, etc for the content if desired.

Create a new block or page display for your view.  Blocks can be added to page regions in admin --> structure --> blocks.  Pages must have a path (ie 'cloud-carousel').

The Carousel display

In the settings of your view, click on the link next to the 'Style' label (usually will say 'unformatted').  Choose the style jQFX and hit the update button.  This will give you a drop down menu from which to choose your jQFX Settings.  For the Cloud Carousel display, select 'Cloud Carousel' under the 'FX Style'.  The menu will provide your cloud carousel display options.  Hopefully the explainations in the menu should be pretty clear.
 

Notes:

Some of the plugin files may need to be renamed. For instance, if they include a release number, rename them per the paths noted above.  Also note that the cloud-carousel.js file available on this site has been modified from Professor Cloud's version. A couple of bug fixes were implemented and a couple functions were added to enable colorbox integration.  It is also very likely that bugs are in here that I'm not aware of. Please let me know.
I asked and received permission from Professor Cloud to have this modified plugin script available for download.
 
 

Comments

This would be new to me. Could you please give me more info? What is the carousel doing? Does it give you an error upon loading the page, turning the carousel, or opening the colorbox?
I will be going through all these modules in the next few days.

Hello

Could someone possibly have an idea about why the first image in the carousel is repeated 12 or so times while the rest of the images are displayed normally?

Regards

Well, first I though using "hide empty fields" was enough, but It seems empty fields should be filtered out.

I added a "Content: Images:fid (not empty)" filter and it works properly now

Cheers

Q

Hello,

thank´s for this great module. I was looking for something like this for months. I´m really grateful for this.
Please can you tell me if it´s possible to define a hover and active state to images?

Thank´s in advance for answering!

Cheers,
Marco

How stable is this at the moment?

A client asked to have this specific style of gallery viewer, and I am also keen to work with it.
I've installed D7 for his website, but now am wondering whether I should build it in D6 instead.

Shot for keeping this one going!

Inky

Everything should be working fine.

As you can tell from the images above I need to update this tutorial.  However, you should not have any trouble using this module with recent views versions for Drupal 7.

The cloud carousel javascript plugin has gone through some updates since I did this drupal adaptation.  Actually, I believe some of those changes are due to modifications that I made to Professor Cloud's script for the downloadable version that I have on this site.  If you use my modified script you should not have any problems.

BTW, we probably crested the hill a few weeks ago when it comes to d6 vs d7.

I'm needing some help and i think the best place to start is making sure my libraries are reading. I've created both the

/website/sites/all/libraries/cloud-carousel folder that contains two files: cloud-carousel.js and cloud-carousel.min.js
and
/website/sites/all/libraries/jquery.mousewheel folder that contains jquery.mousewheel.js and jquery.mousewheel.min.js files

I'm to able to select jQFX for format but I think there may be a library issue because I'm not seeing a jQFX under Format Style Settings. My only choice is FX Type: Image Flow in the drop down. I hope I'm making sense.

Like most of the resent module tutorials involving Views. I haven't seen many descriptions on the new Views UI.

Here are links to my screen shots

First link is Views UI : http://tinypic.com/r/316lrb9/7

Second link is the Style options that is where I think there should be a jQFX option but all I see is an Imageflow option: http://tinypic.com/r/346kiz9/7

I am determined to get this to work since I really like what you've done for those of us less knowledgeable CMS users.

Please help?

Thanks

-Robert

You need to install the Cloud Carousel module. I'll put up links in the download section for the cloud carousel and cycle modules since the drupal sandbox can be hard for people to use.

Wow up and running! That did it...Now for the CSS! Thanks so much!

I had not seen any activity on this in months. I had spent the past 3 days hacking away at it and just about had it done. While trying to find some final tweaks, I came across these new releases and...

Voila!!

Thank You - Its working great.

Just little remark. First check page with Chrome and block didnt work. Than checked with Firefox and everythink good.

Webkit browsers (Safari and Chrome) have a well documented issue with javascript when the image height and width attributes are not defined. It appears that drupal 7 core is going to incorporate the fix for this.

Fantastic job James, thanks for all your hard work.

Great work. At first I was some lost trying to figure out how the git thing worked, and found a git port to windows that runs quite well and downloaded the module.
Here is the port.
http://code.google.com/p/msysgit/

Is this only an image viewer? Would it be difficult to incorporate other media types...such as video and audio in the carousel?

Great work, much appreciated.
One Problem, every time I click on settings for jQFX its seems to add another Grouping field!
I am up to Grouping Field Nr9

I have the same problem as posted by jimboh:
"every time I click on settings for jQFX its seems to add another Grouping field!"

That is f-ing cool. Thank you.

jason @ http://www.jackrabbitmedia.com

hello, from where you downloaded the module, Views jQFX Cloud Carousel, I have but I can not find busado please support

Still the same Question as everje: where to get the module Views jQFX Cloud Carousel?

If you are searching to purchase any flame wall-mounted electrical fireside then you've got make a choice out from the available options alone. <a href="http://www.ehowtobuildafireplace.com/fireplace-mantel-designs/">Fireplace Mantel Designs</a>

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.

Contact

Address
Lunar Clips Internet Media
2750 Figueroa Blvd
Unit #8
San Diego, CA 92109
Phone
(858) 353-4515