标签: photoswipe

使用PhotoSwipe缩略图库标记如下所示:

    <div class="wrap clearfix">
    <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
    <ul class="gallery-grid">
        <li>
            <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                <a href="img/dektop/1.jpg" itemprop="contentUrl" data-size="1200x1200">
                    <img src="img/thumb/1.jpg" itemprop="thumbnail" alt="Image description" />
                </a>
                    <figcaption itemprop="caption description">Image caption 1</figcaption>
            </figure>
        </li>
        <li>
            <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                <a href="img/dektop/2.jpg" itemprop="contentUrl" data-size="1200x1200">
                    <img src="img/thumb/2.jpg" itemprop="thumbnail" alt="Image description" />
                </a>
                    <figcaption itemprop="caption description">Image caption 2</figcaption>
            </figure>
        </li>
    </ul>
</div> <!-- mygallery -->
</div> <!-- wrap -->

解析图像的功能是:

var parseThumbnailElements = function(el) {
    var thumbElements = el.childNodes,
        numNodes = thumbElements.length,
        items = …

有没有办法在创建后动态地将图像添加到photoswipe库.

情况就是这样.

我从服务器获取图像网址并在图库中显示它们.下载项目时,会将锚点和img元素添加到页面中.我希望能够在同一时间将每个附加到photoswipe画廊.

目前在元素回调中(在图像加载和元素追加之后)我有

 $elements.photoSwipe({ enableMouseWheel: false , enableKeyboard: false });

除了它在自己的画廊中创建每个元素之外,这都有效.有没有办法获得现有画廊的句柄,只是附加到它？

我是jquery mobile和jquery的新手.我正在开发一个带有phonegap和jquery mobile的项目.我正在使用PhotoSwipe图片库.它工作得很好,并显示图像.但我想为我的画廊制作照片的自定义工具栏.我看到了他们给定的自定义工具栏示例,几乎成功了.虽然我是这个领域的新手,但我没能将它与jquery mobile集成.而我的自定义按钮根本不起作用.这是我的代码示例.

for (var i = 0; i < photo_len; i++) {
    $('.GalleryAccessories').append('<li><a href="' + image_item[i].original + '" rel="external"><img src="' + image_item[i].original + '" alt=""/></a></li>');
}

$('.GalleryAccessories').trigger("create");

var myPhotoSwipe = $(".GalleryAccessories a").photoSwipe({
    getToolbar: function(){
        return '<div class="ps-toolbar-close" style="padding-top: 12px;">Back</div><div class="ps-toolbar-play" style="padding-top: 12px;">Play</div><div class="ps-toolbar-previous" style="padding-top: 12px;">Previous</div><div class="ps-toolbar-next" style="padding-top: 12px;">Next</div><div class="ps-toolbar-close" style="padding-top: 12px;">View All</div>';
    },
    jQueryMobile: true,
    loop: false,
    enableMouseWheel: false,
    enableKeyboard: false
});

myPhotoSwipe.show(0);

查看全部按钮根本不起作用.我试过他们给出的代码,但没有运气.我甚至尝试过我现在所做的但仍然没有用.抱歉我的英语不好.请帮帮我...提前谢谢.

我正在使用 Laravel 网站，包括Photoswipe。这是我的问题：当我单击照片时，它会以预定义的高度和宽度（在我的情况下为 764X480）弹出。我希望我的照片以原始比例打开，而不是预定义的（因为我有一些全景图）。有没有办法解决这个问题？是否可以设置其他尺寸？您可以在http://www.pixelkomando.com/paysages上检查行为

我正在使用带有jQueryMobile 1.1-rc1的PhotoSwipe 3.0.4.

我试图阻止PhotoSwipe隐藏它的工具栏.

我尝试将captionAndToolbarAutoHideDelay参数设置为0,希望这会阻止工具栏隐藏,但这似乎阻止它自动隐藏.

我还将captionAndToolbarHide设置为false,希望这可以防止它隐藏但是这没有帮助.

当用户点击并滑动图像时,我想阻止工具栏隐藏,就像在某些手机上一样,让工具栏再次显示有点困难.

有人有运气吗？

我只是在尝试使用photoswipe,到目前为止,我还没有做过比简单实现一些非常小的(和理论上微不足道的调整)的入门演示副本更先进的东西.

我的图片库很好,我总共有4个项目,因为我只是想测试它.第一张照片将变焦和平移,所有这些都很棒.但是,当我切换图片时,我在这个帖子标题中得到了javascript错误.

我使用以下作为我的项目:

var items =[{"src":"/Images/Portfolio/Pieces/PhoenixFury.jpg","thumbnail":"/Images/Portfolio/Thumbs/PhoenixFury.jpg","msrc":"/Images/Portfolio/Thumbs/PhoenixFury.jpg","w":765,"h":1201,"title":"Phoenix\u0027s Fury","caption":"Illustration used for the cover of Lifeweaver","key":"Phoenix"},{"src":"/Images/Portfolio/Pieces/EnoreTower.jpg","thumbnail":"/Images/Portfolio/Thumbs/EnoreTower.jpg","msrc":"/Images/Portfolio/Thumbs/EnoreTower.jpg","w":765,"h":1200,"title":"Enore\u0027s Tower","caption":"Illustration used for the cover of Guardian\u0027s Peril","key":"Enore"},{"src":"/Images/Portfolio/Pieces/KenpoLogo.jpg","thumbnail":"/Images/Portfolio/Thumbs/KenpoLogo.jpg","msrc":"/Images/Portfolio/Thumbs/KenpoLogo.jpg","w":800,"h":966,"title":"Kenpo Karate Logo","caption":"Commissioned karate team logo for a team in Mexico with central american themes on the traditional Kenpo notion of a dragon and a tiger.","key":"Kenpo"},{"src":"/Images/Portfolio/Pieces/Quetzalcoatl.jpg","thumbnail":"/Images/Portfolio/Thumbs/Quetzalcoatl.jpg","msrc":"/Images/Portfolio/Thumbs/Quetzalcoatl.jpg","w":1600,"h":967,"title":"Quetzalcoatl","caption":"Central American ancient deity Quetzalcoatl, the feathered serpent.","key":"Quetzalcoatl"}];

我添加了一些自定义属性,但我还没有对photoswipe做任何事情来尝试利用它们,所以我不认为这是问题所在.

我使用以下作为我的选择:

        var options = {

            history: false,
            focus: false,
            index: 0,//I can verify that 0,1,2,3 all load up correctly for an initial load
            showAnimationDuration: 0,
            hideAnimationDuration: …

我目前正在尝试使用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: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }
        div.gallery-item {
            float: left;
            width: 33.333333%;
        }
        div.gallery-item a {
            display: block;
            margin: 5px;
            border: 1px solid #3c3c3c;
        }
        div.gallery-item img {
            display: block;
            width: 100%;
            height: auto;
        }
        #Gallery1 .ui-content, #Gallery2 .ui-content {
            overflow: hidden;
        }
    </style> …

我的页面上有一个PhotoSwipe库,它以编程方式创建,如下所示:

var instance = window.Code.PhotoSwipe.attach(image, options)

现在我想更新图库中的图像,或者将新图库放在同一位置.

为此创建新图库会DOM Element忽略以下错误:

Code.PhotoSwipe.activateInstance:
Unable to active instance as another instance is already active for this target

从Element中分离实例Code.PhotoSwipe.detatch(instance)也没有帮助.

任何想法如何用新图像填充图库,或删除它,所以我可以在同一个地方创建一个新的？

我正在使用此方法更改页面

$.mobile.changePage("Preview.html", {
        transition : "slide",
        role : "page",
        changeHash:true                            
    });

这就是我的预览页面的样子

    <div data-role="page"  data-name="preview" class="prew">
        <div data-role="content">
            //content
       </div>
    </div>

现在当我触摸屏幕时,我必须回到上一页.

所以我创建了这个功能

$('.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 works fine on android not on iOS.
    });

编辑:我使用了一个名为photoswipe的插件导致问题.history.go(-1),history.back()或data-rel ="back"在其他页面上正常工作.

photoswipe无法返回上一页.

我的网站上有一个Photoswipe(http://photoswipe.com)图片库,并且在我第二次关闭图库后,css类没有重置/清除以删除视图.

恩.用户打开第1项,AJAX将图形填充到图片div中.用户单击项目1中的图像,Photoswipe正确打开图像(设置以下类):

class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"

用户从第1项关闭图像,类正常重置:

class="pswp"

用户关闭第1项,JS/JQuery清除图片div中的所有html.用户打开第2项,AJAX将图形填充到图片div中.用户单击项目2中的图像,并且Photoswipe正确打开图像,设置与以前相同的类.

class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"

这是问题发生的地方.用户从第2项关闭图像,唯一改变的是:

aria-hidden="true"

但是班级不清楚,它仍然是:

class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"

什么时候应该改为:

class="pswp"

这会禁用网站上的所有交互,因为在所有内容上都有一个不可见的div/class.该类需要以某种方式更改回pswp.

AJAX/JS填充图片div(我在div中添加了一个id):

if (i == 0) {
    $('#listing_photos_container').append('<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"><a href="' + json[i].image_url + '" itemprop="contentUrl" data-size="512x400" data-index="' + i + '"><img src="' + json[i].image_url + '" height="400" width="600" itemprop="thumbnail" alt="listingPhoto" class="listing-photo"></a></figure>');
} else {
    $('#listing_photos_container').append('<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="listing-photo-holder"><a …

默认情况下，Photoswipe为大图像提供缩放和拖放功能。效果很好。但如果图像小于视口，单击该图像将关闭图库。

这个麻烦的视频：

https://dl.dropboxusercontent.com/u/22619948/photoswipe-click-close.mov

插件作者制作的演示： http://codepen.io/dimsemenov/pen/ZYbPJM （可以在第6行更改图像大小）

我想通过单击图像提供“转到下一张图像”功能。我在这里找到了解决方案： https: //github.com/dimsemenov/PhotoSwipe/issues/747 它可以工作，但如果图像很小，图库仍然会自行关闭。

有什么帮助吗？谢谢。

我试图做一些图像处理的东西取决于我与我的画廊关联的任意数据.

  gallery.html('');
    $.each(data.photos, function(key, photo) {

        var item = "<li><a href='http://stage.domain.com/assets/img/user/"+photo.full+"'><img src='http://stage.domain.com/assets/img/user/"+photo.med+"'/></a></li>";

        gallery.append(item);
    });
    gallery.trigger('create');

    var options = {


        enableMouseWheel: false , 
        enableKeyboard: false ,
        captionAndToolbarAutoHideDelay:0,
        jQueryMobile:true

    }

    var swipe = $(".gallery a").photoSwipe(options);

    // onDisplayImage
    swipe.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){
        console.log('onDisplayImage{');
        console.log('onDisplayImage - e.action = ' + e.action);
        console.log('onDisplayImage - e.index = ' + e.index);
        console.log(swipe.getCurrentImage());
        console.log('onDisplayImage}');
    });

但是ondisplayimage事件从未被解雇,因为没有定义PhotoSwipe

 06-14 04:28:45.496: D/CordovaLog(31662): Uncaught ReferenceError: PhotoSwipe is not defined

示例https://github.com/codecomputerlove/PhotoSwipe/blob/master/src/examples/07-custom-toolbar.html不使用我需要的jquery实现.那么基本上我如何使用jquery mobile挂钩事件处理程序.

可以在Photoswipe上添加一个按钮吗？我知道我可以在按钮上进行点击事件,但是我无法更改按钮图标.是否可以添加一个新的按钮,用普通的java脚本funktion'print'打印图片？