CODEWITHSUNDEEP
jqueryhtmlcssslideshow
Mohan
Mohan

Reputation: 289

I want to get image source from slider?

I want get current image source from slider. when its slides that image source has to be captured in text box but it is taking only first image src and not taking the subsequent images. I am using pgwSlideshow plugin..

HTML code,

<div class="cartBgclr">
    <a href="#cart" onclick="addToCart(this)">
        <div class="enqry-cart enqry-cart1 pull-left">
            <i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
            <span class="pull-left">add to enquiry cart</span>
            <input type="text" name="image-path" class="image-path" value="" />
        </div>
        <h4 style="display:none;">Sandstone</h4>
    </a>
            </div>

<div class="row">
    <div class="col-sm-12">
        <ul class="pgwSlideshow add-to-cart">
            <li><img src="images/sandstone/sandstone1.jpg" alt="" /></li>
            <li><img src="images/sandstone/sandstone2.jpg" alt="" /></li>
            <li><img src="images/sandstone/sandstone3.jpg" alt="" /></li>
            <li><img src="images/sandstone/sandstone4.jpg" alt="" /></li>
            <li><img src="images/sandstone/sandstone5.jpg" alt="" /></li>
            <li><img src="images/sandstone/sandstone6.jpg" alt="" /></li>
        </ul>
    </div>
    <div class="pd20"></div>
</div>

jquery code,

var imgSrc = $('.pgwSlideshow').find('img').attr('src');
console.log(imgSrc);

Upvotes: 2

Views: 1720

Answers (2)

danwellman
danwellman

Reputation: 9253

The problem here is that in jQuery, some methods work on arrays in get mode, and others work only on single elements. The attr method is one such method, the documentation states:

Get the value of an attribute for the first element in the set of matched elements.

(emphasis my own)

So in this example it will only ever return the src of the first element in the set returned by find.

The pgwSlideshow plugin sets all slides except the 'current' slide to be display: none, so you should be able to filter by this to get the src for the 'current' slide, something like:

var imgSrc = $('.pgwSlideshow').find('li').filter(':visible').find('img').attr('src');

You could also use the plugin's own API for this - it has a getCurrentSlide method, which returns the index of the current slide. If you used this in the afterSlide function, you should be able to get the src of the current image.

Upvotes: 0

Banzay
Banzay

Reputation: 9470

You need to get the attribute using setInterval() method. Since slideshow default interval duration is 3s, set 3000ms delay to setInterval

setInterval(function(){
  var imgSrc = $(".ps-selected > img").attr("src");
  console.log(imgSrc);
}, 3000);

Upvotes: 2

Related Questions