access the src attribute of an image with jquery

Question

I'm following this example in:

http://bxslider.com/examples/perform-action-transition-callback

But with this example I can get the index number from current image.

I have this code:

 $('#preview_images_gallery').bxSlider({
                                        onAfterSlide: function(totalSlides, currentSlide){
                                                                                            var src = $('currentSlide').attr('src');
                                                                                            $('.preview .bx-wrapper .bx-window').append('<p class="check">' + src);
                                                                                         }
                                      });

How can I get the src attribute of current image?

I write:

var src = $(currentSlide).attr('src');

but I get undefined!

Thank you!

Answer 1

var source = $('img').attr('src');

Not tested, and not very efficient, but something like this might work, may need some tweaking.

var images = [], source="";
$('#slider1').bxSlider({
    pager: true,
    onBeforeSlide: function(currentSlide, totalSlides){
       $('img', this).each(function() {
           images.push(this);
       });
       source = $(images[currentSlide]).attr('src');
    }
});
alert(source);

If macros is correct, it would be:

$('#slider1').bxSlider({
        pager: true,
        onBeforeSlide: function(currentSlide, totalSlides, SlideObject){
            source = SlideObject.attr('src');
        }
    });
    alert(source);

Answer 2

Check out the API

onBeforeSlide / onAfterSlide both use the same signature below, and you can access the slide object in the 3rd parameter. You can get the details of the slides contents from this

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

Answer 3

to get the attribute of any jquery element, you can use this:

$('.selector').attr(attrName);

in your case, something like this...

$('.slider1 .left').find('img').attr('src');

or even more to the point:

jQuery('#slider1').find('li.pager:nth-child(currentSlide)').attr('src');

you will have to find the most elegant way yourself, but all the answers suggesting using .attr(attrName) are correct, you just need to find the right element selector.

Answer 4

It will depend upon your actual html mark-up, but assuming that you are using li element for creating the slide then below should do the trick (slider1 is the container ol/ul id)

$($('#slider1 li')[currentSlide - 1]).find('img').attr('src');

Essentially, we are findind the slide (li) element using the index (currentSlide - 1) and then finding image within slide to get its source attribute. Now, if you have multiple images within a slide then above may not work as expected.

Answer 5

Try this may be help you

document.getElementById("currentSlide_id").src;



var src= $('currentSlide_id').attr('src')

Answer 6

How about

$('#sliderContainer').children().eq(currentSlide).find('img').attr('src')

In the linked example, this would be

$('#slider1').children().eq(currentSlide).find('img').attr('src')