Geek Answers Handbook

Switch src image using jQuery

I wrote code to switch the src of the image, as well as to pause / resume the jQuery cycle2 plugin.

I am not sure why it is not working and would be happy to help.

$('.play-pause').click(function(){
    if ($(this).attr('src', '/images/template/pause.png')) {
        $(this).attr('src', '/images/template/play.png');
        $('.cycle-slideshow').cycle('pause');   
    } else if ($(this).attr('src', '/images/template/play.png')) {
        $(this).attr('src', '/images/template/pause.png');
        $('.cycle-slideshow').cycle('resume');
    }
});

If I delete the else statement, if the first if statement works.

Thanks for the help.

Jeff

+2
source share
7 answers

For user interface elements such as pause / play buttons, you should use CSS backgrounds , not inline images. It could just replace class names to change the image.

, .

$('.play-pause').click(function(){
    if (!$(this).hasClass('play')) {
        $(this).attr('src', '/images/template/play.png');
        $(this).addClass('play')
        $('.cycle-slideshow').cycle('pause');   
    } else  {
        $(this).attr('src', '/images/template/pause.png');
        $(this).removeClass('play')
        $('.cycle-slideshow').cycle('resume');
    }
});
+4

, :

$('.play-pause').on('click', function(){
    var isPause = this.src.indexOf('pause.png') != -1;
    this.src    = isPause  ? this.src.replace('pause.png', 'play.png') : this.src.replace('play.png','pause.png');

    $('.cycle-slideshow').cycle(isPause ? 'resume' : 'pause');   
});
+8
$(document).ready(function(){
    $(".bulb").click(function(){
    var src = $(this).attr('src');
    var newsrc = (src=='images/dim.png') ? 'images/glow.png' : 'images/dim.png';
    $(this).attr('src', newsrc );
    });
});

, . , .

+1

, , - :

$('.play-pause').click(function () {
    var _this = $(this);
    if (_this.attr("src") == '/images/template/pause.png') {
        _this.attr('src', '/images/template/play.png');
        $('.cycle-slideshow').cycle('pause');
    } else {
        _this.attr('src', '/images/template/pause.png');
        $('.cycle-slideshow').cycle('resume');
    }
});
+1

:

<!-- HTML -->
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png" class="fun-img" id="magic-toggle">

jQuery

/* jQuery */
$('#magic-toggle').click(function() {
if($('.fun-img').attr('src') === plus) {
  $('.fun-img').attr('src', minus);
} else {
  $('.fun-img').attr('src', plus)
}
})

, , .

:

var plus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png';
var minus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5802-200.png';

$('#magic-toggle').click(function() {
  if ($('.fun-img').attr('src') === plus) {
    $('.fun-img').attr('src', minus);
  } else {
    $('.fun-img').attr('src', plus)
  }
})
.fun-img {
  width: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png" class="fun-img" id="magic-toggle">
Hide result
+1

src, CSS ( , ). , , , src src, , :

function toggleImgSrc(jQueryObj) {
    tmp = jQueryObj.attr('src');
    jQueryObj.attr('src', jQueryObj.attr('toggle_src'));
    jQueryObj.attr('toggle_src', tmp);
}

, "toggle_src" ( , ):

<img src="initial_image.png" toggle_src="other_image.png"/>
0

- ...

$('#toggle').attr('src', 
    $(this).data('inactive')
);
$('#toggle').attr('src', 
    $(this).data('active')
);

data-inactive="example.com/inactive.jpg" data-active="example.com/active.jpg" . "", URL-.

0

More articles:


All Articles