How to display full resolution image at click of its thumbnail

17 New Member

I have made the html+javascript code.According to which when the page loaded the image size gets reduced to 50,50 and onclicking on it ,size increases to 500,500,but i done it with the one copy of image

But i want the click at thumnail of photos and display the full resolution of thumnail.

Expand|Select|Wrap|Line Numbers

 <html>

<body>

<body onload="changeIt();">

<head>
 
<script langauge="javascript">

var count=1;

function changeIt()

{
 
var width=50;

var height=50;

document.TheImage.width=width

document.TheImage.height=height
 
}

function changeeIt()
 
{

if(count==1)

{

var width=500

var height=500

document.TheImage.width=width

document.TheImage.height=height

count=2;

}

else if(count==2)

{

var amrit1=50

var pal=50

document.TheImage.width=amrit1

document.TheImage.height=pal

count=1;
 
}
 
}
 
</script>

</head>
 
<img src="/home/administrator/Desktop/aa" name="TheImage" onclick="changeeIt();">
 
<BR>
 
</body>

</html>

Please somebody help ,thanks in advance.

Oct 15 '10 #1

Subscribe Reply

4732

acoder

16,027

Recognized Expert Moderator MVP

You should make a generic function which either takes the image name, ID or a reference to the image itself. Then replace "document.TheImage." with document.images[imageName]. to reference the correct image.

Oct 18 '10 #2

RamananKalirajan

608

Contributor

Hi,
Have a look over this link

Thanks and Regards
Ramanan Kalirajan

Oct 18 '10 #3

amritpalpathak

New Member

i have a html cum javascript code.There are 2 images one is thumnail and other is full resolution of the same.When somebody click the thumnail ,the full resl. would show and when click of full resl. the thumnail would show.It is going well but problem is that ,when click of thumnail ,it replaces a distance to other images that is looking very strange.
I want that after clicking on thumnail it shoult show the full res. without effecting the other images on the same page.Please take the look at "http://highslide.com/".I want something like that.

This is my html cum javascript code

Expand|Select|Wrap|Line Numbers

 <html>

<head>

<script>

window.onload = start;

function start ()

{

allSmall ();

allTriggers ();

}
 
function allTriggers ()

{

var images = document.getElementsByTagName("img");

for (var i = 0, image; image = images[i]; i++)

image.onclick = othersSmallThisLarge;

}

function smallImage (image)

{

with (image.style) { width = 50; height = 50; }

}
 
function largeImage (image)

{

with (image.style) { width = 500; height = 500; }

}
 
function switchSize (image)

{
 
if ( (image.offsetWidth != 500) && (image.offsetHeight != 500) )

{
 
largeImage (image);
 
}

else

{

smallImage (image);

}
 
}

function switchResolution (image)

{

var previous = image.src;

image.src = image.getAttribute("data");

image.setAttribute("data", previous);

delete previous;

}

function allSmall ()

{

var images = document.getElementsByTagName("img");

for (var i = 0, image; image = images[i]; i++)

smallImage (image);

}

function othersSmallThisLarge ()

{

switchResolution (this);

switchSize (this);

}

</script>

</head>

<body>
 
<img src="thumnail's path" data="full resl'path" />

<img src="thumnail" data="full" />

</body>

</html>

You can also check this by running at your on system.

Thanks in advance

Nov 4 '10 #4

acoder

16,027

Recognized Expert Moderator MVP

If you want something like highslide, you'll need to move the image out of the flow of the page. Make the image position absolute (position:absolute in CSS) with top/left settings.

Nov 4 '10 #5

amritpalpathak

New Member

Thanks for reply.I am new to javascript and know not more abou CSS.Even i dont know where to put Css code.Please can you elaborate or add Css code into above code.

Hope you would reply

Nov 4 '10 #6

acoder

16,027

Recognized Expert Moderator MVP

You could set it with JavaScript too:

Expand|Select|Wrap|Line Numbers

img.style.position = "absolute";

However, I think you'd probably be better served reading up on a tutorial to grasp the basics (see Offsite Links sticky for JavaScript links) first, or using a library/framework to make things easier for you.

Nov 4 '10 #7

amritpalpathak

New Member

As you said i add this tag at Line no 63.
<img.style.position = "absolute">
But it didnt effect.Again clicking on the images replaces a distance to others.

Nov 5 '10 #8

Dormilich

8,658

Recognized Expert Moderator Expert

that was not a tag, that was a JavaScript instruction.

Nov 5 '10 #9

amritpalpathak

New Member

Ok.but by adding that instrucion,it helped nothing .
Or that instruction is to be add elsewhere in the whole code?

Nov 5 '10 #10

Dormilich

8,658

Recognized Expert Moderator Expert

I guess that’s because your variable is called image, not img. I guess it belongs in one of the functions.

Nov 5 '10 #11

amritpalpathak

New Member

You mean javascript code should be as

<image.style.position = "absolute">

??

Nov 5 '10 #12

Dormilich

8,658

Recognized Expert Moderator Expert

nope. rather something like

Expand|Select|Wrap|Line Numbers

 function allTriggers ()

{

var images = document.getElementsByTagName("img");

for (var i = 0, image; image = images[i]; i++) {

image.onclick = othersSmallThisLarge;

image.style.position = "absolute";

}

}

though I’m not sure, whether that is the right function to put it in.

Nov 5 '10 #13

acoder

16,027

Recognized Expert Moderator MVP

It'd be better in the large() function.

You'd also have to change it back when you want to make it small again. To avoid this, you could have a ready large image hidden initially which is shown when the thumbnail is clicked.

