Another Indexhibit Crabwalk Theme

unttld / 2008-10-31 18:23:50   

Hey guys, just thought I'd let you all know I've been playing around with building themes for Indexhibit and here's an early release of a horizontal scrolling layout. There are no added plugins this is all default install settings.

And this is a super early release. Doesn't work in IE6. I've tried keeping it as clean as possible for anyone that wants to play with it.

I'm planning on redoing the theme with the crab walk plugin and a few fancy jQuery effects.

Download + Demo
(updated 02.11.2008)

Hope you guys enjoy it.

arsondpi / 2008-10-31 18:36:44   

I like the way it works with type... I mean menu overlaying text... ;-)

iwakami / 2008-10-31 23:10:10   

nice. keep us updated ;D

unttld / 2008-10-31 23:47:35   

Will do iwakami. Thanks arsondpi.

I'm sick so won't be doing any Halloweenie goodness :( but that means I'll be doing lots of playing with indexhibit :)

unttld / 2008-11-02 20:59:52   

0.0.2 updated to work with the Crabs plugin. Will be adding fancy ajax soon. next up—fixing for IE. Woo.

Also, address changed to: hold.unttld.com

Hope you guys enjoy.

Cheers,
Derek.

LeslieOA / 2008-11-02 21:14:50   

@unttld: - Your first post has been updated to the new location, hope thats alright.
Peace.

unttld / 2008-11-02 21:51:08   

@LeslieoA; Thanks. I was trying to edit that, but I'm either daft and can't find the edit button or only Moderators and Admins have that ability.

:)

AntoineLafontaine / 2008-11-03 01:09:34   

unttld,

I think it's a good move to use crabs in the template instead of another different solution. Ok, I wrote the template, but none the less, a good move.

Can I suggest to hold back on the "micro" releases and release it when you have finished at least your IE testing? You can still update your demo and ask for feedback.

Looking forward to see how your template ends up.

unttld / 2008-11-04 16:59:09   

@AntoineLafontaine I agree, your plugin is grand and the best option. I was just testing a full css solution to see if it was easily doable (it is, but exhibit.crabs is easier).

No more micro releases. However, I did just update it. It works in IE6, IE7, Safari, FF, and Opera.

Fully draggable. I'm using the Interface Elements for jQuery that comes bundled with Indexhibit. It seems a tad choppy which I'm investigating.

I've also added the super cool simpleCart(js) javascript + paypal shopping cart as a proof of concept for implementing shop functionality easily.

Enjoy,
Derek.

:)

Vaska A / 2008-11-04 19:32:33   

I'm not really sure why we need a second version of Antoines work already...

And no scrollbars?

unttld / 2008-11-04 19:42:52   

It's not a second version. I'm just building a design/theme/site for people to use that uses the Crabs on a beach format.

Plus, doing front end work for Indexhibit is the only way I've been able to teach myself Javascript/jQuery. Just sharing my results.

Vaska A / 2008-11-04 19:46:58   

It's cool...we all learn this way. But, I want Antoine's to get first billing...he's already put alot of work into it. Yours, it's a work-in-progress kind of thing...

Is what I'm trying to say. Antoine's will become a default format that will ship with Indexhibit as well.

Don't use Interface...work with all the latest Jquery...and Jquery UI parts. As soon as we're ready I will help you guys upgrade your work to the new version.

unttld / 2008-11-04 19:46:58   

No scrollbars. I'm pretending to be Apple/Microsoft/Perceptive Pixel/Minority Report and other companies that use tangible interfaces to flick through images (it seems that's all TUIs are good for). Dragging is the new way to look at images.

:)

Vaska A / 2008-11-04 19:47:30   

Haha...yes...but a ton of people don't get it...even smart designers.

unttld / 2008-11-04 19:48:22   

Sure. Antoine totally gets first bill. I just added that to the site. Sorry.

I'll move over to jQuery and drop Interface. Thanks for the advice.

