CODEWITHSUNDEEP
javascriptjquerycssjquery-mobile
marcel
marcel

Reputation: 3272

jQuery Mobile thumbnail image alignment

I already read the other questions about that topic, but they've never really been solved.

I need to set the thumbnail of a listview centred. Those Thumbnails have a maximal heigt, but some of my Icons are smaller than the maximal height. Setting a fixed padding to the thumbnail doesn't work for different thumbnail sizes.

Small Icon:

enter image description here

Larger Icon:

enter image description here

My list-items:

<%
boxFolder.each(function(box){
name = box.get("name");
fullPath = box.get("fullPath");
type = box.get("type");
%>
<li data-theme="c">
    <%if(type == "dir"){ %>
        <a data-transition="slide" class="folderSelectedButton" id=<%=fullPath%>>
            <img src="images/FolderDark.png">
            <h3><%=name%></h3>
            <p>Folder</p>
        </a>
    <%}else if(type == "jpg"){%>
        <a data-transition="slide" id=<%=fullPath%>>
            <img src=<%=fullPath%>>
            <h3><%=name%></h3>
            <p>Picture</p>
        </a>
    <%}else{%>
        <a data-transition="slide" id=<%=fullPath%>>
            <img src="images/FolderDark.png">
            <h3><%=name%></h3>
            <p>Unknown</p>
        </a>
    <%}%>

</li>
<%
})
%>

Edit: The result now looks:

enter image description here enter image description here

I added this to ezankers solution:

.imgListThumb {
   max-width: 80px;
   max-heigth: 80px;
}

<img class="imgListThumb" src=<%=fullPath%>>

Upvotes: 0

Views: 1254

Answers (1)

ezanker
ezanker

Reputation: 24738

You can do this with a little CSS and absolute positioning. Here is a DEMO FIDDLE

In the list markup, I have placed the image inside a container DIV with class thumbContainer:

<ul data-role="listview" data-inset="true" class="has-odd-thumb">
  <li>
    <a href="#"></a>
    <div class="thumbContainer">
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRwORNdHugDJUxgJtt93q_SBwQWDv-0Fd2-0BdjR9GMcUHeY6TjUg"
      alt="Image" />
    </div>
    <h2>Twitter</h2>
    <p>48x48 twitter icon</p>
  </li>
  <li>
    <a href="#"></a>
    <div class="thumbContainer">
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQOKCKGeC_BlmlgKLzfn8iHBVmAIi-X8mdKO7BuYrtkRDfqwO22jg"
      alt="Image" />
    </div>
    <h2>Facebook</h2>
    <p>24x24 facebook icon</p>
  </li>
  <li>
    <a href="#"></a>
    <div class="thumbContainer">
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSVPHOXJ_tD2Q5A55B92WZAvacsgvJOwePHh2qJvzkMZDRff3Oe"
      alt="Image" />
    </div>
    <h2>iTunes</h2>
    <p>64x64 iTunes icon</p>
  </li>
</ul>

The CSS adds a left-margin to the LI text leaving room for the thumbnail. The container is then absolutely placed on the left with a width equal to the margin. Finally the image is centered.

.has-odd-thumb .ui-link-inherit {
    margin-left: 90px !important;
}
.thumbContainer {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 90px;
}
.thumbContainer img {
    bottom: 0; left: 0;top: 0; right: 0;
    margin: auto;
    position: absolute;
}

You can adjust the margin/width to make it work well with your image sizes...

Upvotes: 3

Related Questions