Image Upload Orientation Changer

marthajane77

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.

marthajane77

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!

peregrine

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

marthajane77

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.

marthajane77

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.

peregrine

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?

marthajane77

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

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

marthajane77

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

peregrine

are you using the code above?

marthajane77

non-mobile default is set at 500px wide

marthajane77

Yes, that code exactly

peregrine

so then the avatars and banners won't spin.

marthajane77

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

peregrine

post your code for rotate90

marthajane77

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

marthajane77

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

peregrine

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.

marthajane77

erm ok, thanks.

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

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

peregrine

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.

marthajane77

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!