Question

I am using a jQuery plugin that has an event handler whose return function gives me the HTMLImageElement object as an event property e.imageTarget. The source of this e.imageTarget is from a bunch of <img> inside a particular <div>.

Problem: I want to pass a pair of numbers 42.345573, -71.098326 into the if() loop in the code shown below. How can I do this?

My failed attemps:
Create a <div> containing the 2 values, and place it after the <img> being grabbed. Then from within the if() loop, use jQuery’s .next() on the <img> to select the <div>. However my jquery selection code doesnt seem to work! I tried this using console.log(e.imageTarget.previous()); and got the error Uncaught TypeError: Object #<HTMLImageElement> has no method 'previous'. Is using jQuery DOM transversal selectors possible?

Bunch of Imgs being grabbed from:

<img src="http://www.google.com/images/experiments/nav_logo78.png">
<img src="http://www.google.com/images/experiments/nav_logo78.png">
<img src="http://www.google.com/images/experiments/nav_logo78.png">
<div id="lat">42.345573</div>
<div id="lng">-71.098326</div>

e.imageTarget:
<img style=​"display:​ block;​ width:​ 170px;​ height:​ 323px;​ position:​ absolute;​ top:​ 0px;​ left:​ 130px;​ opacity:​ 1;​ " src=​"http:​/​/​www.google.com/​images/​experiments/​nav_logo78.png" width=​"170" height=​"323">​

Code:

Galleria.ready(function(options) {
    // Load Streetview after image related to Streetview has finished loading
    this.bind("loadfinish", function(e) {
        if(e.imageTarget.src.search('png') != -1) {
            console.log(e.imageTarget);
            // Create Street View
            var fenway = new google.maps.LatLng(42.345573,-71.098326);
            var panoOptions = {
                position: fenway
          };
            var panorama = new google.maps.StreetViewPanorama(document.getElementById("streetview"), panoOptions);
        }
    });
});

Additional Info
I cannot simply create a variable, set it to the values i want and use the variable inside the if() loop because I will need to create a unique variable for each datapoint that I have. The number of datapoints changes depending on the results retrieved, and I did not attempt to create dynamically named variables like marker1, marker2 etc

Answer 1

If you want to use jQuery, you can add attributes to the img element containing the ‘lat’ and ‘lng’ values.

<img src="path/image.png" data-coordinates="{lat:42,lng:-71}">

Then, with jQuery:

//pass your image selector, just using 'img' for this example's sake
var coordinates = $('img').data("coordinates");
// coordinates.lat = 42
// coordinates.lng = -71

If you dont want to use jquery, you could add the ‘lat’ and ‘long values as individual data attributes on the img element, then use javascript’s getAttribute function to get the values.

<img src="path/image.png" data-lat="41" data-lng="-71">

Then, with javascript:

e.imageTarget.getAttribute("data-lat") // '42'
e.imageTarget.getAttribute("data-lng") // '-71'

Additionally, you’re probably getting an error with e.imageTarget.previous() because it isn’t a jQuery object. You would need to do $(e.imageTarget).previous().