I would like to open the Photoswipe gallery with jQuery Mobile directly in full screen instead the default <ul> <li> list. I saw the example page on the
package downloaded from the plugin site (08-exclusive-mode.html) but I can't get it to work on my site.
I tryed this javascript code:
$(document).on('pageshow','#photo', function() {
(function(window, PhotoSwipe) {
document.addEventListener('DOMContentLoaded', function() {
var options = {
preventHide: true },
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
instance.show(0);
}, false);
} (window, window.Code.PhotoSwipe));
});
this is html page:
<div data-role="page" id="photo">
<div data-role="header">
<h1>Second</h1>
</div><!-- /header -->
<div data-role="content">
<ul id="Gallery" class="gallery">
<li><img src="/ico.jpg" alt="Image 001" /></li>
<li><img src="/ico.jpg" alt="Image 002" /></li>
<li><img src="/ico.jpg" alt="Image 003" /></li>
<li><img src="/ico.jpg" alt="Image 004" /></li>
<li><img src="/ico.jpg" alt="Image 005" /></li>
<li><img src="/ico.jpg" alt="Image 006" /></li>
<li><img src="/ico.jpg" alt="Image 007" /></li>
<li><img src="/ico.jpg" alt="Image 008" /></li>
<li><img src="/ico.jpg" alt="Image 009" /></li>
<li><img src="/ico.jpg" alt="Image 010" /></li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div>
Can you help me?
Working example: http://jsfiddle.net/Gajotres/PFqVs/
Javascript:
This is more then enough to run Photoswipe with jQuery Mobile 1.3.1.
$(document).on('pagebeforeshow', '#index', function(){
var myPhotoSwipe = $(".gallery li a").photoSwipe({
jQueryMobile: true,
loop: false,
enableMouseWheel: false,
enableKeyboard: false
});
myPhotoSwipe.show(0);
});
if you dont know the item's key, you can loop "instance.originalImages" and search a keyword in image's path.
for(var i=0; i<instance.originalImages.length; i++){
if(instance.originalImages[i].pathname.search(keyword)!= -1){
instance.show(i);
}
}
Related
I have a JQuery Mobile popup (an unordered list) embedded in a description list:
<dl data-role="listview" data-inset="true" data-theme="d" id="sortable">
<dt class="ui-bar ui-bar-b ui-corner-all">Group One</dt>
<dd class="ui-bar ui-bar-a ui-corner-all ui-btn-icon-left ui-icon-bars">
<div class="divMain">
<div class="divQuestion">
<textarea name="strQuestion-q1" id="strQuestion-q1" placeholder="Enter Question Number 1" style="margin:0px;"></textarea>
</div>
<div class="divCategory">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMenu-q1" data-rel="popup" data-transition="slideup">Select Category</a>
<div id="popupMenu-q1" data-role="popup" data-theme="b">
<ul style="min-width: 210px;" data-role="listview" data-inset="true">
<li data-role="list-divider">Choose the scoring category</li>
<li><a name="strCategory-o1-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 1</a></li>
<li><a name="strCategory-o2-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 2</a></li>
<li><a name="strCategory-o3-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 3</a></li>
</ul>
</div>
</div>
</div>
</dd>
</dl>
I want the function selectCategory() to get the text of the parent dt (in this case "Group One"). I've tried both of the following with no success:
$('#strCategory-o1-q1').parent().prev('dt').text();
$('#strCategory-o1-q1').closest('dd').prev('dt').text();
Any suggestions?
The problem is that when jQM initializes the popup, it moves it from the current DOM position into a popup container at the top level. So the DD is no longer its ancestor.
One thing you could do is add a click handler to the button that launches the popup and get the text there. Then you could put the text in a global variable or a data-attribute within the popup.
Given this markup:
<a id="btnPopup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMenu-q1" data-rel="popup" data-transition="slideup">Select Category</a>
<div id="popupMenu-q1" data-role="popup" data-theme="b">
<ul style="min-width: 210px;" data-role="listview" data-inset="true">
<li data-role="list-divider">Choose the scoring category</li>
<li><a name="strCategory-o1-q1" href="#">Category 1</a></li>
<li><a name="strCategory-o2-q1" href="#">Category 2</a></li>
<li><a name="strCategory-o3-q1" href="#">Category 3</a></li>
</ul>
</div>
Your script would be along the lines of
var curDDText;
$("#btnPopup").on("click", function(){
curDDText = $(this).closest('dd').prev('dt').text();
});
$("#popupMenu-q1 ul li a").on("click", function(e){
selectCategory(this);
});
function selectCategory(elem){
alert($(elem).prop("name") + " - " + curDDText);
$("#popupMenu-q1").popup( "close" );
}
working DEMO
If you prefer the data-attribute route:
$("#btnPopup").on("click", function(){
var curDDText = $(this).closest('dd').prev('dt').text();
$("#popupMenu-q1 ul").jqmData("dttext", curDDText);
});
function selectCategory(elem){
var curDDText = $(elem).closest("ul").jqmData("dttext");
alert($(elem).prop("name") + " - " + curDDText);
$("#popupMenu-q1").popup( "close" );
}
data-attribute DEMO
i am newly working for jquery mobile panels, i have tried the reference of this jsfiddle link here http://jsfiddle.net/Gajotres/vds2U/47/ , i just added jquery ajax call to parse xml data. My problem is after searching city and keyword in page1, ajax call shows success alert but not trigger to page2. I want to display data in page2. If i click on page2 in jquery panel it appends the searched data. What wrongs here If any changes need to do please help me. My code is like below:
html code:
<div data-role="panel" data-display="push" data-theme="b" id="nav-panel" data-position="left">
<h2> All Pages </h2>
<ul data-role="listview" data-icon="false">
<li data-icon="delete">Close menu</li>
<li>Main panel page</li>
<li>page 1 page</li>
<li>page 2 Page</li>
</ul>
</div>
<div data-role="page" id="panel-main" data-title="Panel main" data-theme="a" >
<div data-role="header" data-position="fixed">
<h1 id="header1">main panel</h1>
Menu
</div>
<div role="main" class="ui-content"">
<p id="para1">main panel</p>
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>page 1</h1>
Menu
</div>
<div data-role="main" class="ui-content">
<div class="text"><input type="text" id="p1" name="p1" placeholder="Location...." class="user-text1 textboxes" data-clear-btn="true" data-mini="true" />
</div>
<div class="height"></div>
<div class="text"><input type="text" id="p2" name="p2" placeholder="Term...." class="user-text2 textboxes" data-clear-btn="true" /></div>
<div class="height"></div>
<button type="submit" id="searchBtn" data-theme="f" data-corners="false"/>Search Events</button>
</div>
</div>
<div data-role="page" id="page2" data-theme="a" >
<div data-role="header" data-position="fixed">
<h1>page 2</h1>
Menu
</div>
<div data-role="main" class="ui-content">
<ul id="list" data-role="listview" data-icon="false" data-autodividers="true" data-theme="c"></ul>
</div>
</div>
<script>
$(function () {
$("[data-role=panel]").enhanceWithin().panel();
});
javascript code:
$(document).ready(function(){
$("#searchBtn").bind("click",function(){
// alert('success');
$.mobile.loading('show');
var p1=$("#p1").val();
var p2=$("#p2").val();
$.ajax({
type: 'GET',
url:"http://api2.yp.com/listings/v1/search?searchloc="+p1+"&term="+p2+&format=xml&key=5cbqjx3cdl",
dataType: "xml",
success: function(data){
//alert('success');
$(data).find("searchListing").each(function(){
var name=$(this).find("businessName").text();
var id=$(this).find("listingId").text();
window.location.href="#page2";
//$.mobile.changePage("#page2");
$.mobile.loading('hide');
$("#list").append('<li>name:'+ name +'</li>');
$("#list:visible").listview("refresh");
});//ajax ends
});
});
Use the jQM pagecreate instead of $(document).ready, then in the success function, append the new items to the list, navigate to page2 using pagecontainer("change"), then refresh the list:
$(document).on("pagecreate", "#page1", function(){
$("#searchBtn").on("click" ,function(){
// your AJAX code
success: function(data){
//alert('success');
$(data).find("searchListing").each(function(){
var name=$(this).find("businessName").text();
var id=$(this).find("listingId").text();
$.mobile.loading('hide');
$("#list").append('<li>name:'+ name +'</li>');
$("body").pagecontainer( "change", "#page2", {} );
$("#list").listview("refresh");
});
});
});
Simplified DEMO
I have left the AJAX out of the demo. I am just appending 3 items and then changing page.
Trying to set the background color of my dynamic li. li is not given 'class' or 'id' since each li needs to have an assigned color in code.
$(data).find("#HospitalDescriptions").find('th').filter(function(){
if (this.innerHTML !== '') {
var bgcolor = $( this ).css( "background-color" );
var txtcolor = $( this ).css( "color" );
if (bgcolor !== ''){
$('#information').append('<li><span style="background-color:' + bgcolor + ';color:' + txtcolor + ';">' + this.innerHTML + '</span></li>');
$('li').css({backgroundColor: bgcolor});
} else {
$('#information').append('<li>' + this.innerHTML + '</li>');
}
}
$('#information').listview('refresh'); // not working!
});
HTML:
<div data-role="page" data-theme="b" id="hospitals" data-add-back-btn="true">
<div data-role="header">
<h1>HOSP-HEADER</h1>
<a class="ui-btn-right" id="infoButton" onclick="$('#locations').listview('refresh');">Refresh</a>
</div><!-- /header -->
<div data-role="content" data-theme="b" id="regions">
<div data-role="content">
<h4>Information</h4>
<ul data-role="listview" data-inset="true" id="information">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Regions I, II, III</h4>
<ul data-role="listview" data-inset="true" id="region3">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Region IV</h4>
<ul data-role="listview" data-inset="true" id="region4">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Region V</h4>
<ul data-role="listview" data-inset="true" id="region5">
<!-- AJAX CONTENT -->
</ul>
</div>
</div>
<div data-role="footer">
<h1>Powered by CM</h1>
</div><!-- /footer -->
</div>
Results I'm getting now. text background color needs to fill the list view area not black:
1
▲
text-align: center; to li as well. Even simpler. – Omar yesterday
I am trying to add a home button to the right of my header. I am also hiding a toolbar behind the header. Now when adding a home button to the header, its wont stay fixed on the header when toggling.
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Settings
</li>
<li>Whatever
</li>
</ul>
</div>
<!-- /navbar -->
<h1>Hide the Toolbar</h1>
<a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
data-direction="reverse" onclick="empty()" data-transition="slide"
data-iconpos="notext" class="ui-btn-right">home</a>
</div>
<!-- /header -->
$(document).bind('pageinit', function (event) {
loadHomePage();
$("#HomeHeader").on("click", function () {
$("#navMainToolbar").slideToggle(200);
});
$("#navMainToolbar").on("click", function (e) {
e.stopPropagation();
});
});
Here is a demo of the issue.
You need to move the navbar outside of the header:
<div data-role="page">
<div data-role="navbar">
<ul>
<li>Settings
</li>
<li>Whatever
</li>
</ul>
</div>
<!-- /navbar -->
<div data-role="header">
<h1>Hide the Toolbar</h1>
<a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
data-direction="reverse" onclick="empty()" data-transition="slide" data-iconpos="notext"
class="ui-btn-right">home</a>
</div>
<!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page -->
Example:
http://jsfiddle.net/DMUwp/11/
I'm using jQuery mobile RC2. I need to change page from one page to another page without tracking it in history.
I'm using $.mobile.changePage("#searchPage", "pop", false, false);
For Example:
Actual : /DefaultSP.aspx#searchPage
Expected : /DefaultSP.aspx(need to
remove #searchPage in URL)
Thanks in advance.
I'm not sure if they changed the markup on how to use this but here are the Docs:
http://jquerymobile.com/demos/1.0rc2/docs/api/methods.html
JS
//transition to the "confirm" page with a "pop" transition without tracking it in history
$.mobile.changePage( "../alerts/confirm.html", {
transition: "pop",
reverse: false,
changeHash: false
});
Example:
http://jsfiddle.net/MGdm2/10/
JS
$('#customNav').click(function() {
//transition to the "confirm" page with a "pop" transition without tracking it in history
$.mobile.changePage( "#page2", {
transition: "pop",
reverse: false,
changeHash: false
});
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Home Page</li>
<li><a id="customNav">Page 2 (Click here)</a></li>
</ul>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="e">
<li data-role="list-divider">Page 2 will not be history</li>
<li>Home Page</li>
<li>Page 3 (Click here)</li>
</ul>
</div>
</div>
<div data-role="page" id="page3" data-add-back-btn="true">
<div data-role="header" data-rel="back">
<h1>clicking the back button should go to home page</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Page 3 (Click the back button in the header)</li>
<li>Home Page</li>
</ul>
</div>
</div>
so, what's wrong to do
document.location.href = document.location.pathname;