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

CritiKiL

Active member
I made a Page, and I'd like to have a code that will allow all images on it to be restricted to a certain 'width' and be allowed to expand just be clicking on the image? I plan to use this code in the Mobile Style template. Here is the page:

http://sck-mobile.com/community/index.php?pages/tournamentswon/

Thanks in advance (I'm sure it's an easy code or mod of a code already given, but not sure how to do it using created pages).
 
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.
 
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.
 
Top Bottom