Multiple Photoswipe galleries Mobile - jquery-mobile

I have multiple PhotoSwipe galleries from a list for a portfolio which work perfectly on a Desktop, but only the 1st Gallery shows its images on mobile devices, and the subsequent galleries do not. The PhotoSwipe instance instantiates and I can navigate using the arrows etc, but no images.. any ideas? (I have tried using rel="external" to no avail)
The photoswipe code:
function startSwipe(btnId)
{
var galleryName = btnId;
(function(window, PhotoSwipe)
{
var
options = {
preventHide: false,
loop: false,
captionAndToolbarShowEmptyCaptions: false,
getImageSource: function(obj){
return obj.url;
},
getImageCaption: function(obj){
return obj.caption;
}
},
instance = PhotoSwipe.attach(
[
{ url: 'http://www.example.com/gallery/'+galleryName+'/images/0.jpg'},
{ url: 'http://www.example.com/gallery/'+galleryName+'/images/1.jpg'},
{ url: 'http://www.example.com/gallery/'+galleryName+'/images/2.jpg'},
],
options
);
instance.show(0);
}(window, window.Code.PhotoSwipe));
}
and the jqm:
<div data-role="content">
<ul data-role="listview" data-theme="a" class="centerLiPort">
<li id="gal1" onClick="startSwipe(this.id)">
<div class="imgDiv"><img src="images/gal1.jpg" ></img></div>
<a>Gallery 1</a>
</li>
<li id="gal2" onClick="startSwipe(this.id)">
<div class="imgDiv"><img src="images/gal2.jpg" ></img></div>
<a>Gallery 2</a>
</li>
<li id="gal3" onClick="startSwipe(this.id)">
<div class="imgDiv" ><img src="images/gal3.jpg" ></img></div>
<a>Gallery 3</a>
</li>
</ul>
</div><!--/content-->

Well I couldn't solve this, the only work around I found was to duplicate the image galleries into the subdomain directories which really stinks, but it works. The error lies somehow in how IOS handles image linking - as it works perfectly fine on a desktop and other mobile devices.

Related

Owl Carousel broken inside tab panel

I have an Owl Carousel inside a tabpanel like this:
<div role="tabpanel" class="tab-pane fade" id="tabAcessorios">
<div id="acessoriosCompativeis8x" class="featured-carousel brand-dot">
//itens here
</div>
</div>
When i click the link to display the tab, the carousel is broken:
I tried to trigger the refresh like this:
$("#acessoriosCompativeis8x").trigger("refresh.owl.carousel");
But it didn't work. What am i missing here?
Here's the nav definition:
<ul class="nav nav-tabs nav-stacked" role="tablist">
<li role="presentation" class="active">FOCO/PRÉ-PAGO</li>
<li role="presentation">INDIVIDUAL</li>
<li role="presentation">FAMÍLIA</li>
<li role="presentation">CONTROLE</li>
#if (Model.AcessoriosCompativeis != null)
{
<li role="presentation">Acessórios Compatíveis</li>
}
</ul>
And here's the carousel definition:
$('#acessoriosCompativeis8x').owlCarousel({
items: 2,
lazyLoad: true,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 5000
});
I managed to solve the issue by destroying and re-creating the carousel when the panel appears:
$('#linkAcessorios').on('shown.bs.tab', function (e) {
var owl = $('#owl-example').owlCarousel(opcoes);
owl.trigger('destroy.owl.carousel');
owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
owl.owlCarousel(options);
});

Combinate JQuery UI sortable and draggable with Bootstrap Tab navigation

