Dino
Reputation: 1457
Swap an image for swf file using Jquery
I have some thumbnails + a camera icon on a page and a main image, currently you click the thumbnail and the main image fades out and a full size version fades in of the thumbnail.
Now if a user clicks the camera icon the full image should fade out and a swf video should fade in, how can I achieve this?
Here is the current code i'm using for the images:
$('a.thumbnail').click(function(){
var src = $(this).attr('href');
if (src != $('img#full_image').attr('src').replace(/\?(.*)/,'')){
$('img#full_image').stop().animate({
opacity: '0'
}, function(){
$(this).attr('src', src+'?'+Math.floor(Math.random()*(10*100)));
}).load(function(){
$(this).stop().animate({
opacity: '1'
});
});
}
return false;
});
Thanks
Upvotes: 0
Views: 1432
Answers (2)
Dino
Reputation: 1457
<html>
<head>
<script type="text/javascript" language="javascript" src="jquery/jquery-1.5.1.js"></script>
<script type="text/javascript" language="javascript" src="http://jquery.thewikies.com/swfobject/jquery.swfobject.1-1-1.min.js"></script>
<style>
div#test {
background: #ffffff;
width: 360px;
height: 360px;
display: none;
z-index: 5;
position: fixed;
}
#mainimage {
z-index: -1;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
<div id="test"></div>
<div id="mainimage"><img id="full_image" src="1.jpg" alt="0" width="360" height="360" border="0" /></div>
<span id="flash" style="width:360px;height:360px;border:0px;margin:0px;padding:0px;z-index:-1;">
<object data="fireworks.swf" type="application/x-shockwave-flash" id="flash_99458582" width="360" height="360">
<param name="movie" value="fireworks.swf"><param name="wmode" value="opaque">
</object>
</span>
</td>
<td>
<table>
<tr>
<td><a href="1.jpg" class="thumbnail"><img src="1.jpg" width="70" height="70"></a></td>
</tr>
<tr>
<td><a href="2.jpg" class="thumbnail"><img src="2.jpg" width="70" height="70"></a></td>
</tr>
<tr>
<td><img src="3.jpg" width="70" height="70" class="video"></td>
</tr>
</table>
</td>
</tr>
</table>
<br /><br />
<script type="text/javascript">
$(document).ready(function () {
$("#flash").hide();
$('a.thumbnail').click(function () {
var src = $(this).attr('href');
$("#test").fadeIn("slow", function () {
//$("#test").fadeOut("slow");
$("#flash").hide();
$("#test").hide();
$("img#full_image").show();
$("img#full_image").css({ opacity: 0 });
//alert(src);
if (src != $('img#full_image').attr('src').replace(/\?(.*)/, '')) {
$('img#full_image').attr('src', src + '?' + Math.floor(Math.random() * (10 * 100)));
}
$('img#full_image').stop().animate({ opacity: '1' }, 'slow');
});
//alert("here");
return false;
});
$('img.video').click(function () {
$("img#full_image").fadeOut("slow", function () {
$("#test").show();
$("#flash").show();
$("img#full_image").hide();
$("#test").fadeOut("slow");
});
return false;
});
});
</script>
</body>
</html>
Upvotes: 0
Dino
Reputation: 1457
Right so here's the code that I am using:
<script type="text/javascript" language="javascript" src="/jquery/jquery-1.5.1.js"></script>
<script type="text/javascript" language="javascript" src="/swfobject/jquery.swfobject.1-1-1.min.js"></script>
<table>
<tr>
<td>
<img id="full_image" src="1.jpg" alt="0" width="360" height="360" border="0" />
<span id="flash" style="width:360px;height:360px;border:0px;margin:0px;padding:0px;">
<object data="fireworks.swf" type="application/x-shockwave-flash" id="flash_99458582" width="360" height="360">
<param name="movie" value="fireworks.swf">
<param name="wmode" value="opaque">
</object>
</span>
</td>
<td>
<table>
<tr>
<td><a href="1.jpg" class="thumbnail"><img src="1.jpg" width="70" height="70"></a></td>
</tr>
<tr>
<td><a href="2.jpg" class="thumbnail"><img src="2.jpg" width="70" height="70"></a></td>
</tr>
<tr>
<td><img src="3.jpg" width="70" height="70" class="video"></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
$("#flash").hide();
$('a.thumbnail').click(function(){
$("#flash").hide();
$("img#full_image").show();
var src = $(this).attr('href');
if (src != $('img#full_image').attr('src').replace(/\?(.*)/,'')){
$('img#full_image').attr('src', src+'?'+Math.floor(Math.random()*(10*100)));
}
return false;
});
$('img.video').click(function(){
$("img#full_image").hide();
$("#flash").show();
});
return false;
});
</script>
This will get most of you roughly started. You will probably want to create some sort of loading, for images which are large, or a preloader.
Also this code just switches image / swf it does not fadeIn / fadeOut (because of the flash file). When I get some time I may look into trying to create the effect by overlaying a white image(my background I'm using is white) and increase its opacity etc.
Thanks
Upvotes: 0