CODEWITHSUNDEEP
jqueryhtmljquery-mobilecordova
Oberheim
Oberheim

Reputation: 78

Load an image from a div into a ListView as a thumbnail

I've got a div in which I've loaded some HTML. What I would like to do is is to somehow get the first image from this div (I need to search for "img" since I can't control their classes/IDs) and put it as a thumbnail in a listview. Any ideas? It's for a phonegap application using jquery/html5 for Android and iPhone.

Upvotes: 0

Views: 1615

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85328

Example:

JS:

// Append each image to the list
$('img').each(function() {
    var imageList = $('#thumbs');

    imageList.append('<li><a href="#"><img src="'+this.src+'"><h3>Thumbnail Title</h3><p>Thumbnail Description</p></a></li>');
});

// Refresh jQM Controls
$('#thumbs').listview('refresh');

HTML:

<!-- images -->
<img src="http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-p.jpg" alt="full size image" />
<img src="http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-xx.jpg" alt="full size image" />
<img src="http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-ok.jpg" alt="full size image" />

<br />

<ul data-role="listview" id="thumbs">
    <li><a href="#">
        <img src="http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-hc.jpg" />
        <h3>Thumbnail Title</h3>
        <p>Thumbnail Description</p>
    </a></li>
</ul>​

Upvotes: 1

munnster79
munnster79

Reputation: 578

This may be slightly generic as you've not provided any HTML, with a structure like this

text

more text

You can retrieve the first img using the following Jquery

$(document).ready(function() {
   var html = $("div img:first").attr('src');
    $("#list").append("<li><img src="" + html + "" /></li>");
});

This will retrieve the src attribute of the first img tag in the div and append an image to your list.

Is this the kind of thing you're after?

Upvotes: 0

Related Questions