Section 8 Sp 11

From CSE190M-Admin

[edit] Links

• Writeup
  • New writeup (under development)
• Skeleton: HTML JS
• Solution: HTML CSS JS ZIP of images directory

[edit] Tips

You obviously don't want to write this solution code top to bottom in the order that it appears in the provided solution file. The section handout lists a suggested progression of effects and things to add. They generally go from easy to hard. Here are some observations about the code:

• One of the first things you'll want to do pretty early on is to create a function to set the current "main" big image, passing a given img thumbnail as the parameter. In the provided solution it's called setCurrentPic. You'll find yourself calling this from everywhere: when you double click an image, when you click the Left/Right arrow buttons, when you drag and drop, etc.

• You should show some effects when you set the current pic. But the subtle part is that you don't want to double-apply the effect if they re-double-click the same image. So what the sample solution does is that it slaps a CSS class of "currentpic" on the currently selected pic, and then if the user ever double-clicks a pic, it looks to see if the newly double-clicked pic is the same as the "currentpic", and if so, it doesn't re-do the effect. You could also do this by adding/removing an id, but that might mess with Sortable.

• Be careful that you have to say, new Effect.Scale(element, percent), rather than element.scale(percent); .

• The code for the Left/Right arrow event handlers is kind of cute. You can just call .previous() or .next() on the currently selected pic, and it'll give you the prev/next one. If you're at the start or end and there is no prev/next, it returns undefined. I suggest not worrying about wrap-around, and just doing nothing if they try to go past the ends of the list. Again you want to call your setCurrentPic function here. In fact, this is sort of the point where you might want to refactor the code to have the setCurrentPic function in the first place. Up until this point you could have written the 'set current picture' code as the click handler for the pictures. But now suddenly you want to call it twice, ergo the setCurrentPic helper function.

• When you make the list of images sortable, you have to pass it a couple of options. One is 'tag', which you can set to "img" to tell it that the sortable draggable things are images and not LIs. The other is 'constraint', which you can set to "horizontal" to tell Scriptaculous that you are dragging sideways and not up/down. They haven't seen these options, but the idea is that you maybe go with them to the Scriptaculous wiki and dig through it and show them some of the options and say, let's try this one, etc. There are some misleading unnecessary ones like 'elements' or 'handles' or 'overlap' that seem like they might be useful but are not needed.

• The drag/drop is surprisingly simple. You just make the images all Draggable (making sure they revert back when let go), and then you make the "mainimage" droppable. You want to listen to the onDrop event so that you can run some code when an image is dropped there. What function should you use as your onDrop handler? It turns out that the setCurrentPic function you already wrote is perfect! Because the onDrop handler is given the dropped element as its parameter, and that's exactly the parameter your setCurrentPic function takes. It's lovely.