Jquery Mobile - Listview with thumbnail images

    In the earlier post we took a look at how we can add an icon to the listview. In the example that follows, we will be taking a look at how to add a thumbnail to the list item. The process of adding a thumbnail is pretty much similar to adding an icon to a list item.

    Just add an image tag inside of the list item as the first child. The image would scale to a 80x80 pixel square image and positioned to the left of the list item text.

    Lets take a look at the example below to understand exactly how this is done.

    The above example is how Jquery Mobile displays thumbnails. But clients or the web designers never design what can be developed easily and so even I thought of having a variation for this example. How about adding responsive images as thumbnails? Images that will scale with the increase in width of a mobile device. I have set up a fiddle that we help us understand how this can be achieved. Let's take a look at the example that follows.

    Check out the CSS as it is the only thing that has been changed from the previous example. Overriding the JQM CSS helps in customizing your application to a great extent.

    Hope you have followed both the code samples. Drop a comment in case you need a solution to a problem you are struggling with. Also do mention if you are finding this series of examples helpful!