Как динамически изменить изображение с помощью javascript / jquery? - PullRequest
Новая
       0

Как динамически изменить изображение с помощью javascript / jquery?

3 голосов
/ 07 августа 2011

Итак, у меня есть это http://jsfiddle.net/ithril/UjGhE/1/ Пожалуйста, проверьте его.

Я пытаюсь здесь динамически изменить src основного тега img tag на тот же атрибут src изображения, которыйнажата.Короче говоря, какое бы изображение ни нажималось, оно отображается в большем окне с id = "main-photo".

Ответы [ 5 ]

4 голосов
/ 08 августа 2011

Я вижу, что мой оригинальный код сделал это далеко :) Поскольку никто не получил согласие, я буду стараться изо всех сил.Я снова дам вам несколько советов по общим вопросам:

  1. Ваши теги гиперссылки (<a>) не разглашаются.Это, безусловно, приведет к ошибке проверки.Вы можете тренировать свои навыки в html: регулярно проверяйте себя (звучит грязно, верно?)
  2. В .main-photo img {} position:relative: не закрывается; '
  3. В вашем.slider-large-image li img {}, margin: 10px не был закрыт!

ПРИМЕЧАНИЯ

  • Вы могли бы добавить этот вопрос к исходному.Я бы с радостью добавил эту функцию:)
  • Я снова немного исправил ваш код.
  • Есть ли веская причина для использования гиперссылок в списке каруселей?Я удалил теги, так как они делали вещи излишне сложными.Вы должны сделать то же самое с предыдущим и следующим триггерами.
  • Я не собираюсь исправлять макет.Вы можете сами разобраться:)
  • Майли потрясает!
  • Я добавил изображение по умолчанию, поэтому, когда страница загружается в первый раз - пустого контейнера не будет.

Демонстрационная версия

http://jsfiddle.net/hobobne/K439d/

