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:
Add Reply
  • Pages:
  • 1
  • 2
Resizing Large Images in Posts; + Making them clickable; By Nicola
Topic Started: Feb 3 2010, 11:54 PM (7,535 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
 
Replies:
Helena
Member Avatar
M is for Mod

polocolo, DPM answered your question here: http://support.zathyus.com/topic/7000028/
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
Thanks a million Helena and DaPizzaMan!
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply
  • Pages:
  • 1
  • 2