Normally you have an image tage with the src as the source of the image and the alt as the alternative text:
<img src="image1.gif" alt="Image 1" />
Can you have something like is?:
<img src="image1.gif" alt="image2.gif" />
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:
<a href="image2.gif" ><img src="image1.gif"/></a>
...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
This won't do what you are expecting:
<img src="image1.gif" alt="image2.gif" />
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.
<a href="image2.gif" ><img src="image1.gif"/></a>
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):
<html>
<head>
<style>
.lowres { background-image: url('low-res.png');}
</style>
</head>
<body>
<div class="lowres" style="height:500px; width:500px">
<img src="hi-res.png" />
</div>
</body>
</html>
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.
That sort of functionality is going to require some Javascript, but it is probably possible just to use CSS (in browsers other than IE6&7).
Use this as an example
https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">_x000D_
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>_x000D_
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div data-role="page">_x000D_
<div data-role="header">_x000D_
<h1>Welcome To My Homepage</h1>_x000D_
</div>_x000D_
_x000D_
<div id="pageone" data-role="main" class="ui-content">_x000D_
<p>Click on the image to enlarge it.</p>_x000D_
<p>Notice that we have added a "back button" in the top right corner.</p>_x000D_
<a href="#myPopup" data-rel="popup" data-position-to="window">_x000D_
<img src="https://lh3.googleusercontent.com/8XQPMmZImaDsSyEPbAptXOHQYZKP_rggu_tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36-=s136" alt="Skaret View" style="width:200px;"></a>_x000D_
_x000D_
<div data-role="popup" id="myPopup">_x000D_
<p>This is my picture!</p> _x000D_
<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">Close</a><img src="https://lh3.googleusercontent.com/8XQPMmZImaDsSyEPbAptXOHQYZKP_rggu_tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36-=s136" style="width:800px;height:400px;" alt="Skaret View">_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<div data-role="footer">_x000D_
<h1>Footer Text</h1>_x000D_
</div>_x000D_
</div> _x000D_
_x000D_
</body>_x000D_
</html>This won't do what you are expecting:
<img src="image1.gif" alt="image2.gif" />
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.
<a href="image2.gif" ><img src="image1.gif"/></a>
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):
<html>
<head>
<style>
.lowres { background-image: url('low-res.png');}
</style>
</head>
<body>
<div class="lowres" style="height:500px; width:500px">
<img src="hi-res.png" />
</div>
</body>
</html>
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.
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/
That sort of functionality is going to require some Javascript, but it is probably possible just to use CSS (in browsers other than IE6&7).
The
<a href="image2.gif" ><img src="image1.gif"/></a>
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.
This won't do what you are expecting:
<img src="image1.gif" alt="image2.gif" />
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.
<a href="image2.gif" ><img src="image1.gif"/></a>
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):
<html>
<head>
<style>
.lowres { background-image: url('low-res.png');}
</style>
</head>
<body>
<div class="lowres" style="height:500px; width:500px">
<img src="hi-res.png" />
</div>
</body>
</html>
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.
<img src='thumb.gif' onclick='this.src="full_size.gif"' />
Of course you can change the onclick event to load the image wherever you want.
A scriptless, CSS-only experimental approach with image pre-loadingBONUS! and which only works in Firefox:
<style>
a.zoom .full { display: none; }
a.zoom:active .thumb { display: none; }
a.zoom:active .full { display: inline; }
</style>
<a class="zoom" href="#">
<img class="thumb" src="thumbnail.png"/>
<img class="full" src="fullsize.png"/>
</a>
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.
This won't do what you are expecting:
<img src="image1.gif" alt="image2.gif" />
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.
<a href="image2.gif" ><img src="image1.gif"/></a>
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):
<html>
<head>
<style>
.lowres { background-image: url('low-res.png');}
</style>
</head>
<body>
<div class="lowres" style="height:500px; width:500px">
<img src="hi-res.png" />
</div>
</body>
</html>
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.
<img src='thumb.gif' onclick='this.src="full_size.gif"' />
Of course you can change the onclick event to load the image wherever you want.
The
<a href="image2.gif" ><img src="image1.gif"/></a>
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.
That sort of functionality is going to require some Javascript, but it is probably possible just to use CSS (in browsers other than IE6&7).
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.
<ul ng-controller="GalleryCtrl">
<li ng-repeat="image in images">
<a ng-click="openLightboxModal($index)">
<img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
</a>
</li>
</ul>
A scriptless, CSS-only experimental approach with image pre-loadingBONUS! and which only works in Firefox:
<style>
a.zoom .full { display: none; }
a.zoom:active .thumb { display: none; }
a.zoom:active .full { display: inline; }
</style>
<a class="zoom" href="#">
<img class="thumb" src="thumbnail.png"/>
<img class="full" src="fullsize.png"/>
</a>
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.
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.
<ul ng-controller="GalleryCtrl">
<li ng-repeat="image in images">
<a ng-click="openLightboxModal($index)">
<img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
</a>
</li>
</ul>
A scriptless, CSS-only experimental approach with image pre-loadingBONUS! and which only works in Firefox:
<style>
a.zoom .full { display: none; }
a.zoom:active .thumb { display: none; }
a.zoom:active .full { display: inline; }
</style>
<a class="zoom" href="#">
<img class="thumb" src="thumbnail.png"/>
<img class="full" src="fullsize.png"/>
</a>
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.
That sort of functionality is going to require some Javascript, but it is probably possible just to use CSS (in browsers other than IE6&7).
<img src='thumb.gif' onclick='this.src="full_size.gif"' />
Of course you can change the onclick event to load the image wherever you want.
Use this as an example
https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">_x000D_
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>_x000D_
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div data-role="page">_x000D_
<div data-role="header">_x000D_
<h1>Welcome To My Homepage</h1>_x000D_
</div>_x000D_
_x000D_
<div id="pageone" data-role="main" class="ui-content">_x000D_
<p>Click on the image to enlarge it.</p>_x000D_
<p>Notice that we have added a "back button" in the top right corner.</p>_x000D_
<a href="#myPopup" data-rel="popup" data-position-to="window">_x000D_
<img src="https://lh3.googleusercontent.com/8XQPMmZImaDsSyEPbAptXOHQYZKP_rggu_tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36-=s136" alt="Skaret View" style="width:200px;"></a>_x000D_
_x000D_
<div data-role="popup" id="myPopup">_x000D_
<p>This is my picture!</p> _x000D_
<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">Close</a><img src="https://lh3.googleusercontent.com/8XQPMmZImaDsSyEPbAptXOHQYZKP_rggu_tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36-=s136" style="width:800px;height:400px;" alt="Skaret View">_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<div data-role="footer">_x000D_
<h1>Footer Text</h1>_x000D_
</div>_x000D_
</div> _x000D_
_x000D_
</body>_x000D_
</html>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/
A scriptless, CSS-only experimental approach with image pre-loadingBONUS! and which only works in Firefox:
<style>
a.zoom .full { display: none; }
a.zoom:active .thumb { display: none; }
a.zoom:active .full { display: inline; }
</style>
<a class="zoom" href="#">
<img class="thumb" src="thumbnail.png"/>
<img class="full" src="fullsize.png"/>
</a>
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.
The
<a href="image2.gif" ><img src="image1.gif"/></a>
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.
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/
Source: Stackoverflow.com