How to show full sized image from clicking smaller image

@fmaertensFeb 01.2015

Hi:

Noob here… I have a smaller version of an image that I would like to click and then show the full sized version of the image that I have on another web page.

Question is, what piece of html do I need to do this manoeuvre? I am also thinking of a nice piece of ‘~~[I]~~tooltip[/I]‘ on the hover that says “click here to see the full sized image” or something like that.

I am hours into this already so thanks in advance for any help

to post a comment

HTML

16 Comments(s) _↴

@Kevin2Feb 01.2015 — #The easiest way is to use something like this:

[code=html]<a href="image_large.jpg" title="click here to see the full sized image"><img src="image_small.jpg" alt="your alt description here"></a>[/code]

Now, that's not very elegant. There's a bunch of different ways of displaying images that are much nicer. Many are based on a "lightbox"-type display. I have used fancyBox -- http://fancyapps.com/fancybox/ -- and have been basically happy with it. A bit of a learning curve if you've never used jQuery before, but decent instructions are provided.

@fmaertensauthorFeb 01.2015 — #Great. Thanks for the reply, Kevin... that seems to work out OK. To me, though, it might not be elegant but it's simple... It's not for a site full of img's it's just for the one image - Job Done. Thanks for the fancybox link though... Next time I'm having a cup of tea I might get around to the learning curve ?

@shahid_durraniFeb 05.2015 — #Hi:

Noob here... I have a smaller version of an image that I would like to click and then show the full sized version of the image that I have on another web page.

Question is, what piece of html do I need to do this manoeuvre? I am also thinking of a nice piece of '[I]tooltip[/I]' on the hover that says "click here to see the full sized image" or something like that.

I am hours into this already so thanks in advance for any help[/QUOTE]

In HTML there are many solutions of image large or small ... you should use numerical digits for see the large image.. like this in CSS:-if you are using Hover

#picture {width:100px; height: 250px; background-color:#ffffff;}

#picture a.small, #picture a.small:visited { display:block; width:100px; height:100px; text-decoration:none; background:#ffffff; top:0; left:0; border:0;}

#picture a img {border:0;}

#picture a.small:hover {text-decoration:none; background-color:#000000; color:#000000;}

#picture a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}

#picture a.small:hover .large {display:block; position:absolute; top: 90px; left:150px; width:200px; height:200px; }

its the advanced idea for show the large image from small..

@AdenFeb 05.2015 — #<a href="FullSize.jpg"><img alt="thumb" src="thumb.jpg"></a>

When the above thumb is clicked the browser will display FullSize.jpg sized to fit the client window of the browser and when the cursor moves over it a '+' will appear to signify that clicking the image will display it full size. What I want to do is display the image full size in the first place, without requiring the user to click it to get full size.

@shahid_durraniFeb 06.2015 — #<a href="FullSize.jpg"><img alt="thumb" src="thumb.jpg"></a>

When the above thumb is clicked the browser will display FullSize.jpg sized to fit the client window of the browser and when the cursor moves over it a '+' will appear to signify that clicking the image will display it full size. What I want to do is display the image full size in the first place, without requiring the user to click it to get full size.[/QUOTE]

Great Aden... its nice and so simple code of HTML.there are many ways of coding .thanks for show this too.

Can you please give me code of image that show "small image to large in slow motion" like in 5 sec that image become large????

please show it if you know..

@cootheadFeb 09.2015 — #Hi there shahid durrani,

[indent]

here is a CSS example for you to play with...

