Welcome Guest [Log In] [Register]
Search Members Calendar | Rules ZB Code Index IF Code Index
ZBCode
  • Navigation
  • ZBCode
  • Coding Resources
  • Zetaboards Modifications
  • Display Thumbnails of Uploaded Images
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
  • Pages:
  • 1
  • 2
Display Thumbnails of Uploaded Images
Tweet Topic Started: Oct 25 2009, 08:26 AM (1,812 Views)
Nicolas Oct 25 2009, 08:26 AM Post #1
Member Avatar
Awesome

Posts:
209
Group:
Dedicated
Member
#1,307
Joined:
Oct 22, 2008
Coding language
HTML/CSS
Function: This code takes uploaded images and creates a small, clickable, thumbnail of that image.
Known Issues: None
Preview: Click Here
The Code
Hosted:
Code: HTML
 
<script type="text/javascript" src="http://z3.ifrm.com/108/12/0/p233155/imageuploadthumbs.js" >
/* Display Image Uploads as Thumbnails
Created by Nicolas of Zathyus Networks */
</script>

Not Hosted:
Code: HTML
 

<script type="text/javascript" >
/* Display Image Uploads as Thumbnails
Created by Nicolas of Zathyus Networks */
$(function () {
var thumbstyle = "margin-top: 2px; max-width: 100px; max-height: 100px;"
var iconimg = '<img alt="Attachment:" src="http://z3.ifrm.com/static/1/attach.png"/>'
$("dl.c_post-attachment a[href$=.apng], dl.c_post-attachment a[href$=.ico], dl.c_post-attachment a[href$=.bmp], dl.c_post-attachment a[href$=.gif], dl.c_post-attachment a[href$=.png], dl.c_post-attachment a[href$=.jpg], dl.c_post-attachment a[href$=.jpeg]").each(function () {
var image = $(this).attr('href');
$(this).html(iconimg+'<img src="' + image + '" style="'+thumbstyle+'" title="Uploaded Image" alt="Uploaded Image" />');
});
});
</script>
Edited by Nicolas, Oct 25 2009, 03:32 PM.
Posted Image
(Thanks to HelenaZF for the awesomesauce signature. )

Big Boards
Hogwarts New Zealand
Offline Profile Goto Top
 
Choco Oct 25 2009, 08:55 AM Post #2
Member Avatar
¡ʎɹoʇɔɐɟ ʎʇıʌɐɹƃ ɐ uı pǝddɐɹʇ ɯ,ı 'dןǝɥ

Posts:
589
Group:
Admins
Member
#3,272
Joined:
Jun 30, 2009
Coding language
Everything
That's really cool -- and it seems like it might be really useful!
Nice job Nicolas =]
Posted ImageIt's a magical world, Hobbes, ol'd buddy... ...let's go exploring!
In progress: Something Special ;)
Offline Profile Goto Top
 
RedBldSandman Oct 25 2009, 08:58 AM Post #3
Member Avatar
ZIPPY!

Posts:
482
Group:
Coding Staff
Member
#2,122
Joined:
Jan 25, 2009
Tis nice! :D

I do have one suggestion though! Change all the *s in the attribute selectors you're using to select only images to $s. This will only make them change in to images if the .imagetype is at the end of the href instead. At the moment, something like this:
Code:
 
test.pngtest.txt
would be changed in to an image even though it's a .txt file :O

But still an awesome code :D
Edited by RedBldSandman, Oct 25 2009, 08:58 AM.
Posted Image
"To iterate is human, to recurse divine."

Offline Profile Goto Top
 
Nicolas Oct 25 2009, 03:28 PM Post #4
Member Avatar
Awesome

Posts:
209
Group:
Dedicated
Member
#1,307
Joined:
Oct 22, 2008
Coding language
HTML/CSS
Thanks, Choco. :)
Good call there, RedBldSandman - it has been updated thusly. :) I don't see why anybody would put two file extensions on a file, though. xD
Edited by Nicolas, Oct 25 2009, 03:30 PM.
Posted Image
(Thanks to HelenaZF for the awesomesauce signature. )

Big Boards
Hogwarts New Zealand
Offline Profile Goto Top
 
Numark Oct 25 2009, 03:30 PM Post #5
Member Avatar


Posts:
101
Group:
Member
Member
#3,539
Joined:
Oct 23, 2009
Excellent code Nicolas, nicely done! :D
Posted Image
Offline Profile Goto Top
 
Dorith Oct 25 2009, 03:37 PM Post #6
Member Avatar
Has just entered the Matrix

Posts:
2,069
Group:
Former Staff
Member
#1,854
Joined:
Dec 23, 2008
Very nice! This will be very useful!
Posted Image
Posted Image
(Made emoticon using Codes Rock's Smiley Generator)
Offline Profile Goto Top
 
RedBldSandman Oct 25 2009, 04:15 PM Post #7
Member Avatar
ZIPPY!

Posts:
482
Group:
Coding Staff
Member
#2,122
Joined:
Jan 25, 2009
Nicolas
Oct 25 2009, 03:28 PM
Thanks, Choco. :)
Good call there, RedBldSandman - it has been updated thusly. :) I don't see why anybody would put two file extensions on a file, though. xD
True, but now your code is perfection! Just revel in that thought <3
Posted Image
"To iterate is human, to recurse divine."

Offline Profile Goto Top
 
HelenaZF Oct 25 2009, 04:15 PM Post #8
Member Avatar
I wake up cuter every day

Posts:
146
Group:
Member
Member
#2,131
Joined:
Jan 26, 2009
Coding language
HTML/CSS
I am using this code and I love it. Although I really like that you can have multiple uploads in a post on ZB, I have really missed the thumbnail previews that were default on IF board uploads. I have been posting my upload files to display with image tags in my hosting topics (because I can't find things if I don't.)

This saves me that step, and also figuring out which image goes with which upload link. :D
Posted Image
Posted Image

Posted Image ................. the meaning of life

Offline Profile Goto Top
 
Dardan Oct 25 2009, 05:04 PM Post #9
Member Avatar


Posts:
19
Group:
Member
Member
#1,771
Joined:
Dec 12, 2008
I really like this and had been looking for something like this before. <3
Posted Image
Offline Profile Goto Top
 
Nicolas Oct 25 2009, 10:13 PM Post #10
Member Avatar
Awesome

Posts:
209
Group:
Dedicated
Member
#1,307
Joined:
Oct 22, 2008
Coding language
HTML/CSS
Thanks guys. :D
Anybody who really likes it, though, should thank Helena. xD I wasn't going to release the code at all (and likely wouldn't have bothered fixing it up as much as I have since its first version) if it wasn't for her using it etc.
Posted Image
(Thanks to HelenaZF for the awesomesauce signature. )

Big Boards
Hogwarts New Zealand
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Zetaboards Modifications · Next Topic »
Locked Topic
  • Pages:
  • 1
  • 2

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