Images grow in post
3 posters
Page 1 of 1
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.
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
Re: Images grow in post
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!
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!
Re: Images grow in post
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 :
Adjust these two variables to the maximum h/w of an image you want :
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'
Re: Images grow in post
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.
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.
Re: Images grow in post
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
I will send you via pm the information for a Test Account to log in and check the images here
Re: Images grow in post
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.
Administration Panel > General > Messages and emails > Config
Empty the fields for the image resize.
Re: Images grow in post
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!
EDIT: Oh and add a magnifying glass as a cursor!
Re: Images grow in post
Replace your script by :
Use this CSS to style the images :
- 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;
}
Re: Images grow in post
Oh that's right, I forgot to change 'none'
Replace your script by :
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'}
});
Re: Images grow in post
The transition wanted was when both grows and gets smaller. Now it simply goes slowly smaller when you click it the second time!
Re: Images grow in post
The transition will differ on smaller and larger images; it will be faster or longer. Replace your script by :
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.
- 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.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum