making dynamic api calls to prettyPhoto lightbox

Question

I am currently working on an interactive photomap using prettyPhoto to show pictures when a point on the map is clicked. Some of the points will show 1 photo and others will show multiple. I had everything working fine if I only use one photo, but now I am adjusting to call multiple photos on the ones that have it, but Im running into an issue with making a prettyPhoto api call. Heres my current code:

    $(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();
    })

I get an invalid character error for the line containing the onclick. I know all the data coming in from the stations variable is correct the issue is in making the prettyPhoto call itself. Is there a way to do this with a normal jquery click function while retaining the correct variables for each link? Or would it be better to use html data attributes, and write a jquery click function to pull those and call prettyPhoto?

You can find the prettyPhoto api documentation here:

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

You can also find the page here: http://adminref.com/NYCPhotoMap/index.html

Answer 1

Looks like I was able to figure it out. The main issue was I wasn't initiating prettyPhoto and I also changed the format of the js objects being pulled in to simplify the code. Well here's the final code I ended up getting:

    $(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);
        });
    })

You can check out the custom map I made for my buddy, an artist in New York. He took pictures of all the subway stations throughout NYC and the points on the map link to each stations pics in a prettyPhoto gallery. Click there to check it out --> http://adminref.com/NYCPhotoMap/index.html

Answer 2

JS strings have to start and end on the same line.

This works:

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

but this doesn't:

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

That's the SyntaxError.

It doesn't help in your overall problem:

... in making the prettyPhoto call itself