Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Image Upload Orientation Changer

2

Comments

  • Hi again,

    @peregrine, your solution works perfectly for what I need! Thank you.

    Just one small question; How can I disable the 'Click to Enlarge' option within the standard mobile theme? The rotate function works perfectly on smaller images on mobiles, but as soon as you come across a larger image it just resizes it, without undoing the resize and/or rotating the image.
    I have looked at the .css in the mobile theme, and have also looked around the other files (incl. the .tpl) but other than adding the below line of code to the .css I do not feel confident enough to amend anything else.

    .Message span img {max-width:150px;height:auto;}

    I would rather not give the option to enlarge the images anyway; whether on mobile or desktop.
    (Also, I have changed the default dimension allowances, but this only changes the embed size - and still allows the user to enlarge).

    Sorry for waffling on, I just wanted to give as much info as possible.
    Thanks,
    Lisa.

  • Hi again @peregrine,

    Apologies; I found another post with a solution (even though it relates to FileUpload, it still works!)

    Thanks again so much for all your help!

  • @marthajane77 said:
    Hi again peregrine,

    Apologies; I found another post with a solution

    and which post might that be? it might help someone else.

    Thanks again so much for all your help!

    you are welcome.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Sorry @peregrine, still getting used to Forum Etiquette ;P

    The thread was:

    http://vanillaforums.org/discussion/19216/how-to-provide-a-back-button-after-clicking-enlarge-thumbnail-image#latest

    It was this comment in particular that worked for me on this occasion:

    @50sQuiff said:
    Following peregrine's encouragement I thought I'd add my code to this thread. First, set your images' max-width to 640px (or whatever) in your custom.css. Then replace the image handling code in global.js with:

    `function LinkifyImages() {
    jQuery('div.Message img').each(function(i,img) {
    var imgc = jQuery(img);
    if (imgc.width() >= 640) {
    imgc.css('cursor', 'pointer');
    imgc.click(function() {
    window.open(img.src), '_blank';
    })
    }
    });
    }

    jQuery(window).load(function() {
    LinkifyImages();
    });

    $('div.Message img').livequery(function()
    {
    LinkifyImages();
    });`

    Even though it was specified as working for the FileUpload plugin, I used the same code in global.js for ImageUpload, and it worked a treat.

    However, I've just got to work on resizing the images to a minimum for the mobile theme now (so they appear in the smallest mobile browser window - default mobile theme), which I appear to struggling with now.
    At some point I do hope to stop bothering you guys, you must be really busy.

    Thanks,
    Lisa.

  • Hopefully the last of the issues concerning this thread (for me).

    Basically, what I need to achieve is just the image(s) in the message content (ImageUpload pics) to be clicked on and rotate 90deg according to user viewing preference.

    I'm struggling to define classes to separate the rotating images from the others on the page (that do not require any animation, i.e. Banner, Avatars, etc.)

    I am using the aforementioned jquery version, with a click function as opposed to a hover. I found this to be more stable than the .css code for some reason.

    All is working fine, other than the separation.
    (Also, still having problems with image default size on mobile screens, although rotation is working perfectly on mobile browsers).

    Apologies for being a pain in the wotsit.

    Thanks.

  • peregrineperegrine MVP
    edited October 2013

    what rotate90 code are you using for image rotation as there were lots of examples.

    this would isolate it.

        var value = 0
        $( 'div.Message img').live( "click", function() { 
        value +=90;
        $(this).rotate({ animateTo:value})
        });
    

    (Also, still having problems with image default size on mobile screens, although rotation is working perfectly on mobile browsers).

    what default size do you want on mobile vs. non-mobile?

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Thanks @peregrin, I am using that code.
    Using JQueryRotate.js & rotate90.js

    Can I send you a link if this would help you?

  • I would ideally like something that will fit the smallest mobile (approx. 100-150px wide?)

  • are you using the code above?

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • non-mobile default is set at 500px wide

  • Yes, that code exactly

  • so then the avatars and banners won't spin.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • They still do, but only on the pages that the Image Upload function is present on

  • post your code for rotate90

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • var value = 0
    $( "img" ).live( "click", function() {
    value +=90;
    $(this).rotate({ animateTo:value})
    });

  • The rotate90 & jQueryRotate js files are in the Image Upload js folder. Is that correct?

  • peregrineperegrine MVP
    edited October 2013

    The rotate90 & jQueryRotate js files are in the Image Upload js folder. Is that correct?

    you just didn't implement the correct rotate90 code that I posted...

    now go back and use the code in this message and re read it !

    http://vanillaforums.org/discussion/comment/193254/#Comment_193254

    it is not "exactly" what you posted.

    notice it is selecting on

    div.Message img which isolates it to the Message

    not just img

    as for your other question on default size for mobile. I suggest you start a new discussion, explaining what you did and want to achieve.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • erm ok, thanks.

    All I did was copy & paste, so not sure how that happened.

    Thanks again, I'll be of no more bother.

  • peregrineperegrine MVP
    edited October 2013

    Thanks again, I'll be of no more bother.

    you're not a bother. You are responding to answers,

    some people ask a question, and never respond back when they get an answer, never say thanks and never click on reactions.

    you've done all three.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Thankyou @peregrine, your help really is truly appreciated, and quite honestly I don't know how I could have got this far without it.

    The code now works perfectly! No more unwanted spinning images!

Sign In or Register to comment.