Have an image replacement galler want large image to be replaced by video when clicked
I have a image replacement gallery and when I click a thumbnail a larger image appea开发者_运维知识库rs in the main div. I wish to click this image and have it play a video, I would like a different video to play for each of the larger images clicked. All videos are on youtube. Here is the code and script I have so far:
<div class="videogallery">
<img id="largeImg" src="/images/locationbased_largeclicktoplay.jpg" alt="Location-Based Video" />
</div>
<div><hr /></div>
<div class="thumbnails">
<p style="font-size: 14px; font-weight:bold; color:#466ea9;font-family:'Lucida Grande', sans-serif; text-align:left; padding-bottom:10px;">Videos</p>
<p style=" text-align:center;">
<a href="/images/logo_largeclick.jpg" title="Social Media 101 Video">
<img src="/images/logo_small.jpg" border="0" height="61" width="100" style="padding-right:10px;" /></a>
<a href="/images/facebook_large.jpg" title="Facebook Video">
<img src="/images/facebook_small.jpg" border="0" height="61" width="100" style="padding-right:10px;"/></a>
<a href="/images/twitter_largeclicktoplay.jpg" title="Twitter Video">
<img src="/images/twitter_small.jpg"border="0" height="61" width="100" style="padding-right:10px;"/></a>
<a href="/images/youtube_largeclicktoplay.jpg" title="Youtube Video">
<img src="U/images/youtube_s.jpg" border="0" height="61" width="100" style="padding-right:10px;"/></a>
</div>
Here is the script:
<script type="text/javascript">
$(document).ready(function(){
$(".thumbnails a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html(" (" + largeAlt + ")"); return false;
});
});
Any help is much appreciated!
Thank You. -Ann
I got it I added a script
<script type="text/javascript">
var embedCode = '<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600">
<param name="src" value="http://blip.tv/play/gYMo_vAmAA">
<param name="allowfullscreen" value="true"></object>'
</script>
and onclick
:
onclick="document.getElementById('videocontainer').innerHTML = embedCode;"
to the image
tag
I will probably add a different variable to the script for each thumbmail.
精彩评论