How to display full resolution image at click of its thumbnail

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • amritpalpathak
    New Member
    • Oct 2010
    • 17
    #1

    How to display full resolution image at click of its thumbnail

    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.


    Code:
    <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.
    Last edited by gits; Oct 15 '10, 02:15 PM. Reason: added code tags
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      You should make a generic function which either takes the image name, ID or a reference to the image itself. Then replace "document.TheIm age." with document.images[imageName]. to reference the correct image.

        Comment

        • RamananKalirajan
          Contributor
          • Mar 2008
          • 608
          #3
          Hi,
          Have a look over this link

          Thanks and Regards
          Ramanan Kalirajan

            Comment

            • amritpalpathak
              New Member
              • Oct 2010
              • 17
              #4
              Problem in Onclick event on image

              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




              Code:
              <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
              Last edited by acoder; Nov 4 '10, 09:06 AM. Reason: Please use [code][/code] tags when posting code.

                Comment

                • acoder
                  Recognized Expert MVP
                  • Nov 2006
                  • 16032
                  #5
                  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:absolu te in CSS) with top/left settings.

                    Comment

                    • amritpalpathak
                      New Member
                      • Oct 2010
                      • 17
                      #6
                      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

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032
                          #7
                          You could set it with JavaScript too:
                          Code:
                          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.

                            Comment

                            • amritpalpathak
                              New Member
                              • Oct 2010
                              • 17
                              #8
                              As you said i add this tag at Line no 63.
                              <img.style.posi tion = "absolute">
                              But it didnt effect.Again clicking on the images replaces a distance to others.

                                Comment

                                • Dormilich
                                  Recognized Expert Expert
                                  • Aug 2008
                                  • 8694
                                  #9
                                  that was not a tag, that was a JavaScript instruction.

                                    Comment

                                    • amritpalpathak
                                      New Member
                                      • Oct 2010
                                      • 17
                                      #10
                                      Ok.but by adding that instrucion,it helped nothing .
                                      Or that instruction is to be add elsewhere in the whole code?

                                        Comment

                                        • Dormilich
                                          Recognized Expert Expert
                                          • Aug 2008
                                          • 8694
                                          #11
                                          I guess that’s because your variable is called image, not img. I guess it belongs in one of the functions.

                                            Comment

                                            • amritpalpathak
                                              New Member
                                              • Oct 2010
                                              • 17
                                              #12
                                              You mean javascript code should be as

                                              <image.style.po sition = "absolute">

                                              ??

                                                Comment

                                                • Dormilich
                                                  Recognized Expert Expert
                                                  • Aug 2008
                                                  • 8694
                                                  #13
                                                  nope. rather something like
                                                  Code:
                                                  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.

                                                    Comment

                                                    • acoder
                                                      Recognized Expert MVP
                                                      • Nov 2006
                                                      • 16032
                                                      #14
                                                      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.

                                                        Comment

                                                        • amritpalpathak
                                                          New Member
                                                          • Oct 2010
                                                          • 17
                                                          #15
                                                          Dormilich,Your code is helpful but not at all.
                                                          Acoder,can you explain a bit how to do that

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...