这个瀑布流我想一进来就变成点击放大的状态这个怎么...

970145

这个瀑布流我想一进来就变成点击放大的状态，这个怎么做？

970145

我想一打开页面就是第二张图的状态！

970145

        //加载数据
        Model.prototype.imgDataCustomRefresh = function(event){
                var url = require.toUrl("./json/imgData.json");
                allData.loadDataFromFile(url,event.source,true);
        };
        Model.prototype.modelLoad = function(event) {
               
                $(".brick", this.getRootNode()).each(function() {
                        var obj=$(this);
                        var img=$(this).find("img");
                        //alert(img);
                        var newImg = new Image();
                    newImg.onload = function(){                           
                            var imgWidth=newImg.width;
                                var imgHeight=newImg.height;
                                var w=parseInt(imgWidth/160);
                                var h=parseInt(imgHeight/160);
                                if(w<1) w=1;
                                if(h<1) h=1;
                                var size="size"+w+h;
                                var className=obj.attr("class")+" "+size;
                                obj.attr("class",className);
                               
                                obj.find("a").attr({"href":img.attr("src"),"data-size":imgWidth+"x"+imgHeight,"data-med":img.attr("src"),"data-med-size":imgWidth+"x"+imgHeight});
                    };
                    newImg.src = img.attr("src");
                   // alert(newImg.src);

        });

                window.app.setup({
                        share: 1,
                        color: 1,
                        logo: 1,
                        layout: 1,
                        events: 1,
                        methods: 1,
                        options: 0,
                        preload: 0
                });
                //放大
                var initPhotoSwipeFromDOM = function(gallerySelector) {

                        var parseThumbnailElements = function(el) {
                            var thumbElements =  el.childNodes,
                                numNodes = thumbElements.length,
                                items = [],
                                el,
                                childElements,
                                thumbnailEl,
                                size,
                                item;
                                       

                            for(var i = 0; i < numNodes; i++) {
                                el = thumbElements;

                                // include only element nodes
                                if(el.nodeType !== 1) {
                                  continue;
                                }

                                childElements = (el.children)[0].children;

                                size = (el.children)[0].getAttribute('data-size').split('x');

                                // create slide object
                                item = {
                                                src: (el.children)[0].getAttribute('href'),
                                                w: parseInt(size[0], 10),
                                                h: parseInt(size[1], 10),
                                                author: (el.children)[0].getAttribute('data-author')
                                };

                                item.el = (el.children)[0]; // save link to element for getThumbBoundsFn

                                if(childElements.length > 0) {
                                  item.msrc = childElements[0].getAttribute('src'); // thumbnail url
                                  if(childElements.length > 1) {
                                      item.title = childElements[1].innerHTML; // caption (contents of figure)
                                  }
                                }

                                        var mediumSrc = (el.children)[0].getAttribute('data-med');
                                  if(mediumSrc) {
                                    size = (el.children)[0].getAttribute('data-med-size').split('x');
                                    // "medium-sized" image
                                    item.m = {
                                              src: mediumSrc,
                                              w: parseInt(size[0], 10),
                                              h: parseInt(size[1], 10)
                                    };
                                  }
                                  // original image
                                  item.o = {
                                          src: item.src,
                                          w: item.w,
                                          h: item.h
                                  };

                                items.push(item);
                            }

                            return items;
                        };

                        // find nearest parent element
                        var closest = function closest(el, fn) {
                            return el && ( fn(el) ? el : closest(el.parentNode, fn) );
                        };

                        var onThumbnailsClick = function(e) {
                            e = e || window.event;
                            e.preventDefault ? e.preventDefault() : e.returnValue = false;

                            var eTarget = e.target || e.srcElement;

                            var clickedListItem = closest(eTarget, function(el) {
                                return el.tagName === 'A';
                            });

                            if(!clickedListItem) {
                                return;
                            }

                            var clickedGallery = clickedListItem.parentNode.parentNode;

                            var childNodes = clickedListItem.parentNode.parentNode.childNodes,
                                numChildNodes = childNodes.length,
                                nodeIndex = 0,
                                index;

                            for (var i = 0; i < numChildNodes; i++) {
                                if(childNodes.nodeType !== 1) {
                                    continue;
                                }

                                if((childNodes.children)[0] === clickedListItem) {
                                    index = nodeIndex;
                                    break;
                                }
                                nodeIndex++;
                            }

                            if(index >= 0) {
                                openPhotoSwipe( index, clickedGallery );
                            }
                            return false;
                        };

                        var photoswipeParseHash = function() {
                                var hash = window.location.hash.substring(1),
                            params = {};

                            if(hash.length < 5) { // pid=1
                                return params;
                            }

                            var vars = hash.split('&');
                            for (var i = 0; i < vars.length; i++) {
                                if(!vars) {
                                    continue;
                                }
                                var pair = vars.split('=');  
                                if(pair.length < 2) {
                                    continue;
                                }           
                                params[pair[0]] = pair[1];
                            }

                            if(params.gid) {
                                    params.gid = parseInt(params.gid, 10);
                            }

                            return params;
                        };

                        var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
                            var pswpElement = document.querySelectorAll('.pswp')[0],
                                gallery,
                                options,
                                items;

                                items = parseThumbnailElements(galleryElement);

                            // define options (if needed)
                            options = {

                                galleryUID: galleryElement.getAttribute('data-pswp-uid'),

                                getThumbBoundsFn: function(index) {
                                    // See Options->getThumbBoundsFn section of docs for more info
                                    var thumbnail = items[index].el.children[0],
                                        pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                                        rect = thumbnail.getBoundingClientRect();

                                    return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
                                },

                                addCaptionHTMLFn: function(item, captionEl, isFake) {
                                                if(!item.title) {
                                                        captionEl.children[0].innerText = '';
                                                        return false;
                                                }
                                                captionEl.children[0].innerHTML = item.title +  '<br/><small>Photo: ' + item.author + '</small>';
                                                return true;
                                },
                                       
                            };

                            if(fromURL) {
                                    if(options.galleryPIDs) {
                                            // parse real index when custom PIDs are used
                                            // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
                                            for(var j = 0; j < items.length; j++) {
                                                    if(items[j].pid == index) {
                                                            options.index = j;
                                                            break;
                                                    }
                                            }
                                    } else {
                                            options.index = parseInt(index, 10) - 1;
                                    }
                            } else {
                                    options.index = parseInt(index, 10);
                            }

                            // exit if index not found
                            if( isNaN(options.index) ) {
                                    return;
                            }

                                var radios = document.getElementsByName('gallery-style');
                                for (var i = 0, length = radios.length; i < length; i++) {
                                    if (radios.checked) {
                                        if(radios.id == 'radio-all-controls') {

                                        } else if(radios.id == 'radio-minimal-black') {
                                                options.mainClass = 'pswp--minimal--dark';
                                                options.barsSize = {top:0,bottom:0};
                                                        options.captionEl = false;
                                                        options.fullscreenEl = false;
                                                        options.shareEl = false;
                                                        options.bgOpacity = 0.85;
                                                        options.tapToClose = true;
                                                        options.tapToToggleControls = false;
                                        }
                                        break;
                                    }
                                }

                            if(disableAnimation) {
                                options.showAnimationDuration = 0;
                            }

                            // Pass data to PhotoSwipe and initialize it
                            gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

                            // see: http://photoswipe.com/documentation/responsive-images.html
                                var realViewportWidth,
                                    useLargeImages = false,
                                    firstResize = true,
                                    imageSrcWillChange;

                                gallery.listen('beforeResize', function() {

                                        var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
                                        dpiRatio = Math.min(dpiRatio, 2.5);
                                    realViewportWidth = gallery.viewportSize.x * dpiRatio;


                                    if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
                                            if(!useLargeImages) {
                                                    useLargeImages = true;
                                                imageSrcWillChange = true;
                                            }
                                        
                                    } else {
                                            if(useLargeImages) {
                                                    useLargeImages = false;
                                                imageSrcWillChange = true;
                                            }
                                    }

                                    if(imageSrcWillChange && !firstResize) {
                                        gallery.invalidateCurrItems();
                                    }

                                    if(firstResize) {
                                        firstResize = false;
                                    }

                                    imageSrcWillChange = false;

                                });

                                gallery.listen('gettingData', function(index, item) {
                                    if( useLargeImages ) {
                                        item.src = item.o.src;
                                        item.w = item.o.w;
                                        item.h = item.o.h;
                                    } else {
                                        item.src = item.m.src;
                                        item.w = item.m.w;
                                        item.h = item.m.h;
                                    }
                                });

                            gallery.init();
                        };
                        // select all gallery elements
                        var galleryElements = document.querySelectorAll( gallerySelector );

                        for(var i = 0, l = galleryElements.length; i < l; i++) {
                                galleryElements.setAttribute('data-pswp-uid', i+1);
                                galleryElements.onclick = onThumbnailsClick;
                        }
                        // Parse URL and open gallery if it contains #&pid=3&gid=1
                        var hashData = photoswipeParseHash();
                        if(hashData.pid && hashData.gid) {
                                openPhotoSwipe( hashData.pid,  galleryElements[ hashData.gid - 1 ], true, true );
                        }
                };
               
                initPhotoSwipeFromDOM('.demo-gallery');
        };




加载完数据后怎么自动去到放大页面？

liangyongfei

可以在onLoad 事件中！通过获取一个img 图片的dom对象！然后调用dom.click()  来触发点击事件！

970145

能否贴代码上来，你这样说的思路我也知道！

但我不知如何代码实现！

970145

liangyongfei 发表于 2016-7-12 15:39
可以在onLoad 事件中！通过获取一个img 图片的dom对象！然后调用dom.click()  来触发点击事件！ ...

@liangyongfei

要代码啊，思路哪个不懂啊！

liangyongfei

970145 发表于 2016-7-12 16:23
@liangyongfei

要代码啊，思路哪个不懂啊！

var img=$(this).find("img");  就是获取img标签！
img[0].click();  应该就是获取第一个dom节点，执行它的click点击方法就可以！
详细用法上网查下吧！

970145

liangyongfei 发表于 2016-7-12 18:52
var img=$(this).find("img");  就是获取img标签！
img[0].click();  应该就是获取第一个dom节点，执行它 ...

这个方法不行！麻烦你在那个瀑布流上实际试验下

970145

这信案例麻烦写进官方DEMO里！谢谢！

liangyongfei

970145 发表于 2016-7-13 12:50
这信案例麻烦写进官方DEMO里！谢谢！

这样吧！你个img标签填加个xid  
比如就叫做  img

onload方法的最后，这样写

1.         var me = this;
   
2.                 setTimeout(function(){
   
3.                         var img = me.getElementByXid('img');
   
4.                         $(img).click();
   
5.                 }, 1000)
   

复制代码

因为图片加载还没执行完！需要稍等一段时间！所以你设置个1秒后执行！就可以了！