Name of a technology

Discussion in 'HTML' started by fulio pen, May 9, 2013.

  1. fulio pen

    fulio pen Guest

    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
    fulio pen, May 9, 2013
    #1
    1. Advertising

  2. 2013-05-09 15:03, fulio pen wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, May 9, 2013
    #2
    1. Advertising

  3. fulio pen

    fulio pen Guest

    On May 9, 9:03 am, "Jukka K. Korpela" <> wrote:
    > 2013-05-09 15:03, fulio pen wrote:
    >
    > > 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.
    >
    > --
    > Yucca,http://www.cs.tut.fi/~jkorpela/


    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, May 9, 2013
    #3
  4. fulio pen

    fulio pen Guest

    On May 9, 9:03 am, "Jukka K. Korpela" <> wrote:
    > 2013-05-09 15:03, fulio pen wrote:
    >
    > > 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.

    >


    > 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.
    >
    > --
    > Yucca,http://www.cs.tut.fi/~jkorpela/


    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
    fulio pen, May 9, 2013
    #4
  5. 2013-05-09 20:21, fulio pen wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, May 9, 2013
    #5
  6. fulio pen

    Ray_Net Guest

    In article <kmgubr$lfp$>, says...
    >
    > 2013-05-09 20:21, fulio pen wrote:
    >
    > > 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.


    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.
    Ray_Net, May 10, 2013
    #6
  7. fulio pen

    richard Guest

    On Thu, 9 May 2013 05:03:43 -0700 (PDT), fulio pen wrote:

    > 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"?
    richard, May 10, 2013
    #7
  8. fulio pen

    Gus Richter Guest

    On 5/9/2013 8:03 AM, fulio pen wrote:
    > 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/>

    --
    Gus
    Gus Richter, May 10, 2013
    #8
  9. fulio pen

    fulio pen Guest

    On May 10, 4:54 pm, Gus Richter <> wrote:
    > On 5/9/2013 8:03 AM, fulio pen wrote:
    >
    > > 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/>
    >
    > --
    > Gus


    Hello, Gus,

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

    fulio pen
    fulio pen, May 11, 2013
    #9
  10. fulio pen

    fulio pen Guest

    On May 11, 3:18 pm, fulio pen <> wrote:
    > On May 10, 4:54 pm, Gus Richter <> wrote:
    >
    >
    >
    >
    >
    >
    >
    >
    >
    > > On 5/9/2013 8:03 AM, fulio pen wrote:

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

    >
    > > --
    > > Gus

    >
    > 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
    fulio pen, May 17, 2013
    #10
  11. fulio pen

    Gus Richter Guest

    On 5/17/2013 6:58 AM, fulio pen wrote:
    >> 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/


    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.

    --
    Gus
    Gus Richter, May 18, 2013
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?iso-8859-1?B?bW9vcJk=?=
    Replies:
    7
    Views:
    819
    Roedy Green
    Jan 2, 2006
  2. ding feng
    Replies:
    2
    Views:
    2,806
    ding feng
    Jun 25, 2003
  3. Bobby Chamness
    Replies:
    2
    Views:
    2,390
    Joe Smith
    Apr 22, 2007
  4. Weng Tianxiang
    Replies:
    2
    Views:
    646
    Weng Tianxiang
    Sep 11, 2007
  5. Jack-2
    Replies:
    3
    Views:
    263
    Jack-2
    Dec 24, 2003
Loading...

Share This Page