I try build page based on Bootstrap with JQuery UI sortable list.
I have one list in global space and two lists in Tabs
and I like to drag items from external list and drop it to tab navigation for adding into list
However when I switch to bootstrap tab navigation the external item on drop disappear but doesn't appear in tab list
this is my example based on JQ UI "Connect list with Tab"
This is my JS FIDDLE
$(function() {
$( "#sortable0, #sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" );//.tabs();
$('#myTab a:last').tab('show');
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "option", "active", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});
});
HTML
<div id="external-tab">
<ul id="sortable0" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">ExItem 1</li>
<li class="ui-state-default">ExItem 2</li>
<li class="ui-state-default">ExItem 3</li>
</ul>
</div>
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
</ul>
<div class="tab-content">
<div id="tabs-1" class="tab-pane">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
</ul>
</div>
<div id="tabs-2" class="tab-pane">
<ul id="sortable2" class="connectedSortable ui-helper-reset">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
</ul>
</div>
</div>
</div>
It's a shame nobody else got to your question in the past year... I'm guessing this is no longer relevant for you personally, but maybe we can help to resolve this issue for any other user searching on Google for solutions to include jQuery UI's API for Draggable/Droppable items, integrated with Bootstrap's tabbed component.
If I'm reading your question correctly, you'd like to be able to drag items from the external list into either of the two tabs. If your problem is similar to the one I'm personally tackling at the moment, you might also want to drag items from tab one into tab two, and vice-versa. I've updated your fiddle with a solution that accommodates both of these needs. The lists are also sortable, as they were previously, and the classes of items dragged from one space to the other are retained as well.
Items I might consider adding in the future are:
The ability to drag not only onto the tab, but also the space below it
Adding all attributes from the parent element dragged, not just the class list
However, for the moment, all I've done is to rectify the solution you posted.
The updated fiddle is here: http://jsfiddle.net/cr8s/96dsB/30/
Also, since the Internet is a fickle place and things disappear all the time, here's the updated JS (I left your HTML unchanged, and that's already in the question above):
$(function() {
$('.tab-pane > ul').sortable().disableSelection();
var
$tabs = $('#tabs'),
$tabItems = $('#myTab > li', $tabs);
$('#myTab a:last').tab('show');
$tabItems.droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var
$item = $(this),
href = $item.children('a').attr('href'),
$list = $(href).find('.connectedSortable');
console.log($list);
$list.append($('<li />').html(ui.draggable.html()).attr('class', ui.draggable.attr('class')));
$list.closest('.tab-pane').addClass('active').siblings().removeClass('active');
$item.addClass('active').siblings().removeClass('active');
}// drop(event, ui)
});// $tabItems.droppable()
$('#external-tab > ul > li').draggable({
appendTo: 'body',
helper: 'clone'
});
});// end of doc ready
Hope that solves this problem for some folks! It certainly gets me closer to solving my own use case, and I'll likely continue to update the fiddle linked above as I add additional features like the two I mentioned earlier.

Cannot get jqueryui tabs to work properly in Ember view

