Question

点击图片弹出即将出现。对于那个弹出窗口，当我点击添加到购物车按钮时，我附加添加到购物车按钮图像src应该如何解决这个问题？

我曾使用版本2的jquery.fancybox.js

jquery代码，

// HTML templates
        tpl: {
            wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
            image    : '<img class="fancybox-image" src="{href}"  alt="" />',
            iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '></iframe>',
            error    : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
            closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
            next     : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
            prev     : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
        },

添加到购物车按钮代码，

beforeShow: function (opts) {
            alert(opts);
            var current = F.current,
                text    = current.title,
                type    = opts.type,
                title,
                target;

            if ($.isFunction(text)) {
                text = text.call(current.element, current);
            }

            if (!isString(text) || $.trim(text) === '') {
                return;
            }

            title = $('<a href="enquiry-cart.php" onclick="addToCart(this)"><div class="fancybox-title fancybox-title-' + type + '-wrap"></div></a><b>' + text + '</>');

            switch (type) {
                case 'inside':
                    target = F.skin;
                break;

                case 'outside':
                    target = F.wrap;
                break;

                case 'over':
                    target = F.inner;
                break;

                default: // 'float'
                    target = F.skin;

                    title.appendTo('body');

                    if (IE) {
                        title.width( title.width() );
                    }

                    title.wrapInner('<span class="child"></span>');

                    //Increase bottom margin so this title will also fit into viewport
                    F.current.margin[2] += Math.abs( getScalar(title.css('margin-bottom')) );
                break;
            }

            title[ (opts.position === 'top' ? 'prependTo'  : 'appendTo') ](target);
        }
    };

用于缩放的HTML代码，

<div class="col-sm-4">
                    <div class="prdtitem add-to-cart" id="glittek-blue">
                        <a href="#cart" title="glittek" onclick="addToCart(this)">
                            <div class="enqry-cart pull-left">
                                <i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
                                <span class="pull-left">add to enquiry cart</span>
                            </div>
                        </a>
                        <div class="zoom add-to-cart">
                            <a href="images/black-pearl.jpg" title="glittek" class="lazy-img thumbimg fancybox" rel="tiles">
                                <img src="images/black-pearl.jpg" alt="black-pearl" class="lazy-loaded"/>
                            </a>
                        </div>  
                        <h4 class="prdtTitle">Black Pearl</h4>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="prdtitem add-to-cart">
                        <a href="#cart" title="glittek" onclick="addToCart(this)">
                            <div class="enqry-cart pull-left">
                                <i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
                                <span class="pull-left">add to enquiry cart</span>
                            </div>
                        </a>
                        <div class="zoom">
                            <a href="images/colombo-juparana2.jpg" title="glittek" class="lazy-img thumbimg fancybox" rel="tiles">
                                <img src="images/colombo-juparana2.jpg" alt="colombo-juparana" class="lazy-loaded"/>
                            </a>
                        </div>
                        <h4 class="prdtTitle">Colombo Juparana</h4>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="prdtitem add-to-cart">
                        <a href="#cart" title="glittek" onclick="addToCart(this)">
                            <div class="enqry-cart pull-left">
                                <i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
                                <span class="pull-left">add to enquiry cart</span>
                            </div>
                        </a>
                        <div class="zoom">
                            <a href="images/ghibli.jpg" title="glittek" class="lazy-img thumbimg fancybox" rel="tiles">
                                <img src="images/ghibli.jpg" alt="ghibli" class="lazy-loaded"/>
                            </a>
                        </div>
                        <h4 class="prdtTitle">Ghibli</h4>
                    </div>
                </div>

Answer 1

我建议在按钮上设置一个onclick事件，并在函数中获取当前的fancybox src：

 btnTpl: {

           remove:
           '<a class="fancybox-button" title="your title" onclick="yourFunction();">'+
              '<i class="fa fa-WHATEVER ICON"></i>'+
           '</a>',
         }


function yourFunction(){
   console.log($.fancybox.getInstance().current.src)
}

如何在jquery花式框中fecth当前图像src？

1 个答案: