photoswipe

How to incorporate Photoswipe with Aurelia

随声附和 提交于 2019-12-12 04:31:53
问题 I have a really hard time of integrating Photoswipe with Aurelia. I got compile time errors and browser errors. I looked at this question and tried what was suggested there (except the change of the typings file, because I don't know what to change), but still it is not working. With the information from the other question I managed to resolve the compile time errors but I still get an error when I initialize Photoswipe: Uncaught TypeError: photoswipe_1.default is not a constructor aurelia

Swipebox slide with html control and content instead of popup

大憨熊 提交于 2019-12-12 01:47:31
问题 I am using swipebox it is easy and useful.I want show first image with next-previous icon.When user click(or touch-swipe in mobile) next image slide will show next image.My needed design is here as you can see in my design there is slide and also there is many other html control-content-div-buton...... but swipebox show pop up and it just show slide as below. This is not good for me because there is information-content-links and other html control in my page(design).Slide is just a part of my

dynamically loading content for photoswipe

不羁的心 提交于 2019-12-11 11:54:18
问题 I am loading the content of photoswipe gallery dynamically. The first 5 image url are loaded from database on the pageload and work like it should be. The problem I click in one of the links, the Photoswipe open loaded with the 5 images that are in the list. My code update the list with new 5 images. Photoswipe doesn't update the image galery. My code is below: <script type="text/javascript"> setInterval(function() { $("#vbar").load(location.href+" #vbar>*",""); }, 10000); </script> I have

Photoswipe + JQM: back event issue

和自甴很熟 提交于 2019-12-11 02:52:13
问题 $(document).on("pagecreate", function() { $.jsonp({ url: 'URL_TO_GET_JSONP', callbackParameter: 'get_photo', success: function(json, status) { var photo = []; var path = 'URL_TO_GET_JSONP'; $.each(json, function(a,b){ photo.push(' '); photo.push(''); photo.push(' '); }); $('.gallery').html(photo.join('')); var myPhotoSwipe = $(".gallery a").photoSwipe({ enableMouseWheel: false, }) }, error: function(){ alert("Unable to load photos."); } }); }); I am having issues with the gallery and the

Responsive PhotoSwipe with large controls on mobile device

最后都变了- 提交于 2019-12-10 11:12:58
问题 In this official codepen, on my mobile device the controls and caption look very small: http://codepen.io/dimsemenov/pen/ZYbPJM I tried adding this to the HTML but it didn't make any difference: <meta name="viewport" content="width = device-width, initial-scale = 1.0"> How can I make them larger like in the photoswipe.com site? 回答1: If your markup looks like suggested on the PhotoSwipe website and that CodePen you can simply add any HTML elements you like in the figcaption element like so:

How to import and use PhotoSwipe with Aurelia / Typescript?

允我心安 提交于 2019-12-08 06:37:51
问题 I am trying to use PhotoSwipe in an Aurelia project, but cannot find a way to make it work. In my aurelio.json under bundles, I have: { "name": "photoswipe", "path": "../node_modules/photoswipe/dist/", "main": "photoswipe.min", "resources": [ "photoswipe-ui-default.min.js", "photoswipe.css", "default-skin/default-skin.css" ] } in my package.json, I have: "@types/photoswipe": "^4.0.27", "photoswipe": "^4.1.1" in my .ts module, I have import PhotoSwipe from 'photoswipe'; The code I use for

Going back to previous page works in simulator not on iOS device jquerymobile

折月煮酒 提交于 2019-12-05 22:04:35
I am changing the page with this method $.mobile.changePage("Preview.html", { transition : "slide", role : "page", changeHash:true }); this is how my preview page looks like <div data-role="page" data-name="preview" class="prew"> <div data-role="content"> //content </div> </div> now when i touch the screen i have to go back to previous page. so i created this function $('.prew').live('tap', function() { alert('clicked'); history.go(-1);//<--this works in simulator not in device. //window.history.back() ;//<--this also works in simulator not on device. //navigator.app.backHistory();<--this

Replace images in PhotoSwipe gallery

假装没事ソ 提交于 2019-12-03 08:45:54
I have a PhotoSwipe gallery on my page which is created programatically like this: var instance = window.Code.PhotoSwipe.attach(image, options) Now I want to update the images in the gallery, or put a new gallery in the same spot. Creating a new gallery for the same DOM Element omits the following error: Code.PhotoSwipe.activateInstance: Unable to active instance as another instance is already active for this target Detaching the instance from the Element using Code.PhotoSwipe.detatch(instance) didn't help either. Any ideas how to fill the gallery with new images, or remove it, so I can create

How can I get directive to fire after view loaded?

冷暖自知 提交于 2019-12-02 06:46:50
问题 I know this has been asked a thousand time, but I think I've tried every solution I've read and I can't seem to get it to work. I have an API from which I'm getting my images, after pulling the images into the view I want them to use photoswipe for displaying on mobile. I have a directive: 'use strict'; App.directive('photoswipe', function () { return { replace: false, restrict: 'A', link: function photoSwipeLink(scope, element, attr) { scope.$watch(attr.photoswipe, function(value){ angular

How can I get directive to fire after view loaded?

一个人想着一个人 提交于 2019-12-02 03:07:07
I know this has been asked a thousand time, but I think I've tried every solution I've read and I can't seem to get it to work. I have an API from which I'm getting my images, after pulling the images into the view I want them to use photoswipe for displaying on mobile. I have a directive: 'use strict'; App.directive('photoswipe', function () { return { replace: false, restrict: 'A', link: function photoSwipeLink(scope, element, attr) { scope.$watch(attr.photoswipe, function(value){ angular.element('#gallery a').photoSwipe({ enableMouseWheel: false, enableKeyboard: false }); }); } }; }); I get