CODEWITHSUNDEEP
htmlcssjquery-mobile
JoshDG
JoshDG

Reputation: 3931

jQuery Mobile iPhone-like Image Gallery

I've done a bit of searching but I can't find what I'm looking for. I'm using the photoswipe plugin for jquery mobile to scroll my images but I need to have them displayed nicely on my page to begin with. I'd like an iphone-like photo grid like what happens when I click on photos on my iPhone, and then those photos to link into the PhotoSwipe. Also, it needa to be formatted as a for PhotoSwipe.

Is that purely css? If so, could someone help me out with the styling? I'm terrible with css I don't have the mind for design like that. (I understand it, I'm just not good at it).

Any ideas?

Upvotes: 3

Views: 2838

Answers (3)

Andres SK
Andres SK

Reputation: 10974

I'm kind of late for this answer, but this is 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; }

Upvotes: 0

Jasper
Jasper

Reputation: 76003

<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-about fill the screen (there should be 10% of the width left-over for spacing).

Here is a demo: http://jsfiddle.net/sy764/

Update

I made the container a UL element and wrapped each image in a LI element. Here is the CSS to make the images display as approximately one third of the page's width:

#container li {
    float   : left;
    width   : 30%;
    height  : auto;
    padding : 3px;
}

#container li img {
    width  : 100%;
    height : auto;
}​

Here is a demo: http://jsfiddle.net/sy764/1/

Upvotes: 1

Ryan
Ryan

Reputation: 28207

Looking at the example at http://www.photoswipe.com/latest/examples/04-jquery-mobile.html, set this on your list elements:

.gallery li {
float: left;
width: 33.33333333%;
}

This sets the width if the li and all its contents.

Upvotes: 0

Related Questions