1. 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?:

Discussion in 'Styling and Customization Questions' started by CritiKiL, Oct 24, 2012.

  1. CritiKiL

    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:


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

    MagnusB Well-Known Member

    Jake Bunce likes this.
  3. CritiKiL

    CritiKiL Active Member

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

    MagnusB Well-Known Member

    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 likes this.
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  6. MagnusB

    MagnusB Well-Known Member

    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:
    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'>
        if ($(this).css('max-width') == '100%') {     
            $(this).css({'max-width' : '172px'})
        else {
            $(this).css({'max-width' : '100%'})
    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.
    Jake Bunce likes this.

Share This Page