Getting source of image stored in block by using jquery

Question

I'm making a slider for my webpage and I'm using jquery's plugin called "Cycle". I have faced a problem with accessing source of images used in slider. It's quite hard to explain so here is my code from 'head' part:

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
    $('#slider').before('<ul id="pager">').cycle({ 
        fx: 'scrollHorz',
        speed: 900,
        timeout: 5500,
        pause: 1,
        pager: '#pager',

        pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="120" height="65" /></a></li>'; 
        } 
    });
</script>

Here is the html part:

<div id="slider_container">
    <div id="slider">
        <div class="items">
            <img src="1.jpg"/>
            <div class="info">
                <h2>Tile Nr. 1</h2>
            </div>
        </div>
        <div class="items">                         
            <img src="2.jpg"/>
            <div class="info">
                <h2>Tilte Nr. 2</h2>
            </div>
        </div>
    </div>
    <div id="pager">

    </div>
</div>

In my slider div I want to display blocks, each of them containing image and some title but in pager div I want to display only the images from those blocks used in slider. I'm sure that the problem is in slide.src expression in the third javascript. How should I change that expression to get the source of an image stored in appropriate items block?

Answer 1

Could you set up a jsFiddle that sources the jquery files you need here?

My guess is that slide.src isn't what you want. If slide is a reference to an element in the DOM, then you access its 'source' attribute like this: $(slide).attr('src')

Updated:

Turns out 'slide' is the containing div so we need this instead:

$(slide).find('img').attr('src')