The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Images grow in post

3 posters

Go down

Solved Images grow in post

Post by TheCrow Thu 11 Sep 2014 - 22:49

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 Sat 13 Sep 2014 - 14:25; edited 1 time in total
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Ramdaman Fri 12 Sep 2014 - 2:08

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

Male Posts : 1615
Reputation : 99
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 TheCrow Fri 12 Sep 2014 - 10:08

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!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur Fri 12 Sep 2014 - 14:53

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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by TheCrow Fri 12 Sep 2014 - 15:21

This won't work on emoticons right?
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur Fri 12 Sep 2014 - 15:26

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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by TheCrow Fri 12 Sep 2014 - 18:10

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
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur Fri 12 Sep 2014 - 23:03

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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by TheCrow Fri 12 Sep 2014 - 23:33

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
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur Fri 12 Sep 2014 - 23:39

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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by TheCrow Fri 12 Sep 2014 - 23:44

The transition does not work! Sad
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur Fri 12 Sep 2014 - 23:55

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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by TheCrow Sat 13 Sep 2014 - 2:53

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

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur Sat 13 Sep 2014 - 6:28

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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by TheCrow Sat 13 Sep 2014 - 14:24

Yeap that solved it! Thanks a lot!
Solved!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Images grow in post

Post by Ange Tuteur Sat 13 Sep 2014 - 18:17

You're welcome ^^

Topic archived
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

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