unttld / 2008-11-04 19:51:37   

I think the only people that get TUI are weird Comp Sci university students and even weirder Comp Sci research fellows and profs. And of course all the Processing & OpenFrameworks geniuses. ;)

Vaska A / 2008-11-04 19:55:11   

It's definitely a cool thing...but you have to find a way to implement these kinds of things so they are usable. Also, the flicker that I got when I moved it was crazy...probably Interface...new UI will likely help that out (with far less code).

A big part of the new version is all about upgrades...we'll keep it up-to-date on the frameworks and really keep up with the latest things (that make sense).

unttld / 2008-11-04 20:01:47   

Very excited about that (more than you think).

It seems that Interface is turning off the Div when the move occurs. I may just leave it and rebuild it on jQuery without the interface component. It's some moz- and webkit- css trickery. That's why it works fine in IE7.

AntoineLafontaine / 2008-11-06 02:57:23   

unttld,

Yeah, all css solutions are possible, but an effective one (which would work well cross-browser without too much hacking) needs to have a fixed width container... and that width needs to change based on the content fed to it so the use of php was the best way to go IMO. (I don't say that to rebuke you, but more as a general insider thing - and Vaska will say I just like to brag!)

And, of course, I'm glad you build your template on top of my work. I do not see it as trying to replace Crabs. I think the next iteration of crabs will put all the configurable data as vars or constants at the top of the template so that users can adjust paddings and such all in one cozy place in the file... or maybe an external include... we'll have to see about that. This will go with indexhibit's next update I would say.

Now if I can bring some more constructive criticism.

- have you tried turning of javascript and test your template? You see me coming right... at least do not turn off the scrollbars directly in the CSS, use javascript and add the style dynamicaly (or setup your class in your CSS and add the class dynamicaly with js). Okey, let's all gather around Leslie and sing: "progressive enhancement, progressive enhancement, la la la tra la la"

- the space you keep at the top is probably neat on a spacious monitor... it's not very comfy when you drop down the size... since you intend to heavily rely on javascript for this template, why not calculate your padding/margin as a ratio of the available visible space. (and monitor the screen using a on resize event) "progressive... tra la la"

- go with an all jquery solution - I agree with Vaska on this.

- I would be very careful, even with a TUI (tactile user interface -right?), to not drop every navigation support provided by the browser (read scroll-bars) without providing more feedback to the user about your navigation. At this point, your small mention of the dragging possibility in your menu is, at best, obscure. Try using a changing cursor on the draggable area... visual feedbacks on rollover... Anything can be good, show us something clever and that we can know without a doubt that this is how it has to be used. You could also read about "visual affordance" too if you care to get more insights on how you can let your user know how they should go about to achieve what they want to do and what your interface is offering them to achieve their "goal".

Does that make me a "weird-design-communication-max/msp-opensourced-genius" ?

unttld / 2008-11-06 16:21:03   

@Antoine,

Thanks for the feedback and crit. Dynamic CSS via Javascript is a great idea. Will work on that.

‚ô´progressive enhancement, progressive enhancement, la la la tra la la‚ô™

I—Derek—solemnly swear that I will keep progressive enhancement on my mind at all times and during all stages of my process.

I've been tinkering with the idea of a psuedo-growl mouse following instruction for mousing over interactive elements for the first time. Sort of an unobtrusive tutorial type thing. But you (and Vaska) are right, T(angible and/or tactile)UI style design needs instruction.

Oh MAX/MSP I forgot about that one. Yes that makes you a genius. In my eyes anyway. ;)

sylvainman / 2008-11-06 18:25:54   

Thank you so much unttld,
I'm very happy you work on a new "crab tamplate" without scrollbars. I wanted to do one with this script http://www.walterzorn.com/dragdrop/dragdrop_e.htm but I' m not programmer and didn't know how to do.
That will be nice.

unttld / 2008-11-06 20:34:15   

