jquery weui 图片浏览器（Photo Browser）点击打开的图片怎么一一对应

Question

比如我页面上默认有5张图片，然后当我点击第三张的时候，就显示第三章对应的图片，第四张就是对应第四张。

open()方法在里面传一个具体的数值，下面的原点变了。但是图片还是没变。

Answer 1

这个需要修改一下源码， swiper.js
3856行
this.wrapper.transform('translate3d(-' + $(window).width()*this.config.initIndex + 'px,0,0)');
改成
this.wrapper.transform('translate3d(-' + $(window).width()*index + 'px,0,0)');
应该就可以了，试一下。

Answer 2

把当前点击的索引值放进去就可以了

$(".pb1").click(function() {
    pb1.open($(this).index())
});

Answer 3

@dszhxb 他说的是正确的。 swiper.js版本不一样可能有点差异。
我这个版本它里面的参数a;所以是成：
this.wrapper.transform("translate3d(-" + e(window).width() * a + "px,0,0)")这样。

            open: function(a) {    if (this._open) return ! 1;
                if (!this.modal) {
                    this.modal = e(this.tpl(this.config)).appendTo(document.body),
                        this.container = this.modal.find(".swiper-container"),
                        this.wrapper = this.modal.find(".swiper-wrapper");
                    var t = new Hammer(this.container[0]);
                    t.get("pinch").set({
                        enable: !0
                    }),
                        t.on("pinchstart", e.proxy(this.onGestureStart, this)),
                        t.on("pinchmove", e.proxy(this.onGestureChange, this)),
                        t.on("pinchend", e.proxy(this.onGestureEnd, this)),
                        this.modal.on(e.touchEvents.start, e.proxy(this.onTouchStart, this)),
                        this.modal.on(e.touchEvents.move, e.proxy(this.onTouchMove, this)),
                        this.modal.on(e.touchEvents.end, e.proxy(this.onTouchEnd, this)),
                        this.wrapper.transition(0),
                        this.wrapper.transform("translate3d(-" + e(window).width() * a + "px,0,0)"),//改这里
                        this.container.find(".caption-item").eq(this.config.initIndex).addClass("active"),
                        this.container.find(".swiper-pagination-bullet").eq(this.config.initIndex).addClass("swiper-pagination-bullet-active")
                }
                var i = this;
                this.modal.show().height(),
                    this.modal.addClass("weui-photo-browser-modal-visible"),
                    this.container.addClass("swiper-container-visible").transitionEnd(function() {
                        i.initParams(),
                        i.config.onOpen && i.config.onOpen.call(i)
                    }),
                    this._open = !0,
                void 0 !== a && this.slideTo(a, 0)
            },
            

然而这样的做法，是治标不治本的。其实它的原代码是没错的。
只是它slideTo 方法中有个this.containerWidth 获取容器宽度，它没有拿到，所以首页才显示第一项目。
这是它的一个BUG。我们只需在slideTo 方法加一行代码即可：

 this.containerWidth = this.containerWidth?this.containerWidth:e(window).width();

 如果取不到就用页面的宽度来取代它。完成代码如下（用了下面的方法后，上面的open方法原代码就不用改了）：
 slideTo: function(a, t) {
                0 > a && (a = 0),
                a > this.config.items.length - 1 && (a = this.config.items.length - 1),
                    this.lastActiveIndex = this.activeIndex,
                    this.activeIndex = a,
                    this.containerWidth = this.containerWidth?this.containerWidth:e(window).width(),//新添加
                    this.wrapperTransform = -(a * this.containerWidth),
                    this.wrapperLastTransform = this.wrapperTransform,
                    this.doWrapperTransform(t, e.proxy(function() {
                            return this.lastActiveIndex === this.activeIndex ? !1 : (this.container.find(".caption-item.active").removeClass("active"), this.container.find(".swiper-slide-active").removeClass("swiper-slide-active"), this.container.find(".swiper-pagination-bullet-active").removeClass("swiper-pagination-bullet-active"), this.container.find(".caption-item").eq(this.activeIndex).addClass("active"), this.container.find(".swiper-slide").eq(this.activeIndex).addClass("swiper-slide-active"), this.container.find(".swiper-pagination-bullet").eq(this.activeIndex).addClass("swiper-pagination-bullet-active"), this.container.find(".swiper-slide img[style]").transition(0).transform("translate3d(0,0,0) scale(1)"), this.lastScale = 1, this.currentScale = 1, this.imageLastTransform = {
                                x: 0,
                                y: 0
                            },
                                this.imageTransform = {
                                    x: 0,
                                    y: 0
                                },
                                this.imageDiff = {
                                    x: 0,
                                    y: 0
                                },
                                this.imageLastDiff = {
                                    x: 0,
                                    y: 0
                                },
                                void(this.config.onSlideChange && this.config.onSlideChange.call(this, this.activeIndex)))
                        },
                        this))
            }