A good thing to do from time to time as you work on something like that is to view the page in the browser. Use the browser's 'view source' to make sure you're outputting valid code.
A good thing to do from time to time as you work on something like that is to view the page in the browser. Use the browser's 'view source' to make sure you're outputting valid code.
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Probably the easiest to work with. Works well and has many options.
http://gettopup.com/
Last edited by djr33; 01-17-2012 at 09:45 PM.
I really like the simplicity of this!
One thing, can we set the size of the enlarged image to a maximum. I have several images that are different sizes and would like to add more without having to resize before adding to the site.
I have tried using max-size on the 'loadarea' div but to no avail
Many Thanks
max-size is not a valid css property. You can use max-width and/or max-height.
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Yes sorry don't know what I was thinking of!
I have tried max-height and max-width on an image in the 'loadarea' div as well as in the div itself but when I hover over the thumbnail it uses the image size. This is what I have tried:
==========css
.loadarea {
height:330px;
width:450px;
background:grey;
}
.thumb {
position:relative;
float:left;
height:60px;
max-height: 300px;
max-width: 100%;
}
==================html
<div class="loadarea" id="loadarea"><img class="full" src="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg"> </div>
<a class="thumb" href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">
<img src="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" class="thumb"></a>
==================================
Is there something I am missing?
Many thanks
Nothing in the style you show affects images in the loadarea. Use:
or:Code:.loadarea img
{ max-width: 425px; max-height: 300px; }
Code:#loadarea img
{ max-width: 425px; max-height: 300px; }
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Binary Bridge (04-06-2014)
Bookmarks