Three Tweak-Thingees For View Carousel

18 Dec in css, drupal, how to, theme, views, views2

I spent a good deal of time working with views carousel in Drupal 6 yesterday. There is a great screencast at Mustardseed Media to help you hit the ground running. Before starting, please remember that you need the jcarousel module if you want it to work at all.
Now... Three Tweak-Thingees you will need to get views carousel up and running nicely.

  1. Those item-lists can give you fits… they don’t fit! When they are stuffed inside some other element they can get downright frustrating. It’s a game of hide-n-seek that you wish would be over soon. Luckily, FireBug is one of the best at doing the finding. I had all kinds of weird spacing and things were just out of whack until I realized it was the default styles that were the culprits. With this css I was able to override the defaults and make sure this were fitting they way I wanted.
  2. .view-top-rotator .item-list ul li {
    padding: 0px;
    margin: 0px;
    list-style-position: inside;
    list-style-type: none;
    }

  3. The key to getting your elements to fit inside are these three elements. Don’t over think it, start with the size of the individual “thingee” you want displayed in your carousel. That is where you will set .jcarousel-item. Next where do you want the visible area. The .jcarousel-clip-horizontal is the entire area that will be visible in the carousel. Lastly, decide how big should the entire carousel be. For that you will set .jcarousel-container-horizontal.
  4. .view-top-rotator .jcarousel-item {
    width: 250px;
    height: 167px;
    }.
    .view-top-rotator .jcarousel-clip-horizontal {
    width: 500px;
    height: 167px;
    }
    .view-top-rotator .jcarousel-container-horizontal {
    width: 600px;
    }

  5. With all of the done I was ready to go… almost. When the carousel loaded, it was first displaying a list view of the elements… then snapping up into the carousel. I was not going to be happy with that so I needed to find a way around. I disabled JavaScript, and started FireBugging the DOM as it appeared before jcarousel got a hold of it. I found a class that was ONLY present BEFORE jcarousel loaded, and was gone AFTER the JavaScript for jcarousel fired. For my set-up it was ul.jcarousel-skin-tango. If you are using this skin, it will likely be the same for you, if not… start FireBugging :).
  6. ul.jcarousel-skin-tango {
    display: none;
    }

carouselview.png
My views carousel is working very well now, and with funny load issues. With these three tweak-thingees views carousel is good for most uses. I hope this blogthingee will help the next drupaler or themer through their workload just that much faster and more efficiently.

Comments

Superb

This is just what is was after... good work!

Love to hear it!

I'm glad it helped.

I tried your suggestions

I tried your suggestions along with a full day of troubleshooting and I still can't get this module to work properly, it doesn't go as wide as I need and I can't figure out why. I'm throwing in the towel, this module is more trouble than it's worth, surely there's a better solution.

You Rock!

I spent my entire day yesterday trying to figure out how to remove the circular spacing between the images. your first thingee solved my problem. Thank you so much.

Wow, thank you very much. I

Wow, thank you very much. I also spent the whole day, trying to figure out how to put the items nicely in the block but everything's just messed up. Now I know where the problem is

I'm throwing in the towel,

I'm throwing in the towel, this module is more trouble than it's worth, surely there's a better solution. Men Leather Jackets

Thingees For View

Anyone on your friends list who is subscribed to you via Friends Updates will get an update when you post a blog, upload new photos, or make any changes to your profile. They can read your latest blog post this way without going to your profile. disney restaurants

ie7

this works fine in IE8 firefox chrome but its problm in IE7 please suggest.it display all content instead of hiding

sanejenny

With a good formation in it, I think they will got any problems in it. That's an unhopefully matter in this case. pool table

billiards supplies

I think for this stuff, there's not a tolerance for reparations because it must be changed if it already broken or not working well. billiards supplies

Post new comment