javascript - 如何从jquery fancy box中获取 parent 图像的src和名称？

Question

下面是 HTML 代码，我想获取 h4 标签 class="prdtTitle"中提到的图像 src 和图像名称以及 Jquery fancy box 中的图像 src。

我正在使用下面的精美盒子:

/*!
 * fancyBox - jQuery Plugin
 * version: 2.1.5 (Fri, 14 Jun 2013)
 * @requires jQuery v1.6 or later
 *
 * Examples at http://fancyapps.com/fancybox/
 * License: www.fancyapps.com/fancybox/#license
 *
 * Copyright 2012 Janis Skarnelis - janis@fancyapps.com
 *
 */

<div class="col-sm-4">
                <div class="prdtitem add-to-cart" id="black-thunder">
                    <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/imperial-exotic-gold.jpg" title="glittek" class="lazy-img thumbimg fancybox" rel="slabs">
                            <img src="images/imperial-exotic-gold.jpg" alt="imperial-exotic-gold" class="lazy-loaded" />
                        </a>
                    </div>
                    <h4 class="prdtTitle">Imperial Exotic Gold</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/golden-juprana.jpg" title="glittek" class="lazy-img thumbimg fancybox" rel="slabs">
                            <img src="images/golden-juprana.jpg" alt="golden-juprana" class="lazy-loaded"/>
                        </a>
                    </div>      
                    <h4 class="prdtTitle">Golden 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/colombo-juparana.jpg" title="glittek" class="lazy-img thumbimg fancybox" rel="slabs">
                            <img src="images/colombo-juparana.jpg" alt="colombo-juparana" class="lazy-loaded"/>
                        </a>
                    </div>      
                    <h4 class="prdtTitle">Colombo Juparana</h4>
                </div>
            </div>

Jquery 代码，

beforeShow: function (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);
    }
};

Answer 1

<script>
      $(document).ready(function(){
           $( ".zoom" ).each(function() {
             var image_src  =    $(this).find('img').attr("src");
             console.log(image_src);
             var str = image_src.split("").reverse().join("");
             var str1 = str.substring(str.lastIndexOf(".")+1,str.lastIndexOf("/"));
             var image_name = str1.split("").reverse().join("");
             console.log(image_name);
            }); 
        }); 
</script>