Swap an image for swf file using Jquery

Question

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

You can create an empty div and when the larger image is clicked you can replace that div with a SWF (hiding images if necessary). Will that be OK? — Salman A
I think so do you think it would be possible to use fadein / fadeout with swf doing it this way? — Dino
I am not sure but may be you can fade in/out the div containing the swf. As for loading SWF on-demand, have a look at swfobject library which allows you to replace a div with either an object or an embed tag depending on browser (plus other utilities). — Salman A
Just checked: SWF cannot be made opaque (fade in/out changes opacity)... i tried it on a div containing YouTube video... everything inside the div faded except the video (SWF). — Salman A
so the code that I am using has been posted above! Thanks Salman — Dino

Dino Dino · Accepted Answer · 2011-07-14T04:11:14

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

Swap an image for swf file using Jquery

Thanks

2 Answers