Search jQuery

jQuery Forum

Screen name:
n2that

n2that's Profile

1 Posts

0 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

JQMobile + Photoswipe = Broken Theme
[2Replies]
- 04-Jul-2012 02:31 AM
- Forum: jQuery Mobile
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:

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

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:
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta name="viewport" content="initial-scale=1, maximum-scale=1">
6. <meta charset="utf-8">
7. <title>jQuery Mobile Web App</title>
8. <link href="jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
10. <link rel="stylesheet" href="themes/blacks.min.css" />
12. <link href="jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
14. <link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
15. <link href="jquery-mobile.css" type="text/css" rel="stylesheet" />
16. <link href="photoswipe.css" type="text/css" rel="stylesheet" />
18. <script src="jquery-1.6.4.min.js" type="text/javascript"></script>
20. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
22. <script src="jquery.mobile-1.0.min.js" type="text/javascript"></script>
24. <script type="text/javascript" src="lib/klass.min.js"></script>
25. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
27. <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
29. <script type="text/javascript" src="code.photoswipe.jquery-3.0.5.min.js"></script>
32. <script type="text/javascript">
34. /*
35. * IMPORTANT!!!
36. * REMEMBER TO ADD rel="external" to your anchor tags.
37. * If you don't this will mess with how jQuery Mobile works
38. */
40. (function(window, $, PhotoSwipe){
42. $(document).ready(function(){
44. $('div.gallery-page')
45. .live('pageshow', function(e){
47. var
48. currentPage = $(e.target),
49. options = {},
50. photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
52. return true;
54. })
56. .live('pagehide', function(e){
58. var
59. currentPage = $(e.target),
60. photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
62. if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
63. PhotoSwipe.detatch(photoSwipeInstance);
64. }
66. return true;
68. });
70. });
72. }(window, window.jQuery, window.Code.PhotoSwipe));
74. </script>
76. </head>
77. <body>
79. <div data-role="page" id="page">
80. <div data-role="header" data-theme="j">
81. <a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
82. <h1>531 Multimedia</h1>
83. </div>
84. <div data-role="content" data-theme="j">
86. <img src="images/25883_384618061198_507336198_4342991_4067903_n-300x176.jpg" width="100%" height="">
88. <div class="ui-grid-a">
89. <div class="ui-block-a"><a href="#about" data-role="button" data-transition="flip">About Us</a></div>
90. <div class="ui-block-b"><a href="#Gallery1" data-role="button">Samples</a></ul></div>
91. </div><br /<br />
93. <ul data-role="listview">
94. <li><a href="#page2" data-transition="flip">Page Two</a></li>
95. <li><a href="#page3" data-transition="flip">Page Three</a></li>
96. <li><a href="#page4" data-transition="flip">Page Four</a></li>
97. </ul>
98. </div>
99. <div data-role="footer" data-theme="i">
101. <div data-role="navbar" data-theme="a">
102. <ul>
103. <li><a href="http://www.facebook.com/531media">Facebook</a></li>
104. <li><a href="http://www.twitter.com/531media">Twitter</a></li>
105. <li><a href="#">Youtube</a></li>
106. </ul>
107. </div>
109. <h1>Powered by 531 Mobile</h1>
110. </div>
111. </div>
113. <div data-role="page" id="about" data-add-back-btn="true">
114. <div data-role="header" data-theme="j">
115. <a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
116. <h1>About Us</h1>
117. </div>
118. <div data-role="content" data-theme="j">
119. Content
120. </div>
121. <div data-role="footer" data-theme="j">
122. <h4>Page Footer</h4>
123. </div>
124. </div>
126. <div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">
128. <div data-role="header" data-theme="j">
129. <a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
130. <h1>samples</h1>
131. </div>
133. <div data-role="content" data-theme="j">
135. <h4>Business Cards</h4>
137. <ul class="gallery">
139. <li><a href="images/full/001.jpg" rel="external"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
140. <li><a href="images/full/002.jpg" rel="external"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li>
141. <li><a href="images/full/003.jpg" rel="external"><img src="images/thumb/003.jpg" alt="Image 003" /></a></li>
142. <li><a href="images/full/004.jpg" rel="external"><img src="images/thumb/004.jpg" alt="Image 004" /></a></li>
143. <li><a href="images/full/005.jpg" rel="external"><img src="images/thumb/005.jpg" alt="Image 005" /></a></li>
144. <li><a href="images/full/006.jpg" rel="external"><img src="images/thumb/006.jpg" alt="Image 006" /></a></li>
145. <li><a href="images/full/007.jpg" rel="external"><img src="images/thumb/007.jpg" alt="Image 007" /></a></li>
146. <li><a href="images/full/008.jpg" rel="external"><img src="images/thumb/008.jpg" alt="Image 008" /></a></li>
147. <li><a href="images/full/009.jpg" rel="external"><img src="images/thumb/009.jpg" alt="Image 009" /></a></li>
148. </ul>
152. <h4>Photo Editing</h4>
154. <ul class="gallery">
156. <li><a href="images/full/030.jpg" rel="external"><img src="images/thumb/030.jpg" alt="Image 030" /></a></li>
157. <li><a href="images/full/031.jpg" rel="external"><img src="images/thumb/031.jpg" alt="Image 031" /></a></li>
158. <li><a href="images/full/032.jpg" rel="external"><img src="images/thumb/032.jpg" alt="Image 032" /></a></li>
160. </ul>
162. <br />
163. More samples coming soon.
165. </div>
169. <div data-role="footer" data-theme="j">
171. </div>
173. </div>
176. <div data-role="page" id="page2" data-add-back-btn="true">
177. <div data-role="header" data-theme="j">
178. <a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
179. <h1>Page Two</h1>
180. </div>
181. <div data-role="content" data-theme="j">
182. Content
183. </div>
184. <div data-role="footer" data-theme="j">
185. <h4>Page Footer</h4>
186. </div>
187. </div>
189. <div data-role="page" id="page3" data-add-back-btn="true">
190. <div data-role="header" data-theme="j">
191. <a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
192. <h1>Page Three</h1>
193. </div>
194. <div data-role="content" data-theme="j">
195. Content
196. </div>
197. <div data-role="footer" data-theme="j">
198. <h4>Page Footer</h4>
199. </div>
200. </div>
202. <div data-role="page" id="page4" data-add-back-btn="true">
203. <div data-role="header" data-theme="j">
204. <a href="tel:xxxxxxxxxx" data-icon="grid" class="ui-btn-right">Call Us</a>
205. <h1>Page Four</h1>
206. </div>
207. <div data-role="content" data-theme="j">
208. Content
209. </div>
210. <div data-role="footer" data-theme="j">
211. <h4>Page Footer</h4>
212. </div>
213. </div>
215. </body>
216. </html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend