天道酬勤,学无止境

photoswipe

如何通过 Aurelia / Typescript 导入和使用 PhotoSwipe?(How to import and use PhotoSwipe with Aurelia / Typescript?)

问题 我正在尝试在 Aurelia 项目中使用 PhotoSwipe,但找不到使其工作的方法。 在捆绑包下的 aurelio.json 中,我有: { "name": "photoswipe", "path": "../node_modules/photoswipe/dist/", "main": "photoswipe.min", "resources": [ "photoswipe-ui-default.min.js", "photoswipe.css", "default-skin/default-skin.css" ] } 在我的 package.json 中,我有: "@types/photoswipe": "^4.0.27", "photoswipe": "^4.1.1" 在我的 .ts 模块中,我有 import PhotoSwipe from 'photoswipe'; 我用于打开画廊的代码(刚刚从入门文档中复制) imageClicked() { var pswpElement = document.querySelectorAll('.pswp')[0]; // build items array var items = [ { src: 'https://placekitten.com/600/400', w: 600, h: 400 }, { src:

2022-01-14 10:42:39    分类:技术分享    typescript   npm   aurelia   photoswipe

How to import and use PhotoSwipe with Aurelia / Typescript?

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 opening the gallery (just copied from the getting started doc) imageClicked() { var pswpElement = document

2022-01-13 02:14:36    分类:问答    typescript   npm   aurelia   photoswipe

将 PhotoSwipe 配置为不使用整个窗口?(Configure PhotoSwipe to Not Use Entire Window?)

问题 我目前正在尝试使用 PhotoSwipe 构建移动图片库。 我已经能够让它工作,但有一个小问题。 当我点击照片缩略图时,实际照片总是占据整个视口。 当您在移动设备上查看图库时,这是可以的。 但是,如果您的视口是计算机屏幕并且图像不是高分辨率图像,则照片可能会非常模糊。 在计算机上查看时,我宁愿将照片的宽度限制为 300 到 400 像素。 有没有办法在 PhotoSwipe 中做到这一点? 我阅读了文档,但无法完全弄清楚。 我在下面附上了我的代码。 谢谢。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PhotoSwipe - jQuery Mobile Version</title> <link rel="stylesheet" href="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <link rel="stylesheet" href="lib/photoswipe/photoswipe.css" /> <link rel="stylesheet" href="css/mediaqueries.css" /> <style type="text/css"> div.gallery-row:after { clear

2021-12-21 05:44:36    分类:技术分享    javascript   jquery   css   jquery-mobile   photoswipe

Configure PhotoSwipe to Not Use Entire Window?

I'm currently trying to build a mobile image gallery using PhotoSwipe. I've been able to get it working but there's one small problem. When I click on a photo thumbnail, the actual photo always takes up the entire viewport. This is OK when you're viewing the gallery on a mobile device. But if your viewport is a computer screen and the image isn't a high-res one, the photo can be very blurry. I'd rather limit the photo to a width of maybe 300 to 400 pixels when viewed on a computer. Is there a way to do this in PhotoSwipe? I read the documentation but couldn't quite figure it out. I've enclosed

2021-12-13 06:39:16    分类:问答    javascript   jquery   css   jquery-mobile   photoswipe

How do i Swipe selected grid image in Full Screen

i created a grid-view image app, and i want to show selected image in image swipe. actually i implemented image swipe in my app but the problem is image swipe starts from 1st image not from selected image. example: if i choose 3rd image image swipe should starts from 3rd image not from 1st image. my code: MainActivity.java package com.td.gridview; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.ViewGroup

2021-11-26 02:16:53    分类:问答    android   android-viewpager   swipe   photoswipe

带有 html 控件和内容而不是弹出窗口的 Swipebox 幻灯片(Swipebox slide with html control and content instead of popup)

问题 我正在使用 swipebox,它既简单又有用。我想显示带有下一个上一个图标的第一张图像。当用户单击(或在移动设备中触摸滑动)下一张图像幻灯片将显示下一张图像。我需要的设计在这里 正如你在我的设计中看到的,有幻灯片,还有许多其他的 html control-content-div-button...... 但是 swipebox show 弹出,它只显示如下幻灯片。 这对我不利,因为我的页面(设计)中有信息内容链接和其他 html 控件。幻灯片只是我移动网站页面的一部分。所以我需要更改幻灯片全屏并弹出 这是我的视图代码 <script type="text/javascript"> $(document).ready(function () { $('.swipebox').swipebox(); $('.swipebox:first').click(); // simply faking a click on the selector which starts the slide }); <div class="content"> <div class="display-img" style="overflow: hidden; text-align: center;"> foreach (var item in Model.Images.Take(8)) { <a rel=

2021-11-20 02:32:55    分类:技术分享    jquery   swipe   slide   mobile-website   photoswipe

Photowipe相同的源代码但输出不起作用(Photoswipe same source code but output not working)

问题 我有这段代码,它刷新了 ul 的内容。 它适用于第一次加载,即直接加载 ul 的内容,但我每 10 秒制作一次新内容,以便用户始终可以获得新内容。 javascript 调用传递的内容的源代码与第一次加载完全相同。 然后javascript调用也不起作用 Javascript: <script type="text/javascript"> setInterval(function() { $("#vbar").load(location.href+" #vbar>*",""); }, 10000); </script> html代码是: <ul id="vbar" class="gallery"> <li> <a href="http://i2.listal.com/image/3550836/600full-taylor-swift.jpg" rel="external">Taylor Swift </a> </li> <li> <a href="http://i2.listal.com/image/303530/600full-jessica-lange.jpg" rel="external">Jessica Lange </a> </li> <li> <a href="http://i2.listal.com/image/2844304/600full.jpg"

2021-11-19 07:31:29    分类:技术分享    javascript   php   jquery   ajax   photoswipe

Photoswipe same source code but output not working

I have this piece of code, which refreshes the content of an ul. It works on the first load, where the content of ul is directly loaded, but i am making new content every 10 seconds so that user can always get new content. The source code of content delivered by javascript call is exactly same as the first load. Then also javascript call does not work The Javascript: <script type="text/javascript"> setInterval(function() { $("#vbar").load(location.href+" #vbar>*",""); }, 10000); </script> The html code is: <ul id="vbar" class="gallery"> <li> <a href="http://i2.listal.com/image/3550836/600full

2021-11-13 05:31:18    分类:问答    javascript   php   jquery   ajax   photoswipe

Swipebox slide with html control and content instead of popup

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 mobile web site page.So i need change slide full screen and pop here is my view code <script type=

2021-11-11 17:49:06    分类:问答    jquery   swipe   slide   mobile-website   photoswipe

添加从文件夹中动态读取照片滑动目的(Add <li> dynamically reading from a folder photoswipe purpose)

问题 抱歉我的英语,我是 jquery mobile 的新手,一般只有关于 javascript 语言的基本知识; 我正在玩一个单页网站移动设备(我通常使用 Dreamweaver CS6)并且我使用 photowipe 取得了很好的结果,一切都很好,因为我只有几张图片。 我已经添加了很多,所以现在我可以动态获取图像的链接。 简而言之,我想从我的 ftp 上的一个文件夹开始并读取其中的所有图像文件并为每个图像创建<li>项目。 我可以使用 jquery mobile 完成这项工作,还是应该使用 php 或 .Net 之类的语言 我在这里和谷歌上阅读了一些例子,但它们对我没有多大帮助,比如这个,我相信它可以成为我的答案,但我不知道如何开始 http://docs .phonegap.com/en/2.4.0/cordova_file_file.md.html#DirectoryReader 这是我正在使用的一些代码: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http:/

2021-11-09 23:22:27    分类:技术分享    html   jquery-mobile   photoswipe