How can I make a thumbnail img show a full size image when clicked

Question

Normally you have an image tage with the  src  as the source of the image and the alt  as the alternative text    lt img src  image1 gif  alt  Image 1    gt    Can you have something like is     lt img src  image1 gif  alt  image2 gif    gt    So that means the  src  has an image source and the alt also has an image source   What I want to do is pull 2 images from flickr using the flickr api  a thumb image and a normal sized image  and when the user clicks on the thumb  the normal sized image is shown   I have tried something like this    lt a href  image2 gif   gt  lt img src  image1 gif   gt  lt  a gt       but I get the default  not found  image as the thumb  even though the image does really exist    I am using JQuery  Javascript   Any help  suggestions or even alternatives are all welcome and appreciated   Thanks    Thanks for the reply Sam   I don t like lightbox because I find it too slow and fancy   but I like geowa4 s idea   but please  keep your answers coming     thanks

User · Answer

lt img src  thumb gif  onclick  this src  full size gif     gt    Of course you can change the onclick event to load the image wherever you want

User · Answer

Here is the Angular version of LightBox  Just Awesome     Note   I have put this answer hence No Js library has been mentioned under the Tags   angular-bootstrap-lightbox   lt ul ng-controller  GalleryCtrl  gt     lt li ng-repeat  image in images  gt       lt a ng-click  openLightboxModal  index   gt         lt img ng-src    image thumbUrl    class  img-thumbnail  gt       lt  a gt     lt  li gt   lt  ul gt

User · Answer

This won t do what you are expecting    lt img src  image1 gif  alt  image2 gif    gt    The ALT attribute is text-only--it won t do anything special if you give it an image URL    If you want to initially display a low res image  then replace it with a high res image  you could do some javascript coding to swap out the images  Or  perhaps load the image into a div which has a background pattern filled with the low res image  Then  when the high res image loads  it ll load overtop the background   Unfortunately  there s no direct way to do this   Your second attempt will create a link to image2  but actually display image1    lt a href  image2 gif   gt  lt img src  image1 gif   gt  lt  a gt    If you want to popup a higher res version   Sam s suggestion is a good idea     This CSS might work for you  it works for me in Firefox 3     lt html gt   lt head gt       lt style gt           lowres   background-image  url  low-res png          lt  style gt   lt  head gt   lt body gt       lt div class  lowres  style  height 500px  width 500px  gt           lt img src  hi-res png    gt       lt  div gt   lt  body gt   lt  html gt    In that example  you have to set the div height width to that of the image  It will actually load both images simultaneously  but presuming the low-res one loads quick  you might see it first while the hi-res image downloads

User · Answer

Here is the Angular version of LightBox  Just Awesome     Note   I have put this answer hence No Js library has been mentioned under the Tags   angular-bootstrap-lightbox   lt ul ng-controller  GalleryCtrl  gt     lt li ng-repeat  image in images  gt       lt a ng-click  openLightboxModal  index   gt         lt img ng-src    image thumbUrl    class  img-thumbnail  gt       lt  a gt     lt  li gt   lt  ul gt

User · Answer

That sort of functionality is going to require some Javascript  but it is probably possible just to use CSS  in browsers other than IE6 amp 7

User · Answer

The   lt a href  image2 gif   gt  lt img src  image1 gif   gt  lt  a gt    technique has always worked for me   I used it to good effect in my Super Bowl diary  but I see that the scripts I used are broken   Once I get them fixed I will edit in the URL

User · Answer

The   lt a href  image2 gif   gt  lt img src  image1 gif   gt  lt  a gt    technique has always worked for me   I used it to good effect in my Super Bowl diary  but I see that the scripts I used are broken   Once I get them fixed I will edit in the URL

User · Answer

This won t do what you are expecting    lt img src  image1 gif  alt  image2 gif    gt    The ALT attribute is text-only--it won t do anything special if you give it an image URL    If you want to initially display a low res image  then replace it with a high res image  you could do some javascript coding to swap out the images  Or  perhaps load the image into a div which has a background pattern filled with the low res image  Then  when the high res image loads  it ll load overtop the background   Unfortunately  there s no direct way to do this   Your second attempt will create a link to image2  but actually display image1    lt a href  image2 gif   gt  lt img src  image1 gif   gt  lt  a gt    If you want to popup a higher res version   Sam s suggestion is a good idea     This CSS might work for you  it works for me in Firefox 3     lt html gt   lt head gt       lt style gt           lowres   background-image  url  low-res png          lt  style gt   lt  head gt   lt body gt       lt div class  lowres  style  height 500px  width 500px  gt           lt img src  hi-res png    gt       lt  div gt   lt  body gt   lt  html gt    In that example  you have to set the div height width to that of the image  It will actually load both images simultaneously  but presuming the low-res one loads quick  you might see it first while the hi-res image downloads

User · Answer

A scriptless  CSS-only experimental approach with image pre-loadingBONUS  and which only works in Firefox    lt style gt  a zoom  full   display  none    a zoom active  thumb   display  none    a zoom active  full   display  inline     lt  style gt    lt a class  zoom  href     gt   lt img class  thumb  src  thumbnail png   gt   lt img class  full  src  fullsize png   gt   lt  a gt    Shows the thumbnail by default  Shows the full size image while the mouse button is clicked and held down  Goes back to the thumbnail as soon as the button is released  I m in no way suggesting that this method be used  it s just a demo of a CSS-only approach that  very  partially solves the problem  With some z-index   relative position tweaks  it could work in other browsers too

User · Answer

lt img src  thumb gif  onclick  this src  full size gif     gt    Of course you can change the onclick event to load the image wherever you want

User · Answer

Use this as an example  https   www w3schools com jquerymobile tryit asp filename tryjqmob popup image   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D   lt link rel  stylesheet  href  https   code jquery com mobile 1 4 5 jquery mobile-1 4 5 min css  gt  x000D   lt script src  https   code jquery com jquery-1 11 3 min js  gt  lt  script gt  x000D   lt script src  https   code jquery com mobile 1 4 5 jquery mobile-1 4 5 min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div data-role  page  gt  x000D     lt div data-role  header  gt  x000D       lt h1 gt Welcome To My Homepage lt  h1 gt  x000D     lt  div gt  x000D   x000D     lt div id  pageone  data-role  main  class  ui-content  gt  x000D       lt p gt Click on the image to enlarge it  lt  p gt  x000D       lt p gt Notice that we have added a  back button  in the top right corner  lt  p gt  x000D       lt a href   myPopup  data-rel  popup  data-position-to  window  gt  x000D       lt img src  https   lh3 googleusercontent com 8XQPMmZImaDsSyEPbAptXOHQYZKP rggu tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36- s136  alt  Skaret View  style  width 200px   gt  lt  a gt  x000D   x000D       lt div data-role  popup  id  myPopup  gt  x000D         lt p gt This is my picture  lt  p gt   x000D         lt a href   pageone  data-rel  back  class  ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right  gt Close lt  a gt  lt img src  https   lh3 googleusercontent com 8XQPMmZImaDsSyEPbAptXOHQYZKP rggu tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36- s136  style  width 800px height 400px   alt  Skaret View  gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div data-role  footer  gt  x000D       lt h1 gt Footer Text lt  h1 gt  x000D     lt  div gt  x000D   lt  div gt   x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

alt is text that is displayed when the image can t be loaded or the user s browser doesn t support images  e g  readers for blind people    Try using something like lightbox   http   www lokeshdhakar com projects lightbox2   update  This library maybe better as its based on jQuery which you have said your using http   leandrovieira com projects jquery lightbox

User · Answer

alt is text that is displayed when the image can t be loaded or the user s browser doesn t support images  e g  readers for blind people    Try using something like lightbox   http   www lokeshdhakar com projects lightbox2   update  This library maybe better as its based on jQuery which you have said your using http   leandrovieira com projects jquery lightbox

