CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nithin Viswanathan
Nithin Viswanathan

Reputation: 3283

How to change the images on button click

I want to change the image by pressing the button.I have two button, one is next and other is previous.When the next button press new image must be shown and previous button press last image should come agian.But I can't do this properly.How to do this using jquery?

$(document).ready(function () {
$('#image2').hide();
$('#image3').hide();
$(".arrow").click(function () {
        $('#image1').hide();
        $('#image2').show();
    });
});

Html is

<div class="imageDiv">
   <div><img src="potraits.jpg" class="image" id="image1"/></div>
   <div><img src="pot.jpg" class="image" id="image2"/></div>
   <div><img src="potri.jpg" class="image" id="image3"/></div>
   <div><input type="image" src="arrow.gif" class="arrow"/></div>
   <div><input type="image" src="leftarrow.gif" class="leftarrow"/></div>
</div>

Upvotes: 0

Views: 2223

Answers (5)

user2264587
user2264587

Reputation: 474

http://jsfiddle.net/S6t9R/4/

$(document).ready(function () {
    $('img:not(:first)').hide();
    $(".arrow").click(function () {
        $('img:not(:last):visible').
        hide().
        parent().
        next().
        children().
        show();
    });
    $(".leftarrow").click(function () {
        $('img:not(:first):visible').
        hide().
        parent().
        prev().
        children().
        show();
    });
});

basically, the image that is visible is now hidden, and the next/previous image is now visible.

Upvotes: 1

A.Kalkhoff
A.Kalkhoff

Reputation: 146

$(document).ready(function () {
    that = this;
    this.arrayImages = $('.image');
    this.currentPosition = 0;
    $('#secondimage').hide();
    $('#thirdimage').hide();
    $(".arrow").click(function () {
        if (that.currentPosition < that.arrayImages.length) {
            that.arrayImages[that.currentPosition].hide();
            that.arrayImages[that.currentPosition+1].show();
            that.currentPosition++;
        }
    });
});

For the leftarrow it's just the other way (:

Upvotes: 0

Adam Szabo
Adam Szabo

Reputation: 11412

How about changing the image src?

JavaScript:

var images = [
    "alpha.jpg",
    "beta.jpg",
    "gamma.jpg"
];
var actImg = 0; // index of actual image

$(document).ready(function () {
    $(".leftarrow").click(function () {
        if (actImg <= 0) { // if first image is displayed, jump to last
            actImg = images.length - 1;
        }
        else {
            actImg--;
        }
        $('#onlyimage').attr('src', images[actImg]);
    });
    $(".rightarrow").click(function () {
        if (images.length <= actImg) { // if last image is displayed, jump to first
            actImg = 0;
        }
        else {
            actImg++;
        }
        $('#onlyimage').attr('src', images[actImg]);
    });
});

HTML:

<div class="imageDiv">
    <div><img src="alpha.jpg" class="image" id="onlyimage"/></div>
    <div><input type="image" src="leftarrow.gif" class="leftarrow"/></div>
    <div><input type="image" src="rightarrow.gif" class="rightarrow"/></div>
</div>

Upvotes: 0

Shijin TR
Shijin TR

Reputation: 7768

Change your script,

 $(document).ready(function () {
  $('#secondimage').hide();
  $('#thirdimage').hide();
 $(".arrow").click(function () {
    $('#firstimage').hide();
    $('#secondimage').show();
  });
$(".leftarrow").click(function () {
    $('#firstimage').show();
    $('#secondimage').hide();
  });
});

Upvotes: 0

Joachim VR
Joachim VR

Reputation: 2340

Maybe in this case you could hide/show the div-elements around your images. If you hide an image the way you do, the div itself will still be 'visible' in the document, which is probably what gives you the unwanted result.

Upvotes: 0

Related Questions