[color=navy]
 &lt;!DOCTYPE html&gt;
 &lt;html  lang="en"&gt;
 &lt;head&gt;
 
 &lt;meta charset="utf-8"&gt;
 
 &lt;title&gt;css zoom image in and out&lt;/title&gt;
 
 &lt;style media="screen"&gt;
 body {
 background-color:#f0f0f0;
 } 
 #img-holder {
 position:relative;
 min-height:150px;
 }
 #mask,#pic {
 position:absolute;
 z-index:1;
 left:0;
 right:0;
 margin:auto;
 width:216px;
 padding:4px;
 border:1px solid #006000;
 background-color:#fff;
 box-shadow:5px 5px 5px #666;
 outline:0;
 cursor:pointer;
 }
 #mask {
 z-index:3;
 width:226px;
 height:143px;
 padding:0;
 border:0;
 background-color:transparent;
 box-shadow:none;
 }
 #mask:focus~#pic  {
 -webkit-animation:newsize 5s forwards;
 animation:newsize 5s forwards;
 }
 #mask:focus{
 -webkit-animation:masksize 5s forwards;
 animation:masksize 5s forwards;
 }
 #pic:focus  {
 -webkit-animation:oldsize 5s forwards;
 animation:oldsize 5s forwards;
 }
 @-webkit-keyframes newsize {
 from {
 width:216px;
 padding:4px;
 border:1px solid #006000;
 box-shadow:5px 5px 5px #666;
 }
 to {
 width:648px;
 padding:12px;
 border:3px solid #006000;
 box-shadow:15px 15px 15px #666; 
 }
 }
 @keyframes newsize {
 from {
 width:216px;
 padding:4px;
 border:1px solid #006000;
 box-shadow:5px 5px 5px #666;
 }
 to {
 width:648px;
 padding:12px;
 border:3px solid #006000;
 box-shadow:15px 15px 15px #666; 
 }
 }
 @-webkit-keyframes masksize {
 from {
 width:226px;
 height:143px; 
 }
 to {
 width:0;
 height:0;
 }
 }
 @keyframes masksize {
 from {
 width:226px;
 height:143px; 
 }
 to {
 width:0;
 height:0;
 }
 }
 @-webkit-keyframes oldsize {
 from {
 width:648px;
 padding:12px;
 border:3px solid #006000;
 box-shadow:15px 15px 15px #666; 
 }
 to {
 width:216px;
 padding:4px;
 border:1px solid #006000;
 box-shadow:5px 5px 5px #666;
 }
 }
 @keyframes oldsize {
 from {
 width:648px;
 padding:12px;
 border:3px solid #006000;
 box-shadow:15px 15px 15px #666; 
 }
 to {
 width:216px;
 padding:4px;
 border:1px solid #006000;
 box-shadow:5px 5px 5px #666;
 }
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="img-holder"&gt;
 &lt;span id="mask" tabindex="1"&gt;&lt;/span&gt;
 &lt;img id="pic" src="http://www.coothead.co.uk/images/leaves.png" alt="leaves" tabindex="2"&gt;
 &lt;/div&gt;
 
 &lt;p&gt;
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
 ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
 amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
 faucibus felis. Vivamus at metus eget eros consequat fringilla. 
 Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
 tellus. Praesent felis tortor, scelerisque vitae fringilla 
 non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
 consectetur in nec lacus.
 &lt;/p&gt;&lt;p&gt;
 Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
 lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
 ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
 euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
 et mauris scelerisque tristique. Donec fringilla mauris dolor, 
 sit amet vulputate lacus. Nulla feugiat mattis nulla non 
 tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
 nisi eget neque tempus facilisis eu quis sapien.
 &lt;/p&gt;
 
 
 &lt;/body&gt;
 &lt;/html&gt;[/color]

[/indent]

[i]coothead[/i]

@shahid_durraniFeb 10.2015 — #Hi coothead

First of all thanks for this code..secondly your profile image is too cool.. ?

this CSS code is very much interesting, this leaves image.just look like an animated motion.i have been applied this code on my website.thanks once again for this code.Can you please give me one more code like "image zoom out with in round motion".??

thanks for it

=)

@cootheadFeb 10.2015 — #Hi there shahid durrani,

[indent]
[color=navy].... "image zoom out with in round motion"...[/color][/quote]

I am sorry, but I do not understand the meaning of this new requirement. ?

Can you explain what you mean, with a little more detail?

[/indent]

[i]coothead[/i]

@shahid_durraniFeb 10.2015 — #hi coothead ..

sorry for previous post..

i mean that how in your profile image, image moving in an circle motion.. same as it is i want to moving an image.i want a code for this.if you understand my question then please reply me..

@TiffanyClouserFeb 11.2015 — #or you can use jquery to make it bigger, like this

<img class="img" src="something" onClick="bigger();"/>

and the jquery

<script>

function biggger(){

$('.img').css("width":"150%");

$('.img').css("height":"150%");

}

</script>

@TiffanyClouserFeb 11.2015 — #hello, maybe you can use jquery CSS changing for bigger image on click

like this

<script>

function bigger(){

$(element).css("height":"150%");

}

</script>

you can visit my website http://erimwebdesign.com for futher tutorial

@shahid_durraniFeb 11.2015 — #hello, maybe you can use jquery CSS changing for bigger image on click

like this

<script>

function bigger(){

$(element).css("height":"150%");

}

</script>
[/QUOTE]

thanks for this code tiffany..

here this website is really good.it will help me in clear my doubts related to jquery CSS.thanks for give me this link.=D

i am interested in mobile app development.if anybody interested in mobile app developing he can visit on this link :

*** advert deleted - please do no spam this site ***

@thaonvpFeb 11.2015 — #You try to check this with the lines are

<script>

samller function () {

$ (Element) .css ("height": "50%");

}

</ Script>

@AIONAug 19.2021 — #@thaonvp#1380043 Hello, I´m very very very Noob on HTML.

On your code, what needs to be changed so that the image can expand to the left and not to the right.

Thanks

@Steve_R_JonesmoderatorAug 19.2021 — #{"locked":true}

Also in #HTML _↴

Need to load different image everytime Blogs,Problems with getting the send button to work with a form. (MAILTO used)

Success!

Help @fmaertens spread the word by sharing this article on Twitter...

Tweet This

How to show full sized image from clicking smaller image

16 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

How to show full sized image from clicking smaller image

16 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

16 Comments(s) _↴

Also in #HTML _↴