Как изменить фон для выбранного изображения, выбрав изображение в Jquery? - PullRequest
Новая
       4

Как изменить фон для выбранного изображения, выбрав изображение в Jquery?

0 голосов
/ 10 декабря 2011

Я хочу изменить свое фоновое изображение, нажав на изображение большого пальца .. У меня есть эти коды ... загрузка страницы работает правильно ... но когда я нажимаю на изображение большого пальца, мой фон не меняется. пожалуйста помоги У меня есть этот код в моей странице загрузки. Этот код загружает изображение при загрузке страницы: 

$(function() {
                //the loading image
                var $loader     = $('#st_loading');
                //the ul element 
                var $list       = $('#st_nav');
                //the current image being shown
                var $currImage  = $('#st_main').children('img:first');

                //let's load the current image 
                //and just then display the navigation menu
                $('<img>').load(function(){
                    $loader.hide();
                    $currImage.fadeIn(3000);
                    //slide out the menu
                    setTimeout(function(){
                        $list.animate({'left':'0px'},500);
                    },
                    1000);
                }).attr('src',$currImage.attr('src'));

Я хочу изменить свой фон на выбранное изображение, выбрав изображение: 

//clicking on a thumb, replaces the large image
                $list.find('.sc_menu a').bind('click',function(){
                    var $this = $(this);
                    $loader.show();
                    $('<img class="st_preview"/>').load(function(){
                        var $this = $(this);
                        var $currImage = $('#st_main').children('img:first');
                        $this.insertBefore($currImage);
                        $loader.hide();
                        $currImage.fadeOut(2000,function(){
                            $(this).remove();
                        });
                    }).attr('src',$this.attr('alt'));
                }).bind('mouseenter',function(){
                    $(this).stop().animate({'opacity':'1'});
                }).bind('mouseleave',function(){
                    $(this).stop().animate({'opacity':'0.7'});
                });

А это мой HTML-код: 

<body>

        <div id="st_main" class="st_main">
            <img src="images/2.jpg" alt="" class="st_preview" style="display:none;"/>
            <a class="back" href="#"><< back to Codrops</a>
            <ul class="menu" id="menu">
                <li>
                    <a href="#">Brand 1</a>
                    <div class="sc_menu_wrapper">
                        <div class="sc_menu">
                            <a href="#"><img src="images/1.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/2.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/3.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/1.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/2.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/3.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/1.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/2.jpg" alt="images/1.jpg"/></a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
</body>

Ответы [ 2 ]

0 голосов
/ 10 декабря 2011

попробуйте изменить $('<img class="st_preview"/>').load на $('img.st_preview').load

Первый создает новый объект img dom в памяти и назначает src, где в качестве второго находит существующие st_preview именяет attr

0 голосов
/ 10 декабря 2011

Попробуйте это 

 $('<img class="st_preview"/>').load(function(){
        var $newimg         = $(this);
        var $currImage      = $('#st_preview').children('img:first');
        $newimg.insertBefore($currImage);
        $loader.hide();
        $currImage.fadeOut(2000,function(){$(this).remove();});
    }).attr('src',$e_next.find('img').attr('alt'));
}
...