User · Answer

The   lt a href  image2 gif   gt  lt img src  image1 gif   gt  lt  a gt    technique has always worked for me   I used it to good effect in my Super Bowl diary  but I see that the scripts I used are broken   Once I get them fixed I will edit in the URL

User · Answer

This won t do what you are expecting    lt img src  image1 gif  alt  image2 gif    gt    The ALT attribute is text-only--it won t do anything special if you give it an image URL    If you want to initially display a low res image  then replace it with a high res image  you could do some javascript coding to swap out the images  Or  perhaps load the image into a div which has a background pattern filled with the low res image  Then  when the high res image loads  it ll load overtop the background   Unfortunately  there s no direct way to do this   Your second attempt will create a link to image2  but actually display image1    lt a href  image2 gif   gt  lt img src  image1 gif   gt  lt  a gt    If you want to popup a higher res version   Sam s suggestion is a good idea     This CSS might work for you  it works for me in Firefox 3     lt html gt   lt head gt       lt style gt           lowres   background-image  url  low-res png          lt  style gt   lt  head gt   lt body gt       lt div class  lowres  style  height 500px  width 500px  gt           lt img src  hi-res png    gt       lt  div gt   lt  body gt   lt  html gt    In that example  you have to set the div height width to that of the image  It will actually load both images simultaneously  but presuming the low-res one loads quick  you might see it first while the hi-res image downloads

User · Answer

This won t do what you are expecting    lt img src  image1 gif  alt  image2 gif    gt    The ALT attribute is text-only--it won t do anything special if you give it an image URL    If you want to initially display a low res image  then replace it with a high res image  you could do some javascript coding to swap out the images  Or  perhaps load the image into a div which has a background pattern filled with the low res image  Then  when the high res image loads  it ll load overtop the background   Unfortunately  there s no direct way to do this   Your second attempt will create a link to image2  but actually display image1    lt a href  image2 gif   gt  lt img src  image1 gif   gt  lt  a gt    If you want to popup a higher res version   Sam s suggestion is a good idea     This CSS might work for you  it works for me in Firefox 3     lt html gt   lt head gt       lt style gt           lowres   background-image  url  low-res png          lt  style gt   lt  head gt   lt body gt       lt div class  lowres  style  height 500px  width 500px  gt           lt img src  hi-res png    gt       lt  div gt   lt  body gt   lt  html gt    In that example  you have to set the div height width to that of the image  It will actually load both images simultaneously  but presuming the low-res one loads quick  you might see it first while the hi-res image downloads

User · Answer

That sort of functionality is going to require some Javascript  but it is probably possible just to use CSS  in browsers other than IE6 amp 7

User · Answer

alt is text that is displayed when the image can t be loaded or the user s browser doesn t support images  e g  readers for blind people    Try using something like lightbox   http   www lokeshdhakar com projects lightbox2   update  This library maybe better as its based on jQuery which you have said your using http   leandrovieira com projects jquery lightbox

User · Answer

Use this as an example  https   www w3schools com jquerymobile tryit asp filename tryjqmob popup image   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D   lt link rel  stylesheet  href  https   code jquery com mobile 1 4 5 jquery mobile-1 4 5 min css  gt  x000D   lt script src  https   code jquery com jquery-1 11 3 min js  gt  lt  script gt  x000D   lt script src  https   code jquery com mobile 1 4 5 jquery mobile-1 4 5 min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div data-role  page  gt  x000D     lt div data-role  header  gt  x000D       lt h1 gt Welcome To My Homepage lt  h1 gt  x000D     lt  div gt  x000D   x000D     lt div id  pageone  data-role  main  class  ui-content  gt  x000D       lt p gt Click on the image to enlarge it  lt  p gt  x000D       lt p gt Notice that we have added a  back button  in the top right corner  lt  p gt  x000D       lt a href   myPopup  data-rel  popup  data-position-to  window  gt  x000D       lt img src  https   lh3 googleusercontent com 8XQPMmZImaDsSyEPbAptXOHQYZKP rggu tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36- s136  alt  Skaret View  style  width 200px   gt  lt  a gt  x000D   x000D       lt div data-role  popup  id  myPopup  gt  x000D         lt p gt This is my picture  lt  p gt   x000D         lt a href   pageone  data-rel  back  class  ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right  gt Close lt  a gt  lt img src  https   lh3 googleusercontent com 8XQPMmZImaDsSyEPbAptXOHQYZKP rggu tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36- s136  style  width 800px height 400px   alt  Skaret View  gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div data-role  footer  gt  x000D       lt h1 gt Footer Text lt  h1 gt  x000D     lt  div gt  x000D   lt  div gt   x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

