-
Notifications
You must be signed in to change notification settings - Fork 4
/
README
58 lines (43 loc) · 3.15 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
== Ibox Plugin
This plugin allows you to create a lightbox type of pop-up. That allows you to embed images, content or ajax content without the requirements of a js framework. This is based on the work of Farooq Ahmed with slight modifications.
== INSTALLATION
1. Run rake install_ibox to install all the necessary files for ibox
2. Put <%= iboxify_page %> in your layout file
3. Call an ibox like <%= link_to_ibox "Your Ibox", :for => "your/content" %>
== USAGE
Link an ibox to a picture:
link_to_ibox "View Image", :for => "my/special/image.jpg"
Link an ibox to a page to load via ajax
link_to_ibox "View Page", :for => "my/special/page"
Link to an ibox and specify the size (WxH), this defaults to :auto
link_to_ibox "View Page", :for => "my/special/image.jpg", :size => "300x300"
Link to an inline element:
link_to_ibox "My Div", :for => "#my-div"
OPTIONS :
* content => the content of the link
* :for => the content that you want to put in the ibox, it can be an image, page or inline content
- :size => the width and height of the ibox, it will default to :auto
- :title => This is the title attribute of the link tag
- :type => This is the type of ibox you want, link_to_ibox will try to detect it based on the :for argument
you can add in extra options for the tag as needed
== FROM THE JS README
== USAGE:
iBox works by looking at what is contained in the <a href=""> tag, and then modifying it as needed. The import variables inside it are:
- Inside each link (image, HTML page, inner div) you want to appear as an overlay, you have to add rel="ibox" to the <a> tag
- To set width/height of the inline overlay, use the following: rel="ibox&height=H&width=W" where H and W are the desired height and width respectively
- To set a caption, use title="X" where X is the desired caption.
- To differentiate between a JS and non JS user, set the normal href target to the non-JS page, and target="X" (where X is the desired overlay page)
- To force a type of iBox add the type=X (X=1,2,3) to the rel. (eg if the url is www.example.com/someimage.php and you want it load it as an image, you would have rel="ibox&type=1")
The only required element is rel="ibox" The rest are just extra features.
== EXAMPLES:
- To load an image as an overlay, set the target to be an image. Eg <a href="images/someimage.jpg" rel="ibox">An Image</a>
- To load an external page as an overlay, set the target to any page. Eg <a href="somepage.html" rel="ibox&height=300" title="Some Random Caption">A Link</a>
- To load an existing div on the page, set the target to its div name. Eg <div id="some_content">text inside a div</a> and then <a href="#some_content" rel="ibox">A div</a>
- A login form - load a page using AJAX as an overlay, or point them to a different page for non-JS users. Eg <a href="/login.html" rel="ibox&height=100&width=250" target="/login-simple.html">Login</a>
A total of 3 primary files complete the package. They are:
ibox.css - the CSS that controls the appearance of the overlay
ibox.js - the Javascript that drives the overlay
images/indicator.gif - the image used to show a user the image is loading
DEMO:
==
- http://www.ibegin.com/labs/ibox/