Search jQuery

jQuery Forum

JQMobile + Photoswipe = Broken Theme

in jQuery Mobile • 10 months ago

Hello all. I'm relatively new to JQMobile and I'm working on a mobile site for my business using JQMobile and Photoswipe with custom themes made with ThemeRoller. For the most part everything seems to be ok however, I'm having a problem with my buttons.

As you can see in the screenshot my buttons are bigger than they are suppose to be and my theme seems broken. Those black boxes should actually be gold just like the other buttons and the height of the actual buttons should be about the size of the black boxes.

Now when I delete the following line of code out of my site:

everything looks good but I loose the functionality of PhotoSwipe.

Any ideas what's wrong and how to fix it would be greatly appreciated! I'm including the actual code below for your review:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="themes/blacks.min.css" />
<link href="jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
<link href="jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="photoswipe.css" type="text/css" rel="stylesheet" />
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/klass.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="code.photoswipe.jquery-3.0.5.min.js"></script>
<script type="text/javascript">
/*
* IMPORTANT!!!
* REMEMBER TO ADD rel="external" to your anchor tags.
* If you don't this will mess with how jQuery Mobile works
*/
(function(window, $, PhotoSwipe){
$(document).ready(function(){
$('div.gallery-page')
.live('pageshow', function(e){
var
currentPage = $(e.target),
options = {},
photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
return true;
})
.live('pagehide', function(e){
var
currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="j">
<a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
<h1>531 Multimedia</h1>
</div>
<div data-role="content" data-theme="j">
<img src="images/25883_384618061198_507336198_4342991_4067903_n-300x176.jpg" width="100%" height="">
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#about" data-role="button" data-transition="flip">About Us</a></div>
<div class="ui-block-b"><a href="#Gallery1" data-role="button">Samples</a></ul></div>
</div><br /<br />
<ul data-role="listview">
<li><a href="#page2" data-transition="flip">Page Two</a></li>
<li><a href="#page3" data-transition="flip">Page Three</a></li>
<li><a href="#page4" data-transition="flip">Page Four</a></li>
</ul>
</div>
<div data-role="footer" data-theme="i">
<div data-role="navbar" data-theme="a">
<ul>
<li><a href="http://www.facebook.com/531media">Facebook</a></li>
<li><a href="http://www.twitter.com/531media">Twitter</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>
<h1>Powered by 531 Mobile</h1>
</div>
</div>
<div data-role="page" id="about" data-add-back-btn="true">
<div data-role="header" data-theme="j">
<a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
<h1>About Us</h1>
</div>
<div data-role="content" data-theme="j">
Content
</div>
<div data-role="footer" data-theme="j">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">
<div data-role="header" data-theme="j">
<a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
<h1>samples</h1>
</div>
<div data-role="content" data-theme="j">
<h4>Business Cards</h4>
<ul class="gallery">
<li><a href="images/full/001.jpg" rel="external"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
<li><a href="images/full/002.jpg" rel="external"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li>
<li><a href="images/full/003.jpg" rel="external"><img src="images/thumb/003.jpg" alt="Image 003" /></a></li>
<li><a href="images/full/004.jpg" rel="external"><img src="images/thumb/004.jpg" alt="Image 004" /></a></li>
<li><a href="images/full/005.jpg" rel="external"><img src="images/thumb/005.jpg" alt="Image 005" /></a></li>
<li><a href="images/full/006.jpg" rel="external"><img src="images/thumb/006.jpg" alt="Image 006" /></a></li>
<li><a href="images/full/007.jpg" rel="external"><img src="images/thumb/007.jpg" alt="Image 007" /></a></li>
<li><a href="images/full/008.jpg" rel="external"><img src="images/thumb/008.jpg" alt="Image 008" /></a></li>
<li><a href="images/full/009.jpg" rel="external"><img src="images/thumb/009.jpg" alt="Image 009" /></a></li>
</ul>
<h4>Photo Editing</h4>
<ul class="gallery">
<li><a href="images/full/030.jpg" rel="external"><img src="images/thumb/030.jpg" alt="Image 030" /></a></li>
<li><a href="images/full/031.jpg" rel="external"><img src="images/thumb/031.jpg" alt="Image 031" /></a></li>
<li><a href="images/full/032.jpg" rel="external"><img src="images/thumb/032.jpg" alt="Image 032" /></a></li>
</ul>
<br />
More samples coming soon.
</div>
<div data-role="footer" data-theme="j">
</div>
</div>
<div data-role="page" id="page2" data-add-back-btn="true">
<div data-role="header" data-theme="j">
<a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
<h1>Page Two</h1>
</div>
<div data-role="content" data-theme="j">
Content
</div>
<div data-role="footer" data-theme="j">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page3" data-add-back-btn="true">
<div data-role="header" data-theme="j">
<a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
<h1>Page Three</h1>
</div>
<div data-role="content" data-theme="j">
Content
</div>
<div data-role="footer" data-theme="j">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page4" data-add-back-btn="true">
<div data-role="header" data-theme="j">
<a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
<h1>Page Four</h1>
</div>
<div data-role="content" data-theme="j">
Content
</div>
<div data-role="footer" data-theme="j">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>

Replies(2)

jambajamba

Re: JQMobile + Photoswipe = Broken Theme

5 months ago

I have a quick question, which i think you may be able to help me with. I have created a mobile website using jtouchmobile which uses jquery. I have also used PhotoSwipe to create a html image gallery, but it has a different theme to the rest of my site.

I know how to use themeroller, but how do i get PhotoSwipe to use that instead of its own CSS files?

Thanks