You're welcome & thank you, but, I didn't do any (serious) programming just some CSS and some wee tad small amount of JS. i just made a theme over top of Antoine's work. I just wanted to experiment with his Exhibit format.

All I did was make it a semi-opaque/semi-transparent (half full/half empty) menu and added some javascript flare (which is being improved).

Think of this as an alternate color scheme to the default one.

:)

iwakami / 2008-11-06 20:45:34   

i don't see the dragging animation on FF3.
i've found the possibility of losing the clickable surface and not being able to restore it until refresh (not that intuitive, i think).
my joy for these developments is growing. hope to see a fully functional and final version of this :D
let me know (i'll be watching) if you need any help from me AS a total code n00b. still, i'm a good cook, if ya need.

unttld / 2008-11-06 21:29:02   

@iwakami: I'm a total javascript newbie (not even worthy of the 00 spelling). So this shall be a good exercise.

I'm using the Interface Elements for jQuery that is in the ../asset/js/ folder. It seems to want to use moz- and webkit- css attributes to hide the element while it's moving. So as recommended by Vaska and then by Antoine I'm going to use the newest version of jQuery and not use the Interface module.

That said, because IE sucks a bunch you can see the animation. Thanks for offering your assistance. I definitely enjoy cooking with a few other cooks ;)

(emotional moment, sorry listening to bad emo music at the moment)
@all you folks: your crits and comments fuels my fire and makes me want to be a better web nerd and actually sit down and do things like write javascript(or learn more of it for that matter). Thanks.

ps. if any of you indexhibiters are in Toronto CAN tonight you should check out this exhibit at Magic Pony absolutely amazing work that I think—judging by the work I've seen in the Participants list—you will like.

KevinozraM / 2008-11-07 13:20:30   

thanks for the plugin. i applied to a page in my site and i like the drag function but cant seem to get rid of the scrollbar that stretches far through the right of the page.

http://www.kevinmarzo.com/portraits/

anyone know what i have to change to get rid of the scrollbar. i want the exhibit to fill the page but with no scrolling whatsoever. thanks in advance

unttld / 2008-11-07 14:08:06   

You need to add an overflow: hidden. As suggested by Antoine this should be done in Javascript.

  1. < script >
  2. object = document.getElementByTagName('body');
  3. object.style.overflow = 'hidden';
  4. < / script >

Put that inside the of you index.php.

unttld / 2008-11-07 14:12:50   

Just keep in mind I plan on doing some changes to this so that the dragging animation will perform better.

Realistically this thread doesn't need to mention Crabwalking at all as it would work with any layout. I just started with left to right.

I think it should be called “Hey look, new colours & who wants to help me learn javascript”

;)

AntoineLafontaine / 2008-11-07 15:53:06   

This should be done using jQuery's syntax... since jQuery's is easily available in a template

  1. $("body").css( "overflow" , "hidden" );

This is more elegant, readable and cross-browser friendly. ;)

And I would say that unttld template is a work in progress and that any help making it better would -probably- be apreciated, right?

I've been thinking a few things about this and the process of creating new templates/plugins. I will post one more of my long monologues tomorrow, after some rest. But since I live in the future you'll probably get this stuff today...

unttld / 2008-11-07 19:34:36   

@Antoine,
Yes the jQuery syntax is much a better solution. Indeed input, help, etc. is appreciated.

Believe you me, all the ideas you and Vaska and Leslie and Iwakami have suggested have not gone to the wayside.

Oh I like getting stuff from the future. Crazy crazy temporal vortex… I mean time zone. ;)

AntoineLafontaine / 2008-11-10 06:05:05   

unttld,

okey, took me much more time than I expected to give some follow up to my previous message.

I've been thinking about a few guidelines/rules we should base our work if we intend to release it as an indexhibit plugin/template. I know that guidelines and rules have a restrictive connotation , but bear with me a few more lines and maybe you'll see my point. Of course, this is all open for discussion and I write it down in order to get it out of my head. Let's shape it or drop it if it's not good.

