Omega Theme Rotating Gallery

Events happening in the community are now at Drupal community events on www.drupal.org.
alltooeasy's picture

We're trying to create a Rotating Gallery using the amazing #OmegaTheme!

It works at 1280, 960 but when we take it down to Iphone Formats (where they blocks stack) it breaks.

I've seen this http://developmentgeeks.com/ and their awesome rotating gallery. But when made small it doesn't scale.

So we have cunningly developed the images for the gallery to be the same size as the UI on an Iphone.

Is it possible to have two blocks that both contain content that rotates. One with an Image, one with a text and have them linked.

If so can you point us in the right direction.

We're happy to contrib this back to the community.

Regards

John

Comments

Why do you want to use two

fubhy's picture

Why do you want to use two blocks for that? Could you explain a little clearer what you are trying to achieve? You could of course create two blocks and link the rotating jquery stuff with each other (with some custom jquery code) but I am really in doubt that this is what you want. Please explain what you are trying to build here.

Stretchyness.

alltooeasy's picture

One of the reasons we have come to love Omega is the dynamic re-sizing.

We use a lot of views to ensure that when you create an event or a promotion it autogenerates subsequent pages and can be added to.

So in effect you add a promo once and it goes off and does many things in many places, up to and including if you're logged, conditionals etc.

What we've found is two fold. 1) Our rotating Galleries "Jump" they move a bit around on different screen sizes. E.g. http://www.alltooeasy.co.uk . If you can suggest a fix/module solution for that, that might narrow it down.

2) When you shrink the screen size on Omega, e.g. on a Tablet or Smartphone, It condenses the blocks into order. E,g, Three column layouts are layed out in order 1,2,3 going down the screen. This is amazing. However currently with the rotating image gallery doesn't condense properly. What we'd like to have happen is the text slot in under the image in the same block.

3) Essentially one of the biggest perks of OMEGA for us (massive KUDOS) is that it does play well with Smartphones. All in all. What we're trying to do is to make Mobile sites, which whilst they always need some tweaking, require a good deal of work. So in the design/theme phase, if we can make a rotating gallery that works for both (its deliberately lightweight in design and implementation) then we have considerably less re-designing to do come Mobile browser time.

I hope that clarifies it?

So when in 960/1280 rotating gallery takes up the whole width. When on mobile size, the whole thing is condensed and sites under itself.
Or is there a better way of doing this? E.g. have views output something different for each size.

We've played a bit with Delta and Context, but maybe I'm missing a trick here? Mobile development is something we've avoided (despite bizarrely my partner's 3 years experience in that field). Any suggestions?

Are the media queries and

bhosmer's picture

Are the media queries and responsive design perhaps hiding the block after a certain size?

Possibly.... I don't think so.

alltooeasy's picture

I don't think so.

We've always had some issues with the rotating gallery stuff in Drupal, we haven't found a bulletproof solution. So we're trying to make a custom one. I just thought it might make more sense to try and make a rotating gallery that can be condensed down into two stacked blocks. E.g. Image and then Text underneath.

Really looking for something efficient. So that worst case on a phone, it just hacks off the image's edges. So the image would have a "safe area" as you find in video production, where you can gurantee it will always display.

Maybe this is the wrong way of thinking about it. Any hints would be very very welcome.

rolling your own rotator

jessebeach's picture

Rotators are tricky. I would start with a solid library first and tweak it if necessary (and contribute back!).

If you do build one, post the code to github. I'm not saying all the rotators are out there are great.

I had this one recommended to me recently: http://www.ndoherty.biz/demos/coda-slider/2.0/

Thanks Jessebeach.

alltooeasy's picture

Much appreciated.

I think this is significantly closer to something that we can stretch and bend. Currently we're not rolling, but fading in/out (not that matters).

Will look into this soon. Our own site needs sprucing up and upgrading from D7.0 stable (ish) to 7.4 so I think we'll take a swing at it then. Chasing a pretty tricky deadline for a D7 site so will address this properly on the next RC where we're looking at mobile etc.

Will def push to post back to Git or Tutorial it if we find a robust soloution. Thanks for the pointer!

Aghh sleeplessness.

alltooeasy's picture

Sorry do you have a module reference or is it hacking it in?

just include the library as part of the theme

jessebeach's picture

Just include the library in the theme and apply it to the output on the page. The images should be output as an unordered list and if so, the plugin will most likely work fine once applied.

Flexy Sliding Gallery.

alltooeasy's picture

Started on the module/Jquery Lib + Views Gallery.

Got it partly working, heard on IRC via Fubhy, Cellardoor and Banghouse there is a module in the works. Also Himerus seems fully on the case!

We got Flexy-made-by-muffin implemented but not in a pretty way.

I don't suppose you'd be willing to help out to bring this all together? I'm happy to offer up what I can on this, but module development + views specific configs to release into the wild isn't something I'd say I'm happy with - I am taking steps towards it, but I think I've found my next Drupal peak to summit.

Thanks for the help and advice.

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: