jQuery General Question (cycle plugin)

Question

Currently this does work except slide.src is undefined because by default slide.src is looking for an image src tag first, but the image src tag is now inside the div properties.

So how can i change the javascript + slide.src + to be(or get) the image inside the div properties.

View

<div id="properties">
<?php foreach($search_results->result() as $row) :?>
<div id="<?=$row->mls_listing_id?>"><br>
Listing ID : <?=$row->mls_listing_id?><br>
State: <?=$row->sale_price?><br>
State: <?=$row->mls_state_code?><br>
MLS Office: <?=$row->mls_office_name?><br>
Office Number: <?=$row->mls_office_phone?><br>
Photo: **<img src="<?=$row->photo_url?>" width="175" height="137" /**><br>
</div><!--END specific id div -->
<?php endforeach; ?>

</div><!--End Properties DIV -->

javascript

$('#properties')
.before('<ul id="propnav">')
.cycle({ 
    fx: 'scrollHorz', 
    next:'#next',   
    prev:'#prev',
    pager:  '#propnav', 
    delay: -1000 ,
    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#">**<img src="' + slide.src + '"** width="50" height="50" /></a></li>'; 
    }
});

Answer 1

To get the image contained in the div slide, you need to use: $(slide).children('img').attr('src')

Here's the complete code:

$('#properties')
.before('<ul id="propnav">')
.cycle({ 
    fx: 'scrollHorz', 
    next:'#next',       
    prev:'#prev',
    pager:  '#propnav', 
    delay: -1000 ,
    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#">**<img src="' + $(slide).children('img').attr('src') + '"** width="50" height="50" /></a></li>'; 
    }
});

Answer 2

Thanks so much José! I needed the same thing, but mine was a big worse ;)

$(slide).children('div').children('span').children('a').children('img').attr('src')