StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
18621650
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-09-04T18:55:55.733
FavoriteCount
0
LastActivityDate
2013-09-06T22:52:53.060
LastEditDate
2013-09-06T22:52:53.060
LastEditorUserId
1330275
OwnerUserId
1330275
ParentId
18614598
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
That's absolutely possible, although there are a lot of ways you could structure it. Here is one of many possible solutions. I assume the presence of a Raphael paper object named <code>paper</code> throughout. Location and Dimensions <pre><code> var cx = 180, cy = 125; /* These are the coordinates of the center point of your image(s) inside the paper */ var dx = 320, dy = 240; /* dx and dy describe the dimensions of the desired image interface. */ </code></pre> Image Information I'd assume you'd want to load this information dynamically via ajax (depending on how your gallery is structured) or be able to re-use it. This example uses an array of objects describing the <code>url</code>, <code>width</code>, and <code>height</code> of each item in the list. For instance... <pre><code> var imageList = [ { url: '/tests/images/sunset1.jpg', width: 1600, height: 900, }, { url: '/tests/images/moonrise1.jpg', width: 1024, height: 768, }, { url: '/tests/images/cityscape.jpg', width: 1920, height: 1080, }, { url: '/tests/images/forest03.jpg', width: 500, height: 325, }, ]; </code></pre> The Code Last but not least, run this code when your DOM is ready (or after your images have loaded, or whatever other event should trigger it). This just creates a function to do the transition and then calls it to get the first image into place. <pre><code> var imageIndex = 0; var rotationMultiplier = 1; var currentImage = null; function rotateTransitionNext() { rotationMultiplier *= -1; imageIndex++; if ( imageIndex >= imageList.length ) imageIndex = 0; if ( currentImage ) { currentImage.animate( { transform: ["...r", 180 * rotationMultiplier, cx, cy], opacity: 0.0 }, 1000, '<>', function() { this.remove(); } ); } var newImage = paper.image( imageList[imageIndex].url, cx - dx / 2, cy - dy / 2, dx, dy ) .attr( { transform: [ "r", -180 * rotationMultiplier, cx, cy], opacity: 0.0 } ) .animate( { transform: [ "...r", 180 * rotationMultiplier, cx, cy ], opacity: 1.0 }, 1000, '<>', function() { currentImage = this; this.click( rotateTransitionNext ); } ); } rotateTransitionNext(); </code></pre> Loose Ends As a rough starting point, there are a few things that should be done to wrap this up: <ol> <li>For goodness' sake, wrap this stuff up in its own namespace to avoid cluttering the global scope with detritus (my bad)</li> <li>Preserve aspect ratios of different images. Right now, all images are being forced to conform to the globally defined dimensions (dx and dy)</li> </ol> Happy coding. UPDATE: <a href="http://voidblossom.com/tests/_imageRotateTransition.php" rel="nofollow">here</a> is a staged example of this code at work. Just click on the image to cause it to rotate to the next.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. PORaphael js | how to animate with two images
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USKevin Nielsen
UserOwnerUserId
1. USKevin Nielsen
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.