Here are some guidelines I try to follow when I code:

First, any indexhibit plugin/template should work out-of-the-box with a vanilla (unmodified) indexhibit install.

Second, it should limit its design/visual identity to the minimum required for the content/information to be logically displayed.

Third, it should piggy back on other plugins/template but also be usable as is if the other plugins are not used. (this one is often hard I think, but I state it none the less)

Fourth, it should have a funny name (ahem)

Five, the code should be documented. Explanations needed to use the plugin/template should be written at the top of the file using comments. Variables available for customization should be put close to the top of the file, after the documentation. If it's a plugin, sample calls should be added in the documentation part...

Okey, that's it for now.

Maybe this needs to be moved to a new thread to get more feedback.

unttld / 2008-11-10 14:40:41   

Antoine,

Again, I agree wholly with your guidelines/rules. If designers didn't have guidelines or restrictions we'd probably be considered fine artists ;)

Rule the First: agreed, very important.

Rule the Second: I mostly agree with this. For an Exhibit plugin—yes—very important. For a “theme” it should be easily modifiable to fit the end users visual identity. But being a theme a visual identity will be inevitable.

Rule the Third: this rule seems kinda similar to the first rule, but slightly different. But in agreeance.

Rule the Fourth: For sure. Man, a funny name would rock. Alas, I am not a funny person and my moments of humor come few and far.

Rule the Fifth: Agreed, again.

I would also like to recommend a naming convention for separating themes from plugins. As the theme is mostly just some html/css maybe extra js. I don't think it's advanced enough to be called a theme. It's more like a micro-theme. As it requires the use of one of the plugins/exhibit formats whether out of the box, downloaded or custom.

I don't know if that made sense, but it does to me. ;) This should be moved to another thread for sure.

unttld / 2008-11-18 21:04:11   

Not bumping this, just thought I'd mention that I've made some improvements.

1 - clicking and dragging animation doesn't suck and you can see it moving around.

2 - changed the various sections formats to make sure they work in the other formats (they do, but it looks kinda silly with the Grow format). Personally I like the backgrounded format the best.

Next up, working out some visual cues for how to use. Thanks for all the help and input guys and gals.

Cheers,
Derek.

sylvainman / 2008-11-19 00:09:05   

Excellent, on your website it is amazing.
But I don't understand how to use it, it doesn't seem to be a plugin... Is it a new theme ?
Thank you for your help.

sylvainman / 2008-11-19 00:23:07   

It's ok I found how to do.
For others :
- Drag the folder "Crabwalk" in /ndxz-studio/site/
- Go to "Settings" in the admin and change the theme for "Crabwalk"

Thanks a lot unttd ! It rocks.

unttld / 2008-11-19 01:22:00   

hey thanks, um, yea I'm terrible at writing docs. Actually I'll do that tomorrow or for anyone reading this in the future later today. ;)

sylvainman / 2008-11-19 02:43:05   

You can see what I did with your template here : sylvainthomin.com
I put credits in my about page.
Thanks again.

arsondpi / 2008-11-19 06:43:25   

@ sylvainman
oooh, I like that drag feature! I think you actually have to highlight it so it's very obvious that one has to click and drag.
...maybe if you added something like title="Click and drag images to the left" to your div content..?
But then again that's my (design) opinion... :-)

sylvainman / 2008-11-19 13:16:03   

@arsondpi
Yes I put it in the menu, but I think you didn't see it.
I don't want to put it more visible, I want to keep my design very simple. And I'm sure people will understand when they'll see the mouse cursor change.

@unttld
I've changed the pointer cursor for a move cursor, I think it is more logical.

arsondpi / 2008-11-19 17:17:57   

yep - the move cursor works best.

unttld / 2008-11-19 18:25:25   

@sylvainman & @arsondpi - agreed. I always forget the various cursor names. The move cursor is a much better solution than the pointer cursor.

