CODEWITHSUNDEEP
jquerybxslider
hyperrjas
hyperrjas

Reputation: 10744

access the src attribute of an image with jquery

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!

Upvotes: 0

Views: 2476

Answers (6)

adeneo
adeneo

Reputation: 318332

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);

Upvotes: 1

Simon
Simon

Reputation: 3539

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')

Upvotes: 0

VinayC
VinayC

Reputation: 49225

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.

Upvotes: 1

Hkachhia
Hkachhia

Reputation: 4539

Try this may be help you

document.getElementById("currentSlide_id").src;



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

Upvotes: 0

Macros
Macros

Reputation: 7119

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
}

Upvotes: 5

mindandmedia
mindandmedia

Reputation: 6825

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.

Upvotes: 1

Related Questions