Images grow in post

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.

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

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!

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'

This won't work on emoticons right?

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.

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

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.

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!

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;
}

The transition does not work!

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

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'}
});

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

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.

Yeap that solved it! Thanks a lot!
Solved!

You're welcome ^^

Topic archived