Holy cow this rules!

Mike Lane

Seriously, check this out:

http://script.aculo.us/demos/shop

How possible is it to implement this on a SM site. Alternatively, how possible will it be when the cobranding gets finalized? What I envision is being able to drag the image (whatever the size) down to a cart (styled better than theirs of course) and have a thumbnail show up in the cart. If someone doesn't want it, they can drag that thumbnail to the trash. When they get done shopping, they click on a check out button and it goes on as normal.

Alternatively, would it be possible for the lords of the SM to implement this as an optional feature?

Or am I the only one who thinks this is cool?

Mike Lane

More information at http://script.aculo.us/drag-and-drop

devbobo

Mike Lane wrote:

More information at http://script.aculo.us/drag-and-drop

Hey Mike,

I reckon that this would nearly be possible (perhaps) with the current config of smugmug.

I have added the example from their site to my smugmug gallery.


Cheers,

David

{JT}

Very cool, yes. Practical, no.

The problem comes with how users buy prints. On a standard or power user accounts most prints are bought using the bulk add to cart, which would be a far easier way to add 200 photos to your cart than the drag and drop every single one of them.

Now for pros their cutsomers may only buy one or two at a time and this would be very neat, but there is a learning curve involved since they have never used a system like drag and drop to add to a cart before. Or they could just use the existing add to cart button which they already understand how it works the same way as amazons add to cart (minus the patended recommendations and previous viewing history).

Trust me, we have a lot of cool ideas that we would love to implement, but in reality we still get help email every day on how to add photos to a gallery

devbobo wrote:

Hey Mike,

I reckon that this would nearly be possible (perhaps) with the current config of smugmug.

I have added the example from their site to my smugmug gallery.


Cheers,

David

devbobo

{JT} wrote:

Very cool, yes. Practical, no.

JT, I never said it practical.

My intention was to demonstrate that if a user wanted to do this, I believe that they could possibly implement this functionality within smugmug's current customisation.

David

Andy

devbobo wrote:

JT, I never said it practical.

My intention was to demonstrate that if a user wanted to do this, I believe that they could possibly implement this functionality within smugmug's current customisation.

David

mike's gonna try a few things with this on my site...

flyingdutchie

I think it is possible, but...

andy wrote:

mike's gonna try a few things with this on my site...

In my opinion, it is possible,
IF you throw a LOOOOOOOT of javascript at it (not to mention the testing on various browsers and browser versions).

-You can add a footer/header with an element that is the drop-target (a special div).
-You can walk through all the images on your page, give them proper ID based on the SRC value (<img src="..."> --> <img id="..." src="...">).
-Then style those images (or their enclosing DIVs) to be absolute (position: absolute;). You have to be really careful that making the position absolute does not mess up the layout of the page.... Or what you can do is drag a copy of the image... (copy image into a floating div, and then drag that floating div; this is maybe easier).
-Attach to each image an onmouseup, onmousedown and onclick event. Code them to handle dragging (this is not hard to do; i can easily do it with the menu on my smugmug page).
-When the onmouseup is detected while the mouse-coordinates are within the drop-target, call some javascript that adds the selected picture to the cart (by calling already existing JavaScript from SmugMug)

... Just thinking out loud here.
-- Anton.

Mike Lane

flyingdutchie wrote:

In my opinion, it is possible,
IF you throw a LOOOOOOOT of javascript at it (not to mention the testing on various browsers and browser versions).

-You can add a footer/header with an element that is the drop-target (a special div).
-You can walk through all the images on your page, give them proper ID based on the SRC value (<img src="..."> --> <img id="..." src="...">).
-Then style those images (or their enclosing DIVs) to be absolute (position: absolute;). You have to be really careful that making the position absolute does not mess up the layout of the page.... Or what you can do is drag a copy of the image... (copy image into a floating div, and then drag that floating div; this is maybe easier).
-Attach to each image an onmouseup, onmousedown and onclick event. Code them to handle dragging (this is not hard to do; i can easily do it with the menu on my smugmug page).
-When the onmouseup is detected while the mouse-coordinates are within the drop-target, call some javascript that adds the selected picture to the cart (by calling already existing JavaScript from SmugMug)

... Just thinking out loud here.
-- Anton.

The whole point of that site script.aculo.us as I understand it is to provide you with plug and play javascript for particular behaviors. That is to say that the javascript you need is already done and can be downloaded from the site.

flyingdutchie

Mike Lane wrote:

The whole point of that site script.aculo.us as I understand it is to provide you with plug and play javascript for particular behaviors. That is to say that the javascript you need is already done and can be downloaded from the site.

I briefly browsed through that site and took a quick look at the site's documentation for Draggable and Droppables. Looks kewl! They implemented all of the event-handling! The construction and callback-handling is still up to the smugmugger.

Still, i think you have to do the first points of my 'thinking out loud': Walking through the images/image-containers on your smugmug gallery page (using DOM methods), then giving them proper IDs (it seems they are not given IDs by smugmug, just class-names) and calling the Droppables.add() and new Draggable().

mmmmmmmmm if i have some time, i might try it on my page, just to see if it would work.