How to show the full resolution image at clicking on thumnail

amritpalpathak · November 29, 2010, 12:56pm

There are 5 copies of the same images are placed in a folder i.e. large(1024768),medium(500375),small(240180),thu mnail(7575),square(10050) in size…
The following code upload number of Geocoded images(square size) when the page loads.I want when someone click on the any Geocoded image on the page ,it should show the large image(1024768) of the same.And further click on the large image it must show again the square size image of the same.
Following is the actual code.It is in .js file.

var epsg4326 = new OpenLayers.Projection(“EPSG:4326”);
var OSVMain = (function() {
```
var map, markers, map_move_timeout;
```
```
var photos = {};
```
```
function mapChange() {
```
```
    if( map_move_timeout )
```

        clearTimeout(map_move_timeout);

    map_move_timeout = setTimeout(mapChangeTimeout, 500);

```
    updateLinks();
```
```
}
```
```
function updateLinks() {
```

    var center = OSV.getMapCenter(map);

```
    var zoom = map.getZoom();
```

    $('#permalink').attr('href',OSV.getURLBase()+'?lat='+center.lat+'&lon='+center.lon+'&zoom='+zoom);

    $('#kmllink').attr('href',getLocateLink('kml'));

```
}
```
```
function getLocateLink(format) {
```

    var extent = OSV.getMapExtent(map);

    var url = OSV.getURLBase()+'/api/photos/locate.'+format+'?bbox=';

    url += [ extent.left, extent.bottom, extent.right, extent.top].join(',');

```
    return url;
```
```
}
```
```
function mapChangeTimeout() {
```
```
    map_move_timeout = null;
```
```
    var url = getLocateLink('json');
```

    $.get( url, null, photosLoaded, 'json' );

```
}
```
```
function photosLoaded(json) {
```
```
    var new_photos = {};
```

    var size = new OpenLayers.Size(50, 50);

    var offset = new OpenLayers.Pixel(-25, -25);

    for( var i = 0, l = json.length; i &lt; l; ++i ) {

```
        var p = new OSVPhoto(json[i]);
```
```
        if( photos[p.data.id] ) {
```

            new_photos[p.data.id] = photos[p.data.id];

```
            photos[p.data.id] = null;
```
```
        } else {
```

            var position = new OpenLayers.LonLat(p.data.lon,p.data.lat);

            var icon = new OpenLayers.Icon(p.url('square'), size, offset);

            p.marker  = new OpenLayers.Marker(position.clone().transform(epsg4326, map.getProjectionObject()), icon);

```
            new_photos[p.data.id] = p;
```

            markers.addMarker(p.marker);

```
        }
```
```
    }
```
```
    for( var k in photos ) {
```
```
        var p = photos[k];
```
```
        if( p && p.marker )
```

            markers.removeMarker(p.marker);

```
    }
```
```
    photos = new_photos;
```
```
}
```
```
function setup() {
```
```
    var vectors;
```
```
    var popup;
```

    map = new OpenLayers.Map($('#map').get(0), {

```
        controls: [
```

            new OpenLayers.Control.ArgParser(),

            new OpenLayers.Control.Attribution(),

            new OpenLayers.Control.LayerSwitcher(),

            new OpenLayers.Control.Navigation(),

            new OpenLayers.Control.PanZoomBar()

```
        ],
```
```
        units: "m",
```
```
        maxResolution: 156543.0339,
```
```
        numZoomLevels: 20,
```

        displayProjection: new OpenLayers.Projection("EPSG:4326")

```
    });
```

    var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {

```
        displayOutsideMaxExtent: true,
```
```
        wrapDateLine: true
```
```
    });
```
```
    map.addLayer(mapnik);
```

    var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender", {

```
        displayOutsideMaxExtent: true,
```
```
        wrapDateLine: true
```
```
    });
```
```
    map.addLayer(osmarender);
```

    var numZoomLevels = Math.max(mapnik.numZoomLevels, osmarender.numZoomLevels);

    var start = OSV.getStartLocation();

    var numzoom = map.getNumZoomLevels();

    if (start.zoom &gt;= numzoom) start.zoom = numzoom - 1;

    map.setCenter(start.pos.clone().transform(epsg4326, map.getProjectionObject()), start.zoom);

```
    OSV.setupMapEventHandlers(map);
```

    map.events.register("moveend", map, mapChange);

    map.events.register("zoomend", map, mapChange);

```
    mapChange();
```

    markers = new OpenLayers.Layer.Markers("Markers", {

```
        displayInLayerSwitcher: false,
```
```
        numZoomLevels: numZoomLevels,
```

        maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),

```
        maxResolution: 156543,
```
```
        units: "m",
```
```
        projection: "EPSG:900913"
```
```
    });
```
```
    map.addLayer(markers);
```
```
}
```
```
return {
```
```
    setup: setup,
```
```
    1:1
```
```
};
```
})();
$(function(){
```
OSVMain.setup();
```
});

Any suggestions ?
Thanking you