Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
Resizing Large Images in Posts; + Making them clickable; By Nicola
Topic Started: Feb 3 2010, 11:54 PM (7,471 Views)
Reid
Member Avatar
una trappola!

This topic has been moved from our official support board.

Originally posted by: Nicola
Resizing Large Images in Posts; + Making them clickable
 
This is a script that Seth coded last week, however I did make some suggestions for it :P He asked that I post it rather than him

The stuff required to make large posted images resize, is technically already in the CSS for every theme. However this does not work correctly in Firefox for a lot of people, therefore to get this working, you'll need to locate the following in the second half of the CSS in the Theme Appearance:
CSS
 
.c_post img,#topic_review img {
max-width:90%;
}
A percentage max-width is the issue that Firefox has. Therefore change this to a fixed width, using a px value. An example that suits all resolutions would be around 500-600px. However this is up to you.

Making the Images Clickable
People have gone on and on about IPB's feature of clicking resized images, to view the full size. Firstly, yes, its a great idea. But please stop comparing Zetaboards to IPB. We're not IPB, nothing to do with IPB. Now thats cleared up, here is the code to do this:
Code: HTML
 
<script type="text/javascript">
//<![CDATA[
window.onload=(function() {
$("td.c_post img[alt='Posted Image']").each(function() {
if (this.width >= 600) {
$(this).wrap("<a href='" + this.src + "'></a>");
$(this).after("<br /><small><a href='" + this.src + "' class='view_full'>View Full Image</a></small>");
}
});
});
//]]>
</script>

This can go in any box you want to put it in, in the Board Template.

Where the 600 is on the 5th line, this allows you to set in conjunction with the section of CSS, what width images will be affected by this script.
You can see a preview of this script in action here.

Styling the 'View Full Image' Link

A class has been added to this link that appears under the clickable images. The class is .view_full. Therefore, you can then add this to the Theme Appearance for each theme you have installed:
CSS
 
a.view_full {
insert CSS styling here;
}
Where you can then add a background colour, border, increase the font size etc.




Please PM ME with any problems, because I don't check my database topics much. You're more likely to grab my attention via PM ^_^
Offline Profile Quote Post Goto Top
 
Artiken
Member Avatar
Member
[ * ]
Are you able to have it to where instead of opening in the same browser window as the forum, it opens a new window to display the picture? ^_^
Offline Profile Quote Post Goto Top
 
Nicolas-ZNR
Member Avatar
Member
[ *  *  *  *  *  *  * ]
Artiken
Feb 12 2010, 02:17 PM
Are you able to have it to where instead of opening in the same browser window as the forum, it opens a new window to display the picture? ^_^
Code: HTML
 
<script type="text/javascript">
//<![CDATA[
window.onload=(function() {
$("td.c_post img[alt='Posted Image']").each(function() {
if (this.width >= 600) {
$(this).wrap("<a target='_blank' href='" + this.src + "'></a>");
$(this).after("<br /><small><a href='" + this.src + "' target='_blank' class='view_full'>View Full Image</a></small>");
}
});
});
//]]>
</script>
Offline Profile Quote Post Goto Top
 
Artiken
Member Avatar
Member
[ * ]
Thank you!

P.S awesome cape :)
Offline Profile Quote Post Goto Top
 
aznspoon
Member
[ * ]
.c_post img,#topic_review img {
fixed-width:500px;
}

Like that?
Offline Profile Quote Post Goto Top
 
Lout-ZNR
Member Avatar
He came, he saw...
[ *  *  * ]
aznspoon
Mar 17 2010, 07:25 PM
.c_post img,#topic_review img {
fixed-width:500px;
}

Like that?
Code:
 
.c_post img,#topic_review img {
max-width:500px;
}


Use max-width rather than fixed-width. Not sure if fixed-width would even work as I've never tried it, but just set the maximum size as a max-width attribute and it will work fine.

Make sure you change the value in the code to match it though, so where you see 600 in the following snippet you would change it to 500 for the above piece of CSS -
Code:
 
if (this.width >= 600) {

Offline Profile Quote Post Goto Top
 
aznspoon
Member
[ * ]
Weird it's not working for me. Must be my css codes then.
Offline Profile Quote Post Goto Top
 
Ingram-ZNR
Member
[ * ]
Nicolas
Feb 12 2010, 07:26 PM
Artiken
Feb 12 2010, 02:17 PM
Are you able to have it to where instead of opening in the same browser window as the forum, it opens a new window to display the picture? ^_^
Code: HTML
 
<script type="text/javascript">
//<![CDATA[
window.onload=(function() {
$("td.c_post img[alt='Posted Image']").each(function() {
if (this.width >= 600) {
$(this).wrap("<a target='_blank' href='" + this.src + "'></a>");
$(this).after("<br /><small><a href='" + this.src + "' target='_blank' class='view_full'>View Full Image</a></small>");
}
});
});
//]]>
</script>
That works when you click on the image, but if you click on the text under it, the web page goes to the image, and 2-3 new tabs open up also linking to the full image!

Eeek!
Offline Profile Quote Post Goto Top
 
thebawp-ZNR
Member
[ * ]
Tried this and it seems to be working perfectly, thanks!
Offline Profile Quote Post Goto Top
 
ej8989
Member
[ * ]
how to move the "View full image" ABOVE the image instead of below?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<script type="text/javascript">
//<![CDATA[
window.onload=(function() {
$("td.c_post img[alt='Posted Image']").each(function() {
if (this.width >= 600) {
$(this).wrap("<a target='_blank' href='" + this.src + "'></a>");
$(this).before("<small><a href='" + this.src + "' target='_blank' class='view_full'>View Full Image</a></small><br />");
}
});
});
//]]>
</script>
This will move the "View Full Image" text above the image.
Offline Profile Quote Post Goto Top
 
Hildi
Member Avatar
Member
[ * ]
The first codes work with my board. Thanks a lot ^_^
Offline Profile Quote Post Goto Top
 
Vienely
Member Avatar
★__SUNSHINE
[ * ]
Can I add max-height also? I want to make max resolution for the image is 400 x 300 px
Offline Profile Quote Post Goto Top
 
Trinity76
Member Avatar
Member
[ *  * ]
THANK YOU!
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
I'm using this code for my Forum. However, the code only applies to images posted in the forum but not posts posted on blog. Is it possible to make the code covering posts made on blog as well? Thanks.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply