ejemplo - Alternar un src de imagen con jQuery

prop jquery

Question

Escribí un código para alternar el src de una imagen y también para pausar / reanudar el complemento jQuery cycle2.

No estoy seguro de por qué no está funcionando y agradecería algo de ayuda.

$(''.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'');
    }
});

Si elimino la declaración ''else if'', la primera declaración ''if'' funciona.

Gracias por la ayuda.

Jeff

Answer 1

Para los elementos de la IU, como los botones de pausa / reproducción, debe utilizar fondos CSS , no imágenes en línea. Eso fue simplemente cambiar los nombres de las clases para cambiar la imagen.

Puede usar imágenes en línea, pero debería simplificar el uso de nombres de clase, una vez más.

$(''.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'');
    }
});

Answer 2

Sea más genérico y compruebe la fuente de la imagen solamente, no toda la cadena:

$(''.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'');   
});

Answer 3

$(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 );
    });
});

Aún más líneas reductoras son posibles, pero se evita la confusión. Básicamente, obtiene la fuente del atributo de estado actual y verifica y asigna la fuente requerida.

Answer 4

De vez en cuando, es razonable querer intercambiar el código de imagen directamente en lugar de manejarlo en CSS (trabajando sobre errores extraños, principalmente). Lo que he hecho en este caso es una sencilla función de ayuda que alterna entre el src inicial y un src alternativo que también se puede especificar en el elemento de la imagen, así:

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

y el elemento de imagen en sí mismo tiene una propiedad extra llamada ''toggle_src'' (o puede agregarlo dinámicamente si lo necesita):

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

Answer 5

Sé que esta es una respuesta tardía, pero ¿qué pasa con el uso de algo más simple como:

$(''.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'');
    }
});

Answer 6

Este es otro enfoque:

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

Y para jQuery

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

Necesita alguna animación divertida, probablemente, pero hace el trabajo.

Aquí hay un fragmento:

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