I'm trying to run up a little prototype in Ember.JS at the moment with a view to completely re-writing the UI of a web application as an Ember Application running against a WebAPI, but although I've managed to get Ember running OK, I cannot get jqueryui to initialise the tabs correctly.
It seems to work fine if within the view I put static data for tabs to be created from, but if I'm using dynamic data then it just doesn't work.
I have an Ember view template
<script type="text/x-handlebars" id="index">
<div id="tabs" class="ui-tabs">
<ul>
{{#each model}}
<li>
<span class="ui-icon ui-icon-person"></span>
<a {{bindAttr href="route"}} {{bindAttr title="tabTitle"}}><span>{{title}}</span></a>
</li>
{{/each}}
</ul>
{{#each model}}
<div {{bindAttr id="tabTitle"}}>
<p>
Retrieving Data - {{title}}
</p>
</div>
{{/each}}
</div>
</script>
and a view
App.IndexView = Ember.View.extend({
templateName: 'index',
didInsertElement: function () {
var tabs = $("#tabs").tabs();
}
});
and a model
App.Section = DS.Model.extend({
name: DS.attr('string'),
title: DS.attr('string'),
tabTitle: function () {
return 'tab-' + this.get('name');
}.property("name"),
route: function () {
return '#' + this.get('tabTitle');
}.property("tabTitle")
});
App.Section.FIXTURES = [
{
id: 1,
name: 'home',
title: 'Home'
},
{
id: 2,
name: 'users',
title: 'Users'
}
];
It appears to generate the HTML correctly (from checking in Firebug), but this does not work, where as if I replace the template with
<script type="text/x-handlebars" id="index">
<div id="tabs" class="ui-tabs">
<ul>
<li>
<span class="ui-icon ui-icon-person"></span>
<span>Home</span>
</li>
<li>
<span class="ui-icon ui-icon-person"></span>
<span>Users</span>
</li>
</ul>
<div id="tab-home">
<p>
Retrieving Data - Home
</p>
</div>
<div id="tab-users">
<p>
Retrieving Data - Users
</p>
</div>
</div>
</script>
it works perfectly.
I'm assuming that it's something to do with the DOM not being completely rendered by the time the tabs are initialised, but everything I can find says that didInsertElement is the place to do it, and I have had time to dig deeper yet.
I'd be grateful for any ideas.
Edit: I've managed to make this work in a fashion by doing the following:
App.IndexView = Ember.View.extend({
templateName: 'index',
didInsertElement: function () {
Ember.run.next(this, function () {
if (this.$('#tab-users').length > 0) {
var tabs = $('#tabs').tabs();
} else {
Ember.run.next(this.didInsertElement);
}
});
},
});
The problem with this is that 1) it requires me to know what one of the last elements that will be written to the view is called (and obviously with dynamic data I won't necessarily know that), so that I can keep checking for it, and 2) the inefficiency of this technique makes me want to scream!
In addition, we get a good old FoUC (Flash of Unstyled Content) after things have been rendered, but before we then get JQueryUI to style them correctly.
Any suggestions gratefully received.
It's still not nice... but this at least does work, and is reasonably efficient...
From Ember.js - Using a Handlebars helper to detect that a subview has rendered I discovered how to write a trigger, and because of the way that the run loop seems to work, inserting the trigger in the last loop on the page causes it to be called n times, but only after the loop is complete, so a quick state check "hasBeenTriggered" ensures that you only execute the delgate function once.
My code now looks like this:
<script type="text/x-handlebars" id="index">
<div id="tabs" class="ui-tabs">
<ul>
{{#each model}}
<li>
<span class="ui-icon ui-icon-person"></span>
<a {{bindAttr href="route"}} {{bindAttr title="tabTitle"}}><span>{{title}}</span></a>
</li>
{{/each}}
</ul>
{{#each model}}
<div {{bindAttr id="tabTitle"}}>
<p>
Retrieving Data - {{title}}
</p>
</div>
{{trigger "triggered"}}
{{/each}}
</div>
</script>
with the trigger
Ember.Handlebars.registerHelper('trigger', function (evtName, options) {
options = arguments[arguments.length - 1];
var hash = options.hash,
view = options.data.view,
target;
view = view.get('concreteView');
if (hash.target) {
target = Ember.Handlebars.get(this, hash.target, options);
} else {
target = view;
}
Ember.run.next(function () {
target.trigger(evtName);
});
});
and view
App.IndexView = Ember.View.extend({
templateName: 'index',
hasBeenTriggered: false,
triggered: function () {
if (!this.get("hasBeenTriggered")) {
var tabs = $('#tabs').tabs();
this.set("hasBeenTriggered", true);
}
}
});
I'd love to know if there's a better way of doing this, as this still doesn't get round the FOUC problem either (which again can be done with more JS hacks)... :(

Jquerymobile - Listview -Ajax loading -CSS style

I am trying to load data using ajax, listview works charm on intialpage load, during ajax loading css is not loading.
nearly tried everything, like listview refresh,trigger etc..but nothing works out for me.
please help me
my code:
$('.more').live("click",function() {
var ID = $(this).attr("id");
var CASE = $(".case").attr("id");
var EXTRADATA = $(".extra_data").attr("id");
if(ID) {
$("#more"+ID).find("#loader").css('display', 'block');
$.ajax({
type: "POST",
url: "/ajax.php",
data: "lastpos=" + ID +"&case=" + CASE + "&extradata=" + EXTRADATA,
cache: false,
success: function(html){
$("#video_listing").append(html);
$("#more"+ID).remove(); // removing old more button
}
});
I had tried with
$('#video_listing').listview('refresh');
$(html).trigger('create');
.trigger( "enhance" );
Nothing works out...though lot of topics,covers this question,nothing worksout for me..please help
Here is a quick example: http://jsfiddle.net/Twisty/9SVPN/
JQuery:
$(document).ready(function() {
$('.more').live("click", function() {
$("#myList").append("<li>Added Item</li>");
$("#myList").listview("refresh");
});
});
HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Test Page</h2>
</div>
<div data-role="content">
<ul data-role="listview" id="myList">
<li>Item 1</li>
</ul>
<a id="actionBtn" data-role="button" class="more">Add LI</a>
</div>
</div>
</body>
</html>
Your question does not define what HTML is returned or what your HTML looks like before the AJAX event, so I am making somassumptions that your returned data is wrapped within <li></li>. Then you want to perform the .listview("refresh") on the <ul data-role="listview"> or <ol data-role="listview"> itself.

Looping JSON into DIV

I have the JSON from my controller as below:
{"ja":
[
{
"ID":0,
"Name":"Son",
"DepartmentID":0,
"isNewProduct":false,
"PictureName":null,
"isInstock":false
}
,
{
"ID":0,
"Name":"AM4-B2",
"DepartmentID":0,
"isNewProduct":false,
"PictureName":null,
"isInstock":false
}
,
{
"ID":0,
"Name":"AM4-B2",
"DepartmentID":0,
"isNewProduct":false,
"PictureName":null,
"isInstock":false
}
]
}
This is my menu that I'm going to click on it :
<ul id="navmenu-v">
<li id="select_list" class="level1">
<a id="56" class="selectedcategory" href="javascript:void(0);">Accessories</a>
</li>
<li id="select_list" class="level1">
<a id="69" class="selectedcategory" href="javascript:void(0);">Audio Players</a>
</li>
</ul>
And these are the div that I want to put each json in in :
<div id="container">
<div id="id"></div>
<div id="name"></div>
<div id="departmentID"></div>
<div id="isNew"></div>
<div id="pictureName"></div>
<div id="isStock"></div>
</div>
then I want to loop all the JSON into different div beside the in my view when I click on my Menu.
Could anyone tell me how can I do that using $.getJSON() and $.each()? Thanks so much.
first ull have to bind the menu anchor elements to the click events like this
$("#56").click(function(){
$.getJSON("baseUrl/Accesories",function(data){
$.each(data,function(index,value){
$('div#id').html($('div#id').html()+value.ID);
//simillarily you can do for others too
});
});
});

Resources