Обмен изображения для SWF-файла с помощью Jquery - PullRequest
Новая
       27

Обмен изображения для SWF-файла с помощью Jquery

0 голосов
/ 27 июня 2011

У меня есть несколько миниатюр + значок камеры на странице и основное изображение, в настоящее время вы щелкаете по миниатюре, и основное изображение исчезает, а миниатюра исчезает в полноразмерной версии.

Теперь, еслипользователь щелкает значок камеры, полное изображение должно исчезать, а видео SWF должно исчезать, как мне этого добиться?

Вот текущий код, который я использую для изображений: 

$('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;
});

Спасибо

Ответы [ 2 ]

0 голосов
/ 15 июля 2011 
<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>
0 голосов
/ 14 июля 2011

Правильно, вот код, который я использую: 

<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>

. Большинство из вас примерно начнут.Возможно, вы захотите создать какую-то загрузку для изображений большого размера или предварительного загрузчика.

Также этот код просто переключает изображение / swf, но не fadeIn / fadeOut (из-за вспышкифайл).Когда у меня будет время, я могу попытаться создать эффект, наложив белое изображение (я использую белый фон) и увеличу его непрозрачность и т. Д.

Спасибо

...