Jquery toggle img attribute

Question

I am trying to toggle images from the thumbnail to the feature image when the thumb nail is clicked. Currently when its clicked the images will swap but I cant get them to swap back with the thumb nail is clicked on again. I've tried using toggle but when the thumb nail is clicked on it would remove the image completely and I couldnt get any image to return. Currently this will switch the images but not switch or toggle them back on click.

$(".browseTable").on('click', 'td', function () {                

    var thumbNail = $(this).parent('tr').find('img').attr('src');
    var feature = $('#featureImg img').attr('src');

    $('#featureImg img').fadeOut(400, function () {
        $(this).fadeIn(400)[0].src = thumbNail;
    });
});

score 0 · Answer 1 · edited May 23 '17 at 12:06

You can achieve your target via setting src of image in css.

    .imageOne{
        content:url(YOUR SOURCE);
    }

    .imageTwo{
        content:url(YOUR SOURCE);
}

add class to your image element in start check if element exist by either class if exist toggle() to another, this will change the image back to another. And use toggle() like following example

$(".browseTable").on('click', 'td', function () {                

            //var thumbNail = $(this).parent('tr').find('img').attr('src');
            //var feature = $('#featureImg img').attr('src');

            //$('#featureImg img').fadeOut(400, function () {
            //    $(this).fadeIn(400)[0].src = thumbNail;
            //});               

            $('#featureImg img').find('.imageOne, .imageTwo').toggle();
        });

I am able to use toggle simply to change one element to another. etc. hope it will help you.

Is it possible to set the equivalent of a src attribute of an img tag in CSS?

These images are loaded from a ajax call that retrieves a url. — Troy Bryant, Jul 30 '15 at 12:40
You can modify the css using jquery / javascript of the image element,at the point when results from ajax call returns. — Shaikh Muhammad Fahad, Jul 30 '15 at 22:29

score 0 · Answer 2 · answered Jul 29 '15 at 21:38

Try this. When the parent is clicked we toggle both children. The large version starts off hidden.

<div class="toggle js-toggle">
    <img src="http://www.placehold.it/100x100" alt="" class="toggle__thumb js-toggle-image"/>
    <img src="http://www.placehold.it/500x500" alt="" class="toggle__active js-toggle-image" style="display: none" />
</div>

The jQuery

$('.js-toggle').on('click', function() {

    $(this).find('.js-toggle-image').toggle();

});

https://jsfiddle.net/uoLv2nkh/1/

Or an only CSS way if you only care about when the user is clicking.

https://jsfiddle.net/uoLv2nkh/

Dariusz Majchrzak · Accepted Answer · 2015-07-29T21:58:45.433

You can use data for store source string and toggling images

preview on : https://jsfiddle.net/5kxf65Lx/

<img src="source1.jpg" data-srcfirst="source1.jpg"     data-srcsecond="source2.jpg" />

<script type="text/javascript">

$('img').click(function(){
    var loaded = $(this).attr('src')

    var first = $(this).data('srcfirst')
    var second = $(this).data('srcsecond')

    if(loaded == first){
        $(this).attr('src' , second)
    } else {
        $(this).attr('src' , first)
    }

})

Jquery toggle img attribute

3 Answers3