Question

59

How to dynamically change an image using javascript/jquery?

rated 0 times [ 64] [ 5] / answers: 1 / hits: 19005 / 13 Years ago, sun, august 7, 2011, 12:00:00

So,i have this http://jsfiddle.net/ithril/UjGhE/1/
Please check it out.

What i'm trying here is to change the main image img tag's src dynamically to the same src attribute of the image that is clicked. In short whichever image is clicked,it is displayed in the bigger window which has an id=main-photo.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tylerdamiena

Add To Favorites

Follow

Total Points: 139

Total Questions: 90

Total Answers: 118

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

tylerdamiena questions

1 How to access sveltekit session in endpoint?

Tue, May 3, 22, 00:00, 2 Years ago

1 React.js, Each child in a list should have a unique key prop. how to fix if key is already given

Mon, Mar 7, 22, 00:00, 2 Years ago

1 Can`t resolve image.png in styles.css

Fri, Sep 17, 21, 00:00, 3 Years ago

1 Warning: validateDOMNesting(...): < body> cannot appear as a child of < div> in React.js

Wed, May 26, 21, 00:00, 3 Years ago

1 Using readonly on a reactive object

Tue, May 26, 20, 00:00, 4 Years ago

View All

answered 13 Years ago rylee · Accepted Answer

I see my original code has made it this far :)
Because nobody has gotten accept, I will try my best. I will again give you some pointers on general matter:

Your hyperlink tags (<a>) are unclosed. This will surely generate a validation error. You can train your html skills be validating yourself regularly (sounds dirty right?)

In .main-photo img {} the position:relative: is not closed with ;'

In your .slider-large-image li img {}, margin: 10px was not closed!

NOTES

You could have added this question to your original one. I would have happily added this feature :)

I again corrected your code a little.

Is there a solid reason for using hyperlinks in your carousel list? I removed the tags, since they made things unnecessarily complicated. You should do the same with the previous and next triggers.

I'm not going to fix the layouting. You can figure it yourself out :)

Miley rocks!

I added default image, so when the page is loaded for the first time -- there wouldn't be a empty container.

Live demo

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

Full version code:

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