Photoswipe don't know to handle galleries of one or two images.
If it tries to run a single or 2 images galleries, Photoswipe breaks, displaying the carousel container, but don't show buttons and don't swipe to sides.
Anyone got any idea how to solve this?
I have corrected photoswipe's code, and created a pull request to photoswipe repository.
Solution is to fix wrong code inside the plugin
* Function: isLikeArray
*/
isLikeArray: function(obj) {
- return typeof obj.length === 'number';
+ try {
+ return typeof obj.length === 'number';
+ } catch (e) {
+ return false;
+ }
},
https://github.com/dimsemenov/PhotoSwipe/pull/640
Related
I got this piece of code for rendering and using Flipswitch as a custom control in lightswitch application.
function createBooleanSwitch(element, contentItem, trueText, falseText, optionalWidth) {
var $defaultWidth = '5.4em';
var $defaultFalseText = 'False';
var $defaultTrueText = 'False';
var $selectElement = $('<select data-role="slider"></select>').appendTo($(element));
if (falseText != null) {
$('<option value="false">' + falseText + '</option>').appendTo($selectElement);
}
else {
$('<option value="false">' + $defaultFalseText + '</option>').appendTo($selectElement);
}
if (trueText != null) {
$('<option value="true">' + trueText + '</option>').appendTo($selectElement);
}
else {
$('<option value="true">' + $defaultTrueText + '</option>').appendTo($selectElement);
}
// Now, after jQueryMobile has had a chance to process the
// new DOM addition, perform our own post-processing:
$(element).one('slideinit', function () {
var $flipSwitch = $('select', $(element));
// Set the initial value (using helper function below):
setFlipSwitchValue(contentItem.value);
// If the content item changes (perhaps due to another control being
// bound to the same content item, or if a change occurs programmatically),
// update the visual representation of the control:
contentItem.dataBind('value', setFlipSwitchValue);
// Conversely, whenver the user adjusts the flip-switch visually,
// update the underlying content item:
$flipSwitch.change(function () {
contentItem.value = ($flipSwitch.val() === 'true');
});
// To set the width of the slider to something different than the default,
// need to adjust the *generated* div that gets created right next to
// the original select element. DOM Explorer (F12 tools) is a big help here.
if (optionalWidth != null) {
$('.ui-slider-switch', $(element)).css('width', optionalWidth);
}
else {
$('.ui-slider-switch', $(element)).css('width', defaultWidth);
}
//===============================================================//
// Helper function to set the value of the flip-switch
// (used both during initialization, and for data-binding)
function setFlipSwitchValue(value) {
$flipSwitch.val((value) ? 'true' : 'false');
// Having updated the DOM value, refresh the visual representation as well
// (required for a slider control, as per jQueryMobile's documentation)
$flipSwitch.slider(); // Initializes the slider
$flipSwitch.slider('refresh');
// Because the flip switch has no concept of a "null" value
// (or anything other than true/false), ensure that the
// contentItem's value is in sync with the visual representation
contentItem.value = ($flipSwitch.val() === 'true');
}
});
}
This piece of code works fine. It renders the flipswitch on the screen. I am showing the data in an Edit screen, which is coming in a popup. Problem arises when I open that popup which contains the flipswitch and without changing any data on UI, I just try to close that popup screen. The IE hangs and it gives error saying that long script is running. When I debug the createBoolenaSwitch function, I came to know that it is going in infinite loop inside the function called setFlipSwitchValue(value){}
Why is this function getting called and this is going in an infinite loop?
I'm trying for some time to make events work, but they do not work, I'm trying to look for any reaction with alert or console.log but nothing to do, no reaction. I tried to change the selectors, same result. I also try to introduce them with $(document).ready or $("#mypage").("pagecreate", ...
Still trying with jsfiddle, it works perfectly but on my file from the browser, nothing.
I have only swipe that works.
Scrollstop and navigate does not work.
$('#neww').on("scrollstop", function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
recept2();
}
Looking for a way to dynamically add more lists to the bottom of jQuery Mobile listview
$("#mypanel").on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
$("#mypanel").panel("close");
console.log(direction);
}
});
how to control back button event in Jquery mobile?
Am using dataprovider object to show the list with 25 records at a time and instead of pagination, i want to show next page at end of scroll using the following code.
But is there any better way instead of window.location.href
if not, is there any option to show the loading message till the page loads.
$(document).ready(function()
{
$('#content').bind('scroll', function ()
{
totalDivHeight = eval($('#content')[0].scrollHeight) - eval($('#content').height());
scrollPosition =eval($('#content').scrollTop())+25;// + eval($('#content').height());
if (scrollPosition >= totalDivHeight)
{
nextPageID = eval("<?= $nextPageID; ?>");
prevPageID = eval("<?= $prevPageID; ?>");
totalPages = eval("<?= $totalPages; ?>");
if (nextPageID < totalPages)
window.location.href='<?php echo $url;?>'+'&Store_page='+nextPageID;
}
});
});
Edit: i tried ajax function instead of window.location.href but i dont know how to send the pagenumber variable to the provider?
You are probably looking to lazy load content and attach to the end of the table and you do that via ajax.
You should not reinvent the wheel others already have done this, just one of the implementations is here:
http://dcarrith.github.com/jquery.mobile.lazyloader/
I've just recently been studying JQuery to use on a personal website. Something I wanted to add to the website was a blog preview feature, which uses AJAX and JSON to retrieve the title and preview text of a blog post. When a visitor clicks the blog tab, JQuery retrieves the information and is displaying the titles the way I want it to. The titles are supposed to be clickable, so that when you click a title the preview text is shown. For the most part I have this working by using JQuery's .on() function, however for whatever reason only every other title is clickable. Here is the code:
$(document).ready(function() {
function handleSelect(event, tab) {
if (tab.index == 1) {
$("#blogContent").empty();
$.getJSON("/TimWeb/blogPreview", function(data) {
$.each(data, function(i) {
$("#blogContent").append("<h3 class=head>" +
data[i].blogTitle + "</h3>" +
"<p>" + data[i].blogBody + "</p>");
$("#blogContent .head").on("click", function() {
$(this).next().toggle();
}).next().hide();
});
});
}
}
var tabOpts = {
select:handleSelect
};
$(".tabs").tabs(tabOpts);
});
For a more visual description of the problem, if I have eight blog posts that are being previewed, the title for each will be rendered appropriately, with the content hidden. If I try clicking the first, third, fifth, or seventh title, nothing happens. If I click the second, fourth, sixth, or eighth titles, the post preview will appear. If I click it again, it will be hidden, as I expect it to be.
In case it causes any confusion, blogContent is the id of the div referenced by the jQuery tab for the blog section. I would greatly appreciate any advice or wisdom you could lend me!
You don't need to attach the event to each individual h3.
.on() can be used to attach a function to an event for everything, both now and in the future, that match a selector (jQuery 1.7+).
Try taking the .on() out of the each loop (and the function), hide the p tag via style="display:none;" and place this after the function:
$(document).on("click", "#blogContent .head", function(){ $(this).next().toggle(); });
Something like this:
function handleSelect(event, tab) {
if (tab.index == 1) {
$("#blogContent").empty();
$.getJSON("/TimWeb/blogPreview", function(data) {
$.each(data, function(i) {
$("#blogContent").append("<h3 class=head>" +
data[i].blogTitle + "</h3>" +
"<p style='display:none;'>" + data[i].blogBody + "</p>");
});
});
}
}
// This only needs to be executed once.
$(document).on("click", "#blogContent .head", function(){ $(this).next().toggle(); });
I would suggest moving your on statement outside of the each statement. Per jQuery:
If new HTML is being injected into the page, select the elements and
attach event handlers after the new HTML is placed into the page. Or,
use delegated events to attach an event handler, as described next.
http://api.jquery.com/on/
So something like this:
function handleSelect(event, tab) {
if (tab.index == 1) {
$("#blogContent").empty();
$.getJSON("/TimWeb/blogPreview", function(data) {
$.each(data, function(i) {
$("#blogContent").append("<h3 class=head>" +
data[i].blogTitle + "</h3>" +
"<p>" + data[i].blogBody + "</p>");
$("#blogContent .head").next().hide();
});
$("#blogContent .head").on("click", function() {
$(this).next().toggle();
});
});
}
}
If this is something that happens multiple times you would be better served using the delegated approach outlined by Jay and setting the event on they body outside of all functions (excepting document.ready).
I have 2 sortable, connected lists with pics: Album and Favorites.
When I drag and item from Album -> Favorites I want to check if it's already in the Favorites list.
If it is, do NOT accept it (maybe disable sorting or something?)
If it is not, clone the item back to the original index in Albums (connected sortable lists do only move items, so this mimics copying)
I have a function that checks if the pics are in the Favorites list:
function isInFavorites(url) {
return $(".favorites li img[src*='" + url + "']").length > 0;
}
This function works like expected...
However when I extract the scr attr with ui.item and pass the argument to this function I always get a true boolean??
var itemSrc = ui.item.find("img").attr("src");
if (isInFavorites(itemSrc)) { alert('item allready in favorites, do not accept'); }
else { alert('OK, now clone back to album'); }
I have been banging my head way to long on this and would appreciate some help!
A JS Fiddle can be found here: http://jsfiddle.net/tunafish/CTps3/
Cheers!
Not sure if this is the best way to process the logic but the order the events are firing is the source of your problem
function isInFavorites(url) {
return $(".favorites li img[src*='" + url + "']").length > 0;
}
This event runs AFTER the item has been moved. if it is a duplicate you will have length 2, but you will always have length 1 because you just moved the item into the lower list.
quick fix is to test for $(".favorites li img[src*='" + url + "']").length > 1