Welcome Guest [Log In] [Register]
Search Members Calendar | Rules ZB Code Index IF Code Index
ZBCode
  • Navigation
  • ZBCode
  • Coding Resources
  • Zetaboards Modifications
  • Resize image on click
Hey, welcome to ZBCode, the premier coding forum for ZB. Here you fill find some of the best Invisionfree and Zetaboards Codes on the network! Unfortunately, you're sorta hovering around in guest mode at the moment; why not join in on the fun? Register an account and you can start accessing the wealth of resources we have available here. Enjoy your stay at ZBCode, and remember to tell all your friends about us; the more members, the more codes available. ;)

Interested in joining? Click here.


If you are already a member of ZBCode, feel free to login right here:

Username:   Password:
Locked Topic
Resize image on click
Tweet Topic Started: Apr 3 2010, 09:56 PM (1,096 Views)
Swordslam46 Apr 3 2010, 09:56 PM Post #1
Member Avatar


Posts:
934
Group:
Dedicated
Member
#2,773
Joined:
Apr 9, 2009
Placement: Above the Copyright / Below the Board

Description: When an image is clicked it is resized to your specifications

Code
 

<script type="text/javascript">
$(".c_post img").click(function(){
$(this).width("55px").height("55px");
});
</script>



Edit the red to the dimensions you want.
Offline Profile Goto Top
 
Dorith Apr 3 2010, 10:13 PM Post #2
Member Avatar
Has just entered the Matrix

Posts:
2,069
Group:
Former Staff
Member
#1,854
Joined:
Dec 23, 2008
Shouldn't you make it so that it has a specific size when it first loads, then when you click it it then expands to normal size?
Posted Image
Posted Image
(Made emoticon using Codes Rock's Smiley Generator)
Offline Profile Goto Top
 
Swordslam46 Apr 3 2010, 10:24 PM Post #3
Member Avatar


Posts:
934
Group:
Dedicated
Member
#2,773
Joined:
Apr 9, 2009
Why would I do that :huh:

Then I would need to figure out the dimensions of the image in the first place which will get confusing for user-uploaded images that are varying in size, that and chances are people will need to expand images, not shrink them
Offline Profile Goto Top
 
Anicho Apr 4 2010, 01:45 AM Post #4


Posts:
30
Group:
Member
Member
#3,585
Joined:
Nov 25, 2009
Coding language
HTML/CSS
How about with CSS?
td.c_post img {
height: 55px;
width: 55px;
}
Offline Profile Goto Top
 
Gorgor Apr 4 2010, 06:53 AM Post #5
Hello

Posts:
1,187
Group:
Former Staff
Member
#2,728
Joined:
Apr 2, 2009
Coding language
PHP
You can do what Anicho said and you won't have to worry about users disabling JavaScript, Zetaboards also has a bbcode where you can do [img=height,width]url[/img] so you can resize images when you want.
Offline Profile Goto Top
 
Swordslam46 Apr 4 2010, 10:43 AM Post #6
Member Avatar


Posts:
934
Group:
Dedicated
Member
#2,773
Joined:
Apr 9, 2009
This is still an easier way. With the BBC you have to ask users to surround every single one. And then you have people who don't want them resized and won't click on the images.

With CSS every image is resized. And once again, some people may not want resized images.
Offline Profile Goto Top
 
Lout Apr 4 2010, 02:13 PM Post #7
Member Avatar


Posts:
402
Group:
Dedicated
Member
#2,400
Joined:
Feb 19, 2009
You could also change this in the CSS -

Code:
 
.c_post img,#topic_review img {
max-width:90%;
}


To this -

Code:
 
.c_post img,#topic_review img {
max-width:400px;
}


And just adjust the 400px to whatever width you need so it doesn't stretch the page. Doing it this way only the images that are too large will get resized.

You can also add a snippet for sig images if need be -

Code:
 
td.c_sig img {
max-width:450px;
max-height:200px;
}


Again just adjust the px values to suit your needs.
Posted Image
Offline Profile Goto Top
 
screamscream Apr 14 2010, 10:22 PM Post #8


Posts:
72
Group:
Member
Member
#3,674
Joined:
Feb 4, 2010
Coding language
HTML/CSS
Awesome code =D
Posted Image
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Zetaboards Modifications · Next Topic »
Locked Topic

Track Topic · E-mail Topic Time: 7:50 PM Jul 10
Hosted for free by ZetaBoards · Privacy Policy