StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to dynamically display image properties with jQuery/Ajax?
primarykey
Id
10774490
data
AcceptedAnswerId
10774724
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-05-27T13:56:31.347
FavoriteCount
0
LastActivityDate
2012-05-27T14:31:55.887
LastEditDate
LastEditorUserId
0
OwnerUserId
1364313
ParentId
0
PostTypeId
1
Score
0
ViewCount
1092
LastEditorDisplayName
text
Body
I'm using simple gallery script which dynamically loads image when user clicks on thumbnail : <pre><code>$(document).ready(function() { $('.thumbnailB').live("click", function() { $('#mainImage').hide(); var i = $('<img />').attr('src',this.href).load(function() { $('#mainImage').attr('src', i.attr('src')); $('#imageWrap').css('background-image', 'none'); $('#mainImage').fadeIn(); }); return false; </code></pre> here is script demo : <a href="http://www.micahcarrick.com/code/jquery-image-swap/index.html" rel="nofollow">http://www.micahcarrick.com/code/jquery-image-swap/index.html</a> and PHP which uses filename and then explode to display image properties under image : <pre><code>// this variable has to contain current image when user clicks on thumbnail $filename = " "; $fileinfo = explode("-", $filename); echo $filename; ?> Filesize : <?php echo $fileinfo[1]; ?> <?php $resolution=$fileinfo[2]; $res = explode("x", $resolution); ?> Width : <?php echo $res[0]; ?> Height : <?php echo $res[1]; ?> </div> </code></pre> HTML : <pre><code><a href="/download/thumbnail/big/Photo01-310KB-500x381-thbig.png" class="thumbnailB"> <img src="/download/thumbnail/small/Photo01-310KB-500x381-thsmall.png" alt="Image 1"/> </a> <a href="/download/thumbnail/big/Photo02-328KB-500x353-thbig.png" class="thumbnailB"> <img src="/download/thumbnail/small/Photo02-328KB-500x353-thsmall.png" alt="Thumbnail 2"/> </a> <div id="imageWrap"> <img src="/download/thumbnail/big/Photo01-310KB-500x381-thbig.png" alt="Main Image" id="mainImage"/> </div> </code></pre> How to grab image name and pass it into $filename variable from Jquery to PHP ? 1) grab and send #mainImage image name when page is loaded and then 2) grab and send .thumbnailB image name each time user clicks on thumbnail I have a lot of images - using Jquery/PHP explode to display image properties would save me from database input, photos will be stored on Amazon S3 that's why information(image resolution) has to be encoded into filename or database.
Tags
<php><jquery><ajax><variables>
Title
How to dynamically display image properties with jQuery/Ajax?
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USRorkkkk
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. PO
 singulars
 PostTypePostTypeId
 PTAnswer
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.