Nov 5 '10 #14

amritpalpathak

New Member

Dormilich,Your code is helpful but not at all.
Acoder,can you explain a bit how to do that

Nov 6 '10 #15

amritpalpathak

New Member

Expand|Select|Wrap|Line Numbers

  function allTriggers ()

 {

 var images = document.getElementsByTagName("img");

 for (var i = 0, image; image = images[i]; i++) {

 image.onclick = othersSmallThisLarge;

 image.style.position = "absolute";

 }

 }

This code fullfilled that i wants.but when we click on thumnail it show the full resolution picture of the same thumnail but it still show the other image's thumnail(near by of thumnail which you have clicked) under the full resol of the same

Any ideas?

Nov 6 '10 #16

amritpalpathak

New Member

i have a html cum javascript code.There is thumnail on the page .When somebody click the thumnail ,the full resolution of the same image would show and when click of full resolution the thumnail would show.It is going well with one thumanil of the page
when there are 2 thumanil on the same page,clicking on first thumnail shows the full resolution of the same but the 2nd thumnail is also showing at the back of full resolution.It looks like full resolution image is transparent..

Here is the code ,you can try it by running at your own computer.

Expand|Select|Wrap|Line Numbers

  
      <html>

      <head>

      <script>

         window.onload = start;

         function start () 

       {

         allSmall ();

         allTriggers ();

       }
 
       function allTriggers () 

        {

       var images = document.getElementsByTagName("img");

       for (var i = 0, image; image = images[i]; i++)

{

       image.onclick = othersSmallThisLarge;

       image.style.position = "absolute";

        }

}

            function smallImage (image) 

          {

              with (image.style) { width = 50; height = 50; }

          }
 
        function largeImage (image)

           {

        with (image.style) { width = 500; height = 500; }

           }
 
           function switchSize (image) 

        {
 
          if ( (image.offsetWidth != 500) && (image.offsetHeight != 500) ) 

            {
 
          largeImage (image);
 
        } 

          else 

                  {

                    smallImage (image);

                  }
 
   }

  function switchResolution (image)

     {

       var previous = image.src;

       image.src = image.getAttribute("data");

       image.setAttribute("data", previous);

       delete previous;

      }

         function allSmall () 

        {

         var images = document.getElementsByTagName("img");

         for (var i = 0, image; image = images[i]; i++)

         smallImage (image);

        }

            function othersSmallThisLarge () 

          {

            switchResolution (this);

            switchSize (this);

          }

              </script>

              </head>

              <body>

               <images.style.position = "absolute"> 
 
     <img src="thumnail'path" data="full resolution image'path " />
 
     <img src="thumnail'path" data="full resolution image'path " />
 
           </body>

           </html>

Any suggestions ?

Thanx

Nov 14 '10 #17

amritpalpathak

New Member

There are 5 copies of the same images are placed in a folder i.e. large(1024*768),medium(500*375),small(240*180),thu mnail(75*75),square(100*50) 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(1024*768) of the same.And further click on the large image it must show again the square size image of the same.
Following is a code of page

Expand|Select|Wrap|Line Numbers

 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 < 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 >= 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

Nov 29 '10 #18

amritpalpathak

New Member

Expand|Select|Wrap|Line Numbers

 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 < 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(epsg4 326,  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 >= 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);

Any suggestions ?

Thanking you

}

return {

setup: setup,

1:1

};

})();

$(function(){

OSVMain.setup();

});

Any suggestions ?
Thanking you

Dec 5 '10 #19

Similar topics

Display larger size image

by: Deepa | last post by:

Hi All, I'm facing problem displaying image of size 5000X5000 .My window size is smaller than image size so i'm not able to see the complete image.i can use scroll bars to view the image but i...

HTML / CSS

Print high-resolution image

by: Ben Amada | last post by:

Hi group. I'm going to display a low resolution image in an HTML page. On the web server, I have a high resolution version of that image. If I display the high resolution image in the browser...

Javascript

Image Click working before Page Load

by: Varangian | last post by:

How can I make a Image Click working before Page Load event? The Problem I'm getting is that I'm loading an ImageButton dynamically from a Web User Control. How can I make the Web User Control...

C# / C Sharp

Getting the index of image click event in a datagrid

by: Brett Wesoloski | last post by:

I am having problems getting the index of an image click event in a datagrid. Every time I look at the index it is -1. What I am trying to do is get the index of the row in which the imagebutton...

C# / C Sharp

ASP(Image Click)

by: Ahmd | last post by:

Pls look at this code, i want to call this function from an image click event. CPage=Cint(Request.Form("CurrentPage")) 'get CPage value from form's CurrentPage field Select Case...

ASP / Active Server Pages

display full resume

by: nagamalli26 | last post by:

hi iam new php i want php code for display full resume please send my mail_id

PHP

Display a jpeg image file in c.

by: ranjeshh | last post by:

How do I display a jpeg image using c..Please gude me as I m new to image processing..I would appreciate if someone could give me a working code with explanation

C / C++

Simple Toggle checkbox function on IMAGE click

by: ameshkin | last post by:

I have a checkbox with an ID of svc_tp_1, and an image that corresponds with this checkbox below it. <input type="checkbox" name="checkbox" id="svc_tp_1" value="svc_tp_1" / <img...

Javascript

How to display both an Image and Data from a MySQL database in the same page.

by: msmjsuarez | last post by:

how can i display both image and other information in the web page using php? i'm using mysql database. I do displaying the image only but i want to display both other information from the database...

MySQL Database

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp