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

[CritiKiL]

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).

 

[MagnusB]

You can try to use the imagefit jQuery plugin: http://code.google.com/p/jquery-imagefit-plugin/

Not a 100% match to what you ask for, but at least it is in the same ball park...

 

[CritiKiL]

No, I'm looking to just be able to add a code to the extra.css for my mobile style template but for a created page node.

 

[MagnusB]

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.

 

[Jake Bunce]

No, I'm looking to just be able to add a code to the extra.css for my mobile style template but for a created page node.

This shows how you can specify CSS for a specific node:

http://xenforo.com/community/threads/set-different-body-background-for-each-forum-css.24511/

 

[MagnusB]

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:

$("#myimage")

To:

$(".myimage")

and it checks for the class myimage instead of the id.

To use it, just add this to the top of your page:

<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:

.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.