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的行的无效字符错误。我知道来自station变量的所有数据都是正确的，问题在于自己调用prettyPhoto。有没有办法用普通的jquery点击功能执行此操作，同时为每个链接保留正确的变量？或者更好的方法是使用html数据属性，并编写一个jquery点击函数来拉取那些并调用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);
        });
    })

您可以查看我为纽约艺术家伙伴制作的自定义地图。他拍摄了整个纽约市所有地铁站的照片，并在地图上的点链接到漂亮的照片库中的每个站点照片。点击那里查看 - ＆gt; http://adminref.com/NYCPhotoMap/index.html

对prettyPhoto灯箱进行动态api调用

2 个答案: