StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJavascript image and href swap on image gallery
primarykey
Id
16502421
data
AcceptedAnswerId
0
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-05-11T22:46:23.830
FavoriteCount
0
LastActivityDate
2013-05-12T23:54:33.400
LastEditDate
2013-05-12T11:53:04.610
LastEditorUserId
2373873
OwnerUserId
2373873
ParentId
0
PostTypeId
1
Score
0
ViewCount
847
LastEditorDisplayName
text
Body
<p>I have an image gallery on my site that has one large display image with caption and 3 smaller thumbnail images below. Right now, I have a javascript that enables the display image and caption to be swapped out when you click on the different thumbnails. My end goal, and what I am having difficulty with is to have each of the large display images link to a different video.</p> <p>My faulty javascript which works for display image and caption swapping but not link swapping is this:</p> <pre><code>function showPic (whichpic) { if (document.getElementById) { document.getElementById('placeholder').src = whichpic.href; document.getElementById('link').href = whichpic.video; if (whichpic.title) { document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; } else { document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; } return false; } else { return true; } } </code></pre> <p>The HTML is as follows:</p> <pre><code><div id="itemart"> <script src="js/showPic.js" type="text/javascript" language="javascript"></script> <a id="link" href="http://www.youtube.com/watch?v=SgARL8aHl8Q" title="Video Title" class="lightbox" data-height="480"><img id="placeholder" src="img/Coke_01_AnimationStoryboard.png" alt="Coca-Cola Plastic Recycling Animation." /></a> <p id="desc">Display image 01 caption.</p> <ul class="thumbnails"> <li><a onclick="return showPic(this)" href="img/Coke_01_AnimationStoryboard.png" title="Coca-Cola plastic recycling animation storyboard." video="http://www.youtube.com/watch?v=SgARL8aHl8Q"><img name="itemarttthumbnail1" width=50 height=50 src="img/thumbs/Coke_01_thumb01.png" alt="Cola-Cola Plastic Recycling Animation" style="background-color: #00FF66" /></a></li> <li><a onclick="return showPic(this)" href="img/Coke_02_AnimationStoryboard.png" title="Coca-Cola aluminum recycling animation storyboard." video="http://www.youtube.com/watch?v=Wq2GbbMJ20Q"><img name="itemarttthumbnail2" width=50 height=50 src="img/thumbs/Coke_02_thumb02.png" alt="Coca-Cola Aluminum Recycling Animation" style="background-color: #00FF66" /></a></li> <li><a onclick="return showPic(this)" href="img/Coke_03_AnimationStoryboard.png" title="Coca-Cola glass recycling animation storyboard." video="http://www.youtube.com/watch?v=qU5TOA3kWPs"><img name="itemarttthumbnail3" width=50 height=50 src="img/thumbs/Coke_03_thumb03.png" alt="Coca-Cola Glass Recycling Animation" style="background-color: #00FF66" /></a></li> </ul> </div> </code></pre> <p>I am not very adept with Javascript so I may be missing something very obvious. Any help would be greatly appreciated.</p>
Tags
<javascript><href><swap><image-gallery>
Title
Javascript image and href swap on image gallery
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USbhrycyk
UserOwnerUserId
1. USbhrycyk
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.