Menu
I'm currently trying to build a mobile image gallery using PhotoSwipe. I've been able to get it working but there's one small problem. When I click on a photo thumbnail, the actual photo always takes up the entire viewport. This is OK when you're viewing the gallery on a mobile device. But if your viewport is a computer screen and the image isn't a high-res one, the photo can be very blurry. I'd rather limit the photo to a width of maybe 300 to 400 pixels when viewed on a computer. Is there a way to do this in PhotoSwipe? I read the documentation but couldn't quite figure it out. I've enclosed my code below.
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoSwipe - jQuery Mobile Version</title>
<link rel="stylesheet" href="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="lib/photoswipe/photoswipe.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<style type="text/css">
div.gallery-row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.gallery-item {
float: left;
width: 33.333333%;
}
div.gallery-item a {
display: block;
margin: 5px;
border: 1px solid #3c3c3c;
}
div.gallery-item img {
display: block;
width: 100%;
height: auto;
}
#Gallery1 .ui-content, #Gallery2 .ui-content {
overflow: hidden;
}
</style>
<script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="lib/jquery.animate-enhanced.min.js"></script>
<script type="text/javascript" src="lib/photoswipe/code-photoswipe-jQuery-1.0.11.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.gallery-page').live('pageshow', function(e) {
// Re-initialize with photos for the current page
$('div.gallery a', e.target).photoSwipe();
return true;
});
});
</script>
</head>
<body>
<div data-role="page" id="Home">
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li><a href="#Gallery1">First Gallery</a></li>
<li><a href="#Gallery2">Second Gallery</a></li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
<div data-role="page" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<div class="gallery">
<div class="gallery-row">
<div class="gallery-item"><a href="images/01.jpg" rel="external"><img src="images/01-thumb.jpg" alt="Image 1" /></a></div>
<div class="gallery-item"><a href="images/02.jpg" rel="external"><img src="images/02-thumb.jpg" alt="Image 2" /></a></div>
<div class="gallery-item"><a href="images/03.jpg" rel="external"><img src="images/03-thumb.jpg" alt="Image 3" /></a></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><a href="images/04.jpg" rel="external"><img src="images/04-thumb.jpg" alt="Image 4" /></a></div>
<div class="gallery-item"><a href="images/05.jpg" rel="external"><img src="images/05-thumb.jpg" alt="Image 5" /></a></div>
<div class="gallery-item"><a href="images/06.jpg" rel="external"><img src="images/06-thumb.jpg" alt="Image 6" /></a></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><a href="images/07.jpg" rel="external"><img src="images/07-thumb.jpg" alt="Image 7" /></a></div>
<div class="gallery-item"><a href="images/08.jpg" rel="external"><img src="images/08-thumb.jpg" alt="Image 8" /></a></div>
<div class="gallery-item"><a href="images/09.jpg" rel="external"><img src="images/09-thumb.jpg" alt="Image 9" /></a></div>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
</body>
</html>
616
PhotoSwipe has a modal option:
var options = {
modal: false
}
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
which makes the PhotoSwipe container take only the size of its parent when set to false.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
