Name of a technology

[fulio pen]

When opening a web page, there are many small pics. in it, and
clicking one of them will get it enlarged, so can be viewed better.
Closing this large pic. will bring the page with many small pics.
back, so another one can be selected.

What is the name of this technology? Thanks for the information.

fulio pen

 

[Jukka K. Korpela]

When opening a web page, there are many small pics. in it, and
clicking one of them will get it enlarged, so can be viewed better.
Closing this large pic. will bring the page with many small pics.
back, so another one can be selected.

What is the name of this technology? Thanks for the information.

The small pics are commonly called "thumbnails", though the idea is just
that a small version of an image is a link to the full version, in a
broad sense of the word "link". So it could open the full image in a new
window, or in a frame (possibly inline frame), or in the same window (so
that the user needs to use the Back function of his browser).

Usually the smoothest setup is that the thumbnails have just a simple
JavaScript code associated with them, code that changes a larger image
on the same page simply by changing the src attribute of an <img> tag.

 

[fulio pen]

The small pics are commonly called "thumbnails", though the idea is just
that a small version of an image is a link to the full version, in a
broad sense of the word "link". So it could open the full image in a new
window, or in a frame (possibly inline frame), or in the same window (so
that the user needs to use the Back function of his browser).

Usually the smoothest setup is that the thumbnails have just a simple
JavaScript code associated with them, code that changes a larger image
on the same page simply by changing the src attribute of an <img> tag.

Thanks a lot for the information. Further appreciate for recommending
some online tutorials on the skills. I like to learn it. Thanks
again.

fulio pen

 

[fulio pen]

Usually the smoothest setup is that the thumbnails have just a simple
JavaScript code associated with them, code that changes a larger image
on the same page simply by changing the src attribute of an <img> tag.

Hi, Yucca:

I found a piece of software on the internet for this purpose, Its
name is IrfanView. Your method seems even simpler than IrfanView.
Change the size of image with Javascript. This is wonderful. Thanks.

fulio pen

 

[Jukka K. Korpela]

I found a piece of software on the internet for this purpose, Its
name is IrfanView. Your method seems even simpler than IrfanView.
Change the size of image with Javascript.

What I meant was changing the src attribute value. You would still have
each image in two sizes, full size and thumbnail size, and IrfanView is
one way of creating the thumbnails.

If you have just the full-size images and let browsers construct the
thumbnails, then all the full-size images would have to be downloaded
before the thumbnails can be shown. This would make sense in an
application-like setup where the full images are always downloaded (or
available as part of delivered application), but not otherwise.

 

[Ray_Net]

What I meant was changing the src attribute value. You would still have
each image in two sizes, full size and thumbnail size, and IrfanView is
one way of creating the thumbnails.

If you have just the full-size images and let browsers construct the
thumbnails, then all the full-size images would have to be downloaded
before the thumbnails can be shown. This would make sense in an
application-like setup where the full images are always downloaded (or
available as part of delivered application), but not otherwise.

Perhaps a bad id is to change by javascript
from <img src="smiley.gif" alt="Smiley face" height="42" width="42">
to <img src="smiley.gif" alt="Smiley face">

So there is no need of Irfanview to contruct a thumbnail.

 

[richard]

When opening a web page, there are many small pics. in it, and
clicking one of them will get it enlarged, so can be viewed better.
Closing this large pic. will bring the page with many small pics.
back, so another one can be selected.

What is the name of this technology? Thanks for the information.

fulio pen

are you thinking perhaps of a "modal window"?

 

[Gus Richter]

When opening a web page, there are many small pics. in it, and
clicking one of them will get it enlarged, so can be viewed better.
Closing this large pic. will bring the page with many small pics.
back, so another one can be selected.

What is the name of this technology? Thanks for the information.

Some demo examples with CSS only:

<http://www.cssplay.co.uk/menu/clickgallery.html#pic10>
<http://www.cssplay.co.uk/menu/click-gallery-preview.html#pic2>
<http://www.cssplay.co.uk/menu/double-click-gallery.html#pic5>
<http://www.cssplay.co.uk/menu/cssplay-click-zoom-fly.html>
<http://www.cssplay.co.uk/menu/cssplay-holiday-2013-photos.html>
<http://www.cssplay.co.uk/menu/cssplay-fly-in-out-gallery.html>
<http://www.cssplay.co.uk/menu/cssplay-animated-cube-gallery.html>
<http://www.cssplay.co.uk/menu/cssplay-thumbnail-slideshow.html>

Check out the site for many other demos:
<http://www.cssplay.co.uk/menu/>

 

[fulio pen]

Some demo examples with CSS only:

<http://www.cssplay.co.uk/menu/clickgallery.html#pic10>
<http://www.cssplay.co.uk/menu/click-gallery-preview.html#pic2>
<http://www.cssplay.co.uk/menu/double-click-gallery.html#pic5>
<http://www.cssplay.co.uk/menu/cssplay-click-zoom-fly.html>
<http://www.cssplay.co.uk/menu/cssplay-holiday-2013-photos.html>
<http://www.cssplay.co.uk/menu/cssplay-fly-in-out-gallery.html>
<http://www.cssplay.co.uk/menu/cssplay-animated-cube-gallery.html>
<http://www.cssplay.co.uk/menu/cssplay-thumbnail-slideshow.html>

Check out the site for many other demos:
<http://www.cssplay.co.uk/menu/>

Hello, Gus,

The websites are wonderful. Only html and css are employed. I really
like to learn the skills.

fulio pen

 

[fulio pen]

Hello, Gus,

The websites are wonderful.  Only html and css are employed.  I really
like to  learn the skills.

fulio pen

Please open the following web page. The thumbnails and large pics.
are good enough for me.

http://sports.yahoo.com/photos/odd-and-premature-retirements-1368643658-slideshow/

fulio pen

 

[Gus Richter]

Please open the following web page. The thumbnails and large pics.
are good enough for me.

http://sports.yahoo.com/photos/odd-and-premature-retirements-1368643658-slideshow/

So, just use as per:
<http://www.cssplay.co.uk/menu/clickgallery.html#pic6>

Look at the source of the page - it's all there:

The stylesheet is in the Style element, within the head section.

The markup is in the div id'd as "info", within the body section.

Edit to your needs and using your pics.