对 prettyPhoto 灯箱进行动态 api 调用

Question

我目前正在使用 prettyPhoto 制作交互式照片地图，以在单击地图上的某个点时显示图片。有些点将显示 1 张照片，而其他点将显示多张。如果我只使用一张照片，我的一切工作都很好，但现在我正在调整以在拥有它的照片上调用多张照片，但我在进行 prettyPhoto api 调用时遇到了问题。这是我当前的代码：

    $(document).ready(function(){
        var baseUrl = "http://ninjastatus.com/last_stop/Bronx/"
        var checkMultiple = function (stop) {
            if (stop.imgName && stop.imgName.match('|')) {
                var images = stop.imgName.split('|');
                for (var i = images.length - 1; i >= 0; i--) {
                    images[i] = baseUrl + images[i].replace('\t\n', '').trim();
                };
                return images;
            }
            if (stop.imgName && stop.imgName.replace('\t\n', '').trim() !== undefined) {
                var images = baseUrl + stop.imgName.replace('\t\n', '').trim();
                return images;
            }
        }

        for(var i=0; i<stations.length; i++){
            var loc = stations[i].loc;
            var name = stations[i].name;
            var imgs = checkMultiple(stations[i]);
            var desc = "test description";
            $('#subway').append('<a href="#" alt="' + name + '" title="' + name + 
                '" onclick="$(this).prettyPhoto(imgs,name,desc); return false;">
                <area shape="circle" coords="' + loc + '" nohref="nohref" /></a>');
        }
        $('img[usemap]').rwdImageMaps();
    })

我收到包含 onclick 的行的无效字符错误。我知道所有来自stations 变量的数据都是正确的，问题在于使prettyPhoto 调用本身。有没有办法使用普通的 jquery click 函数来做到这一点，同时为每个链接保留正确的变量？还是使用 html 数据属性，并编写一个 jquery click 函数来拉取这些并调用 prettyPhoto 会更好？

您可以在此处找到 prettyPhoto api 文档：

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation

您还可以在此处找到该页面： http://adminref.com/NYCPhotoMap/index.html

Answer 1

JS 字符串必须在同一行开始和结束。

这行得通：

'<a href="#" alt="' + name + '" title="' + name +
  '" onclick="$(this).prettyPhoto(imgs,name,desc); return false;">'

但这不是：

'" onclick="$(this).prettyPhoto(imgs,name,desc); return false;">
  <area shape="circle" coords="' + loc + '" nohref="nohref" /></a>'

那是SyntaxError。

它对你的整体问题没有帮助：

...让 prettyPhoto 自己调用

Answer 2

看起来我能够弄清楚。主要问题是我没有启动 prettyPhoto，而且我还更改了被拉入的 js 对象的格式以简化代码。好吧，这是我最终得到的最终代码：

    $(document).ready(function(){
        function loopIt(stations) {
            var stationed = [];
            for(var i=0; i<stations.length; i++){
            var loc = stations[i].loc;
            var name = stations[i].name;
            stationed.push('<a href="#" alt="' + name + '" title="' + name + 
                '" data-i="' + i + '"><area shape="circle" coords="' + loc + '" /></a>');
            }
            return stationed.join('\n');
        }
        $('#subway').append(loopIt(stations));
        $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
        $('img[usemap]').rwdImageMaps();
        $('a').on('click', function(e){
            e.preventDefault();
            var ib = $(this).data('i');
            imgs = stations[ib].imgName;
            var name = [];
            var desc = [];
            for(var i=0; i<imgs.length; i++){
                name.push(stations[ib].name);
                desc.push(name[0] + ' - MTA Lines: ' + stations[ib].line);
            }
            $.prettyPhoto.open(imgs,name,desc);
        });
    })

您可以查看我为纽约的艺术家好友制作的自定义地图。他拍摄了纽约市所有地铁站的照片，地图上的点链接到漂亮照片库中的每个车站图片。点击查看 --> http://adminref.com/NYCPhotoMap/index.html