Slimbox!

View previous topic View next topic Go down

What do you think?

100% 100% 
[ 1 ]
0% 0% 
[ 0 ]
 
Total Votes : 1

Slimbox!

Post by iJerick on Sun Apr 04, 2010 7:11 pm

Heya!
What if we install a Slimbox on this forum!?

----
Summary:

Slimbox is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library (in version 2) or the MooTools javascript framework (in version 1). It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2. It popup when we posted an image link on the forum!

---
Download Link: http://slimbox.googlecode.com/files/slimbox-1.58.zip
Source: http://code.google.com/p/slimbox/
Demo: http://www.digitalia.be/demo/slimbox/


Last edited by johnerick_019 on Sun Apr 04, 2010 7:35 pm; edited 2 times in total
avatar
iJerick
SN Guru



Back to top Go down

Re: Slimbox!

Post by Josh on Sun Apr 04, 2010 7:13 pm

You need to summarize what this is...

Josh
Ultimate SN Fan



Back to top Go down

Re: Slimbox!

Post by JayJay on Sun Apr 04, 2010 7:20 pm

Yes I agree with Facebook,and will the admins know how to install this, and is it compatible for forumotion?
avatar
JayJay
Ultimate SN Fan



Back to top Go down

Re: Slimbox!

Post by iJerick on Sun Apr 04, 2010 7:25 pm

Summarize complete!

@ Jj S. : yes it works on forumotion! I tested this for many times!
avatar
iJerick
SN Guru



Back to top Go down

Re: Slimbox!

Post by Josh on Sun Apr 04, 2010 7:32 pm

I still don't know what it is? Is it a chatbox, an addition to the forum/plug-in?

Josh
Ultimate SN Fan



Back to top Go down

Re: Slimbox!

Post by iJerick on Sun Apr 04, 2010 7:36 pm

Demo: http://www.digitalia.be/demo/slimbox/

Click the image on that page! and you will see the example of the slimbox!
avatar
iJerick
SN Guru



Back to top Go down

Re: Slimbox!

Post by Josh on Sun Apr 04, 2010 7:45 pm

Interesting idea. Would we put it as an alternate for the gallery?

Josh
Ultimate SN Fan



Back to top Go down

Re: Slimbox!

Post by Admin on Sun Apr 04, 2010 7:51 pm

Looks awesome! But I'm still not sure where are we going to use it.

Admin
Ultimate SN Fan



Back to top Go down

Re: Slimbox!

Post by iJerick on Sun Apr 04, 2010 8:02 pm

iFacebook wrote:Interesting idea. Would we put it as an alternate for the gallery?
Yeah we can use it!
The Listener wrote:Looks awesome! But I'm still not sure where are we going to use it.
Yeah this is awesome! But we need to use it in pictures in foruM!Happy if you wish i will add an image resizer that is fit on slimbox! so it will look more beautiful!Happy


------

Hey GuyZ! Your vote is needed, so we can install a slimbox in our forum!
avatar
iJerick
SN Guru



Back to top Go down

Re: Slimbox!

Post by Admin on Sun Apr 04, 2010 8:16 pm

It's a yes. Now we'll try to figure out how to install it Happy Eyes

Admin
Ultimate SN Fan



Back to top Go down

The author of this message was banned from the forum - See the message

Re: Slimbox!

Post by iJerick on Sun Apr 04, 2010 8:24 pm

^^ Okay! Do your best guyz! haha! also thanks The Listener for yes!

But if you need help installing it, you can ask me too!
avatar
iJerick
SN Guru



Back to top Go down

Re: Slimbox!

Post by Admin on Sun Apr 04, 2010 8:29 pm

MasterMind wrote:
The Listener wrote:It's a yes. Now we'll try to figure out how to install it Happy Eyes

I Know how to, its Easy.

Awesome Very Happy Can you post how to, please?

Admin
Ultimate SN Fan



Back to top Go down

Re: Slimbox!

Post by iJerick on Sun Apr 04, 2010 8:55 pm

Hey! This is the tutorial how to do this!

1. Add this script to your Site Description!
Code:

<script language="Javascript" type="text/javascript" src="http://www.chitchatterzz.tk/thefacebookforum.js"></script>

2. Add this code to your css!
Code:

/* SLIMBOX */

#lbOverlay {
   position: fixed;
   z-index: 999;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
   cursor: pointer;
}

#lbCenter, #lbBottomContainer {
   position: absolute;
   z-index: 999;
   overflow: hidden;
   background-color: #fff;
}

.lbLoading {
   background: #fff url(http://i43.tinypic.com/novfao.gif) no-repeat center;
}

#lbImage {
   position: absolute;
   left: 0;
   top: 0;
   border: 10px solid #fff;
   background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {


   display: block;
   position: absolute;
   top: 0;
   width: 50%;
   outline: none;
}

#lbPrevLink {
   left: 0;
}

#lbPrevLink:hover {
   background: transparent url(http://i41.tinypic.com/11qo2nq.gif) no-repeat 0 15%;
}

#lbNextLink {
   right: 0;
}

#lbNextLink:hover {
   background: transparent url(http://i44.tinypic.com/1r7u6o.gif) no-repeat 100% 15%;
}

#lbBottom {
   font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
   font-size: 10px;
   color: #666;
   line-height: 1.4em;
   text-align: left;
   border: 10px solid #fff;
   border-top-style: none;
}

#lbCloseLink {
   display: block;
   float: right;
   width: 66px;
   height: 22px;
   background: transparent url(http://i44.tinypic.com/1217byg.gif) no-repeat center;
   margin: 5px 0;
   outline: none;
}

#lbCaption, #lbNumber {
   margin-right: 71px;
}

#lbCaption {
   font-weight: bold;
}

And that's it!

IMPORTANT: Disable the Image Resizer of the forum!

--
After the installation, try to Look this image!
avatar
iJerick
SN Guru



Back to top Go down

Re: Slimbox!

Post by Admin on Sun Apr 04, 2010 9:02 pm

It works perfectly Very Happy Thank you so much for suggesting this, it looks awesome!

Admin
Ultimate SN Fan



Back to top Go down

The author of this message was banned from the forum - See the message

Re: Slimbox!

Post by Admin on Sun Apr 04, 2010 9:37 pm

MasterMind wrote:
Code:
/* SLIMBOX */

#lbOverlay {
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}

#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 999;
overflow: hidden;
background-color: #fff;
}

.lbLoading {
background: #fff url(http://i43.tinypic.com/novfao.gif) no-repeat center;
}

#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #ffffff;
background-repeat: no-repeat;
}
#lbImage:hover {
position: absolute;
left: 0;
top: 0;
border: 10px solid #0055ff;
background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {


display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}

#lbPrevLink {
left: 0;
}

#lbPrevLink:hover {
background: transparent url(http://i41.tinypic.com/11qo2nq.gif) no-repeat 0 15%;
}

#lbNextLink {
right: 0;
}

#lbNextLink:hover {
background: transparent url(http://i44.tinypic.com/1r7u6o.gif) no-repeat 100% 15%;
}

#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}

#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(http://i44.tinypic.com/1217byg.gif) no-repeat center;
margin: 5px 0;
outline: none;
}

#lbCaption, #lbNumber {
margin-right: 71px;
}

#lbCaption {
font-weight: bold;
}
Heres your custom css Listener, if it doesnt work tell me.

Nope, I see no changes. Apart from the little stroke, could you also add an effect that when you hover it with your mouse, it gets less opacity?

Thanks a lot!

Admin
Ultimate SN Fan



Back to top Go down

The author of this message was banned from the forum - See the message

Re: Slimbox!

Post by iJerick on Sun Apr 04, 2010 10:00 pm

No Problem! i told you that is my pleasure when im helping this forum!^^

You can lock this topic noW!Happy

I will suggest more feature!
avatar
iJerick
SN Guru



Back to top Go down

Re: Slimbox!

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum