JQuery Mobile Picture for iPhone
I have done a little bit of work but cannot find what I am looking for. I am using the photoswipe plugin for jQuery mobile to scroll through my images, but I need them to display well on my page. I would like an iphone-like photo grid to like what happens when I click on photos on my iPhone and then those photos are linked to PhotoSwipe. Besides, it needs formatting like PhotoSwipe.
Is it purely css? If so, can anyone help me with the design? I am terrible with css. I have no mind for design. (I understand that, I'm just not very good).
Any ideas?
source to share
<div id="container">
<img src="..." />
</div>
CSS -
#container img {
float : left;
width : 30%;
height : auto;
}
This will put three images on each line and they will always just fill the screen (must be 10% of the left width for spacing).
Here's a demo: http://jsfiddle.net/sy764/
Update
I made a container a UL
and wrapped each image in an element LI
. Here's the CSS to render images about one third of the page width:
#container li {
float : left;
width : 30%;
height : auto;
padding : 3px;
}
#container li img {
width : 100%;
height : auto;
}
Here's a demo: http://jsfiddle.net/sy764/1/
source to share
Considering an example at http://www.photoswipe.com/latest/examples/04-jquery-mobile.html , set this in your list items:
.gallery li {
float: left;
width: 33.33333333%;
}
This sets the width if li
and all of its content.
source to share
I am late for this answer, but these are the exact css values that PhotoSwipe uses in the jQueryMobile example:
.gallery { list-style: none; padding: 0; margin: 0; }
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery li { float: left; width: 33.33333333%; }
.gallery li a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
.gallery li img { display: block; width: 100%; height: auto; }
#Gallery1 .ui-content, #Gallery2 .ui-content { overflow: hidden; }
source to share