• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Restrict Images to a certain size - For a 'Created' Page?:

MagnusB

Well-known member
#4
You can do a max-width: 100% on the img tag on the page, should work about the same. Click to expand will require javascript though, it can probably be done with a simple jQuery function.
 

MagnusB

Well-known member
#6
Since Jake like my comment, it was brought to my attention again, so I thought I would check out how difficult it would be to do this via JS. I managed to get it working with a VERY simple jquery function here.

What it does is simple, when you click the image, it checks to see if the max-width for the img element is set to 100%, if it is, it changes it to 172px, else it sets it back to 100%. It should work on multiple elements, just change:
Code:
$("#myimage")
To:
Code:
$(".myimage")
and it checks for the class myimage instead of the id.

To use it, just add this to the top of your page:
Code:
<script type='text/javascript'>
$(".myimage").click(function(){
    if ($(this).css('max-width') == '100%') {     
        $(this).css({'max-width' : '172px'})
            }
    else {
        $(this).css({'max-width' : '100%'})
        }
    });​
</script>
Then add this to extra.css:
Code:
.myimg { max-width: 100%; }
You can of course change the class name to whatever you want, but you need to change it in the function as well. I have not tested it with the jQuery version xF uses, but I don't think it should cause any problems.