Полный код версии: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>How to dynamically change an image using javascript/jquery? - Kalle H. Väravas</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
        html, body {margin: 0px; padding: 0px;}
                html, body, div, th, td, p, a {font-family: "Comic Sans MS", cursive; font-size: 12px; color: #000000;}
                .cb {clear: both;}
                #wrapper {width: 400px; margin: 0px auto;}
                    .main-photo{width: 80%; height: 400px; position: relative; border: 1px solid #000000;}
                        .main-photo img {width:100%; height:100%; position:relative; top: 0; left: 0px;}
                    .main-slider {float: left; position: relative; margin-bottom: 10px; border: 0px solid #000; top: 25px; left: 0px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 30px 1px #999; -webkit-box-shadow: 0px 0px 30px 1px #999; box-shadow: 0px 0px 30px 1px #999; padding: 0px; color: #FFF; text-align: center; text-decoration: none; /*background-color: #CCC;*/}
                    .window {width: 700px; height: 230px; overflow: hidden; position: relative;}
                        .slider-large-image {position: relative; overflow: hidden; float: left; list-style-type: none; margin: 0px; padding: 0px;}
                            .slider-large-image li {margin: 0px; padding: 0px; float: left; display: inline-block;}
                                .slider-large-image li img {float: left; width: 200px; height: 150px; margin: 10px; cursor: pointer;}
                    .slider-pager {position: relative; z-index: 2; margin: -40px auto 0px;}
                        .slider-pager a {margin: 0px 2px; padding: 2px; text-align: center; text-decoration: none; font-size: 20px; font-weight: bold; color: #ccc;}
                            .slider-pager a:hover,
                            .slider-pager a:active {background-color: #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
                            .slider-pager a:hover {color: black;}
                            .slider-pager a.active {/* background-color and border-radius used to be here.. */}
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="main-photo">
            <img id="mainphoto" src="http://www.insanemom.net/wp-content/uploads/miley-cyrus-smoking-bong.jpg" />
        </div>
        <div class="main-slider">
            <div class="window">
                <ul class="slider-large-image">
                    <li><img src="http://images.sneakhype.com/wp-content/uploads/2010/12/Miley-Cyrus-300x200.jpg" /></li>
                    <li><img src="http://wa2.www.3news.co.nz/Portals/0-Articles/185340/miley-cyrus_reuters_420.jpg?width=300" /></li>
                    <li><img src="http://cdn.buzznet.com/media/jjr/headlines/2009/03/miley-cyrus-ryan-seacrest.jpg" /></li>
                    <li><img src="http://images.smh.com.au/2010/12/29/2112265/miley_cyrus_400-300x200.jpg" /></li>
                </ul>
            </div>
            <div class="slider-pager"><a href="#" id="b">&lsaquo;</a><a href="#" id="f">&rsaquo;</a></div>
        </div>
        <br class="cb" />
    </div>
    <script>
        $(document).ready(function() {
            var imagewidth = $('.slider-large-image li').outerWidth();
            var imagesum = $('.slider-large-image li img').size();
            var imagereelwidth = imagewidth * imagesum;
            $(".slider-large-image").css({'width' : imagereelwidth});
            $('.slider-large-image li:first').before($('.slider-large-image li:last'));
            $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
            rotatef = function (imagewidth) {
                var left_indent = parseInt($('.slider-large-image').css('left')) - imagewidth;
                $('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function() {
                    $('.slider-large-image li:last').after($('.slider-large-image li:first'));
                    $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
                });
            };
            rotateb = function (imagewidth) {
                var left_indent = parseInt($('.slider-large-image').css('left')) + imagewidth;       
                $('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function(){               
                    $('.slider-large-image li:first').before($('.slider-large-image li:last'));
                    $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
                });
            };
            $(".slider-pager a#b").click(function () {
                rotateb(imagewidth);
                return false;
            });
            $(".slider-pager a#f").click(function () {
                rotatef(imagewidth);
                return false;
            });
            $(".slider-large-image li img").click(function() {
                $(".main-photo img").attr("src", $(this).attr('src'));
            });
        });
    </script>
</body>
</html>
1 голос
/ 07 августа 2011 
$("ul.slider-large-image li a").click(function(e){
    e.preventDefault();      // prevent changing url
    $("#mainphoto").attr('src',$(this).children('a').attr('src')); //show clicked photo as main
});
1 голос
/ 07 августа 2011

Измените эту часть своего кода JS: 

$(".slider-large-image li a img").click(function() {

        $(".main-photo img").attr("src",$(this).attr('src'));

    });

на: 

$(".slider-large-image li a").click(function() {        
   $(".main-photo img").attr("src",$(this).find("img").attr("src"));
   return false;
});

Это должно работать нормально.Например: http://jsfiddle.net/UjGhE/23/

1 голос
/ 07 августа 2011

Это действительно просто сделать с помощью jQuery.Когда пользователь нажимает на тег <img>, вы получаете доступ к this внутри функции обратного вызова.Просто возьмите $(this).attr('src') и установите для него источник $('#main-photo') следующим образом: 

$('img').click(function(){
    $('#main-photo').attr('src', $(this).attr('src'));
});

-

В вашем коде похоже, что вы используете .main-photo img, которыйтакже должен работать.Я смотрю на это больше сейчас.

-

РЕДАКТИРОВАТЬ, после просмотра вашего кода, вы, кажется, многие пропущенные </a> с наряду с другими ошибками.Вот обновленная и рабочая версия (без CSS и дополнительного JavaScript): 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slider-large-image a img').click(function() {
        $('img#mainphoto').attr('src, $(this).attr('src'));
    });
});
</script>
<div id="wrapper">
    <div class="main-photo"><img id="mainphoto" src="" /></div>
    <div class="main-slider">
        <div class="window">
            <ul class="slider-large-image">
                <li><a href=""><img src="http://images.sneakhype.com/wp-content/uploads/2010/12/Miley-Cyrus-300x200.jpg" /></a></li>
                <li><a href=""><img src="http://wa2.www.3news.co.nz/Portals/0-Articles/185340/miley-cyrus_reuters_420.jpg?width=300" /></a></li>
                <li><a href=""><img src="http://cdn.buzznet.com/media/jjr/headlines/2009/03/miley-cyrus-ryan-seacrest.jpg" /></a></li>
                <li><a href=""><img src="http://images.smh.com.au/2010/12/29/2112265/miley_cyrus_400-300x200.jpg" /></a></li>
            </ul>
        </div>
        <div class="slider-pager"><a href="#" id="b">&lsaquo;</a><a href="#" id="f">&rsaquo;</a></div>
    </div>
    <br class="cb" />
</div>
0 голосов
/ 07 августа 2011

Все, что вам нужно сделать, это удалить атрибут href из ваших ссылок.При нажатии это приводит к перезагрузке страницы.Однако этот атрибут также отвечает за превращение курсора в указатель, поэтому вам придется вручную назначить его в CSS: a { cursor: pointer }

Нажатие на изображение теперь загрузит указанное изображение в ваше основное изображение.держатель, без перезагрузки страницы, которая вызвала вашу проблему.

Я бы очистил HTML, если бы вы были, потому что есть много незамкнутых тегов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...