alt is text that is displayed when the image can t be loaded or the user s browser doesn t support images  e g  readers for blind people    Try using something like lightbox   http   www lokeshdhakar com projects lightbox2   update  This library maybe better as its based on jQuery which you have said your using http   leandrovieira com projects jquery lightbox

User · Answer

lt img src  thumb gif  onclick  this src  full size gif     gt    Of course you can change the onclick event to load the image wherever you want

User · Answer

lt img src  thumb gif  onclick  this src  full size gif     gt    Of course you can change the onclick event to load the image wherever you want

User · Answer

That sort of functionality is going to require some Javascript  but it is probably possible just to use CSS  in browsers other than IE6 amp 7

User · Answer

That sort of functionality is going to require some Javascript  but it is probably possible just to use CSS  in browsers other than IE6 amp 7

User · Answer

A scriptless  CSS-only experimental approach with image pre-loadingBONUS  and which only works in Firefox    lt style gt  a zoom  full   display  none    a zoom active  thumb   display  none    a zoom active  full   display  inline     lt  style gt    lt a class  zoom  href     gt   lt img class  thumb  src  thumbnail png   gt   lt img class  full  src  fullsize png   gt   lt  a gt    Shows the thumbnail by default  Shows the full size image while the mouse button is clicked and held down  Goes back to the thumbnail as soon as the button is released  I m in no way suggesting that this method be used  it s just a demo of a CSS-only approach that  very  partially solves the problem  With some z-index   relative position tweaks  it could work in other browsers too

User · Answer

The   lt a href  image2 gif   gt  lt img src  image1 gif   gt  lt  a gt    technique has always worked for me   I used it to good effect in my Super Bowl diary  but I see that the scripts I used are broken   Once I get them fixed I will edit in the URL

User · Answer

A scriptless  CSS-only experimental approach with image pre-loadingBONUS  and which only works in Firefox    lt style gt  a zoom  full   display  none    a zoom active  thumb   display  none    a zoom active  full   display  inline     lt  style gt    lt a class  zoom  href     gt   lt img class  thumb  src  thumbnail png   gt   lt img class  full  src  fullsize png   gt   lt  a gt    Shows the thumbnail by default  Shows the full size image while the mouse button is clicked and held down  Goes back to the thumbnail as soon as the button is released  I m in no way suggesting that this method be used  it s just a demo of a CSS-only approach that  very  partially solves the problem  With some z-index   relative position tweaks  it could work in other browsers too

User · Answer

A scriptless  CSS-only experimental approach with image pre-loadingBONUS  and which only works in Firefox    lt style gt  a zoom  full   display  none    a zoom active  thumb   display  none    a zoom active  full   display  inline     lt  style gt    lt a class  zoom  href     gt   lt img class  thumb  src  thumbnail png   gt   lt img class  full  src  fullsize png   gt   lt  a gt    Shows the thumbnail by default  Shows the full size image while the mouse button is clicked and held down  Goes back to the thumbnail as soon as the button is released  I m in no way suggesting that this method be used  it s just a demo of a CSS-only approach that  very  partially solves the problem  With some z-index   relative position tweaks  it could work in other browsers too

[html] How can I make a thumbnail <img> show a full size image when clicked?

Examples related to html

Examples related to image

Examples related to tags