I'm trying to spec out some sort of neat instructions that will inform users that the interface is draggable. But also make it so that the instructions disappear and have a show/hide functionality to bring them back.

iwakami / 2008-11-19 21:24:06   

maybe on hover and accompanying the cursor like a temporary tag. is this idea possible here?

unttld / 2008-11-19 21:35:35   

@iwakami I was thinking about that. Some sort of tool tip would be good. But I wouldn't want it to happen every time. basically it should show up the first time (maybe at the mouse position) and then just fade away. Or at least that's how I think it should function.

It's possible to do the temporary tag thing. Maybe I'll start there and see what happens. Thx. Yay collaborative thinking. :D

arsondpi / 2008-11-20 00:42:49   

(as I said) why not adding a title="Click and drag images to the left" to your div content tag..? All browsers show this tooltip and there's no need for js...

sylvainman / 2008-11-20 02:16:00   

@unttd
I'm not a good programmer I just know copy and paste... But I have some ideas.
Do you think it is possible to navigate through the pictures thanks to the draggable thing and with the mouse scroll ball ?
And another request. A button/link after the last picture to go back. If there a lot of images it could be pretty long to see all of them and then to go back.
Thank you, I'm in love with this new template.

unttld / 2008-11-20 02:42:49   

@arsondpi I'm thinking something a little more noticeable than the default tool tip. I know from personal experience that I ignore those in ways that I shouldn't. Just something that stays around a little longer.

@sylvainman using the scroll ball seems like a neat (and possible, somehow) idea. Will stick it in the idea book :D Getting a 'back' to start button shouldn't be to hard. Again good call, will get to work on that as well. Neat.

Thanks for the input,
Cheers,
Derek.

AntoineLafontaine / 2008-11-20 04:47:30   

I've checked sylvain's site and the move cursor is enough I think. Let users add other hints/instructions if they want when they customize, but no need to clog the template with more; I would go only with the move cursor by default.

sylvain, the scrollball is only available on mac's mouses... and not all the mouses (if I,m not mistaken). I would not recommend this as a default behavior... I wonder how using the vertical axis only could we provide some useful navigation interaction. zoom in/out would be quite "obvious", but I do not think it is needed for this template.

the back/reset button might be useful (with some smooth jQuery panning animation...)

I was also wondering if there shouldn't be a possibility to add an option to lock the dragging on the vertical/horizontal axis for sites that would like to keep the dragging inside a grid/defined space...

This is getting quite nice. Good work unttld.

(I hope i get some time to peek at your code in the coming days and maybe give more in detail feedback on that too)

PS: Sylvain - je vis au Japon, mais j'ai habité 8 ans a Montréal... ça fait drôle de voir des photos du métro après 4 ans passés à l'étranger...

maxipram / 2008-11-26 13:38:24   

I really like it !
regards

maxipram / 2008-12-04 15:24:56   

Hi Derek,
I really like and enjoy your scrollless theme but there are two issues that bother me. firstly the flicker animation while you move the exhibit is quite annoying and secondly the IE compatibility. It open only the images that are visible without allowing the scrolling, also i noticed that my menu bar goes in the middle while seen in IE. I don't want to bother anyone but as i really like the theme i was eager to ask.
best regards
maximilianpramatarov.com

unttld / 2008-12-04 15:57:23   

Hey, thanks. Where are you seeing the flickering? And if by flickering you're referring to the content going sorta transparent when you click that's an easy fix. ;)

At the bottom of the index.php is some jQuery:

  1. $("#content").draggable({ opacity: 0.40 });

Change the opacity value. 0 = fully transparent, 1 = full opacity. I'll look into the IE thing. I didn't see any bugs there. But it's possible. I should have some fixes up in a full business day.

And a new name for it. I've decided on a naming convention for all my stuff and it's real nerdy & geeky like.

maxipram / 2008-12-04 17:09:45   

:)!
thank you
regards

This thread has been closed, thank you.