The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Images grow in post

View previous topic View next topic Go down

Solved Images grow in post

Post by Luffy on September 11th 2014, 10:49 pm

Hello,

I would like the images in the post, not to have the resize or view full screen and staff and instead of that i would like the to grow in the post to a certain dimensions as soon as you click on it. Something like lightshot effect but not display them as popup in grey background. Grow in the post as soon as you click it.

Is it possible?

MrMind.


Last edited by MrMind on September 13th 2014, 2:25 pm; edited 1 time in total

Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Images grow in post

Post by Ramdaman on September 12th 2014, 2:08 am

You mean you want to have an image without the resize box?

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Images grow in post

Post by Luffy on September 12th 2014, 10:08 am

Yes i want to remove that links and as soon as a member clicks on the image then the image will grow bigger in the post.

Edit: I managed to figure out a way to remove the link and make it grow in the post. But i don't want it, as soon as you hover it to grow. I want it to be clickable and as soon as you click it to grow.
Thanks!

Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur on September 12th 2014, 2:53 pm

Hello MrMind,

Give this a try :
Administration panel > Modules > Javascript codes management > Create a new script

Title : Your choice
Placement : In the topics
Paste the code below and submit :
Code:
$(function() {
 var height = '100px',
  width = '100px',
 img = $('.post .postbody .entry-content div img');
 
 for (i=0;i<img.length;i++) {
  resize(img[i]);
  img[i].onclick = function() {
  if (/resize_true/.test(this.className)) {
  this.style.maxHeight = 'none';
  this.style.maxWidth = 'none';
  this.className = this.className.replace('resize_true','')
  }
  else resize(this)
  }
 }
 function resize(el){el.style.maxHeight = height;el.style.maxWidth = width;el.className += 'resize_true'}
});

Adjust these two variables to the maximum h/w of an image you want :
Code:
var height = '100px'
width = '100px'

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Luffy on September 12th 2014, 3:21 pm

This won't work on emoticons right?






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur on September 12th 2014, 3:26 pm

They most likely will be applied with the max-height/width, however, If your emoticons aren't gigantic they wont be resized.

Pretty much we're just adding max-height/width to all the images and a classname which says that they're resized. If you click the image it toggles the class and resize. max-height/width only takes effect if the element is larger than the value specified. Meaning that it doesn't set the element to that height/width if it's lower than the specified value.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Luffy on September 12th 2014, 6:10 pm

Oh ok! Btw this does not work exactly right. I probably have a code that affects that because it does not zoom how i set it to.

I will send you via pm the information for a Test Account to log in and check the images here






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur on September 12th 2014, 11:03 pm

Do you still have the image resizer from the AP activated ?
Administration Panel > General > Messages and emails > Config

Empty the fields for the image resize.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Luffy on September 12th 2014, 11:33 pm

Ok and one last question. Is there any way i can modify that "grow"? I want to add some transition to grow and get back to size and a border. Can that happen?

EDIT: Oh and add a magnifying glass as a cursor! Embarassed

Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur on September 12th 2014, 11:39 pm

Replace your script by :
Code:
$(function() {
 var height = '100px',
  width = '100px',
 img = $('.post .postbody .entry-content div img'); // area to resize images in ( Punbb currently )
 
 for (i=0;i<img.length;i++) {
  img[i].className += ' image_style';
  resize(img[i]);
  img[i].onclick = function() {
  if (/resize_true/.test(this.className)) {
  this.style.maxHeight = 'none';
  this.style.maxWidth = 'none';
  this.className = this.className.replace('resize_true','')
  }
  else resize(this)
  }
 }
 function resize(el){el.style.maxHeight = height;el.style.maxWidth = width;el.className += ' resize_true'}
});


Use this CSS to style the images :
Code:
.image_style {
 cursor:zoom-in;
 transition:750ms;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Luffy on September 12th 2014, 11:44 pm

The transition does not work! Sad






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur on September 12th 2014, 11:55 pm

Oh that's right, I forgot to change 'none' Razz

Replace your script by :
Code:
$(function() {
  var height = '100px',
      width = '100px',
  img = $('.post .postbody .entry-content div img'); // area to resize images in ( Punbb currently )
 
  for (i=0;i<img.length;i++) {
    img[i].className += ' image_style';
    resize(img[i]);
    img[i].onclick = function() {
      if (/resize_true/.test(this.className)) {
        this.style.maxHeight = '100000px';
        this.style.maxWidth = '100000px';
        this.className = this.className.replace('resize_true','')
      }
      else resize(this)
    }
  }
  function resize(el){el.style.maxHeight = height;el.style.maxWidth = width;el.className += ' resize_true'}
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Luffy on September 13th 2014, 2:53 am

The transition wanted was when both grows and gets smaller. Now it simply goes slowly smaller when you click it the second time! Embarassed






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur on September 13th 2014, 6:28 am

The transition will differ on smaller and larger images; it will be faster or longer. Replace your script by :
Code:
$(function() {
 // all dimension values use max, not exact
 var resize_height = '100px',
  resize_width = '100px',
  zoom_height = '1000px',
  zoom_width = '1000px',
 img = $('.post .postbody .entry-content div img'); // area to resize images in ( Punbb currently )
 
 for (i=0;i<img.length;i++) {
  img[i].className += ' image_style';
  resize(img[i]);
  img[i].onclick = function() {
  if (/resize_true/.test(this.className)) {
  this.style.maxHeight = zoom_height;
  this.style.maxWidth = zoom_width;
  this.className = this.className.replace('resize_true','')
  }
  else resize(this)
  }
 }
 function resize(el){el.style.maxHeight = resize_height;el.style.maxWidth = resize_width;el.className += ' resize_true'}
});

You can adjust the maximum height of the zoom. This is necessary for the transition. For example, to make a transition from 100px to 500px.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Luffy on September 13th 2014, 2:24 pm

Yeap that solved it! Thanks a lot!
Solved!






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur on September 13th 2014, 6:17 pm

You're welcome ^^

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum