使用动态API调用PrettyPhoto灯箱效果

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。

- mr.pribesh

Answer 1

JavaScript字符串必须在同一行开头和结尾。

以下情况是有效的：

'<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调用本身。

- Rudie

---

我必须使用图像映射区域标签来指定 href 的位置。那么在区域标签中放置 onclick 怎么样？ - mr.pribesh

是的，这是可能的。抱歉我没有仔细研究这个问题，我只是看到了JS错误。请删除\n 或添加' + '。 - Rudie

如果您愿意，我可以删除这个回答，这样其他人就可以给出更有用的回答。 - Rudie

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。

- mr.pribesh

---

结果很棒！但是“按钮”/区域不太明显。 - Rudie

谢谢！我同意，仍在努力找出如何改进它的方法。 - mr.pribesh