For some time now I’ve been adding this easy-to-use tool, Lytebox, to SharePoint sites to produce Web 2.0 popup windows. Besides the functionality it provides, Lytebox requires no server code and is simple enough for any type of SharePoint user to add to a site.
Here’s a screenshot of a Lytebox popup. You can try this for yourself from the Lytebox Home Page.
Here are the steps to add Lytebox to your SharePoint site:
- Download the Lytebox files from here.
- Unzip the files to a local folder on your computer.
- In SharePoint create a document library.
- Using the multiple file upload link, upload the Lytebox files from your local folder to your newly created document library. You will need to create an images folder and load the files from the local images folder to the document library images folder.
-
To add Lytebox to a page, open the page in a browser, go into Edit Mode and then add a Content Editor Web Part. In the web part Source View add the following code making sure to substitute your Lytebox document library name (created in step 3) for AdminFiles below:
<script type=”text/javascript” language=”javascript” src=”../AdminFiles/lytebox.js”></script><link rel=”stylesheet” href=”../AdminFiles/lytebox.css” type=”text/css” media=”screen” />
-
Add another Content Editor Web Part.
- Using the Rich Text Editor, add some text and a hyperlink. Click Save.
-
Next, using the Source Editor, add rel, rev, and title hyperlink attributes as shown below in bold (adjust values as necessary):
<A href=”https://sp.test.com/default.aspx” rel=”lyteframe” title=”My Page” rev=”width: 600px; height: 700px; scrolling: no” >sp.test.com</A>
- Click Save.
- Click OK to save and close the Content Editor Property box.
- Exit Edit Mode.
That’s all it takes. Now click on the hyperlink you created to see the Lytebox popup.
Variations of this include loading the Lytebox into the same document library as your site page. In this case, remove “../AdminFiles/” from the src and href links in step 5. Another variation is to use a Data View instead of Content Editor Web Part for the hyperlink. In this case individual items can be opened.
Hi,
I am unable to open my website link in PopWindow
please Help me ASAP
I would double check your path to the lytebox files (lytebox.css and lytebox.js). In my example, I uploaded them to a document library called AdminFiles. However, your document library name may be different. Remember also that the path to your lytebox files is relative to where your page that has your CEWP is. In my example, the default.aspx file is at the root of my site.
Hi
Im want to use lytebox to show a PublishingWebControls:RichImageField but how do i link to the path inside a PublishingWebControls:RichImageField?
Do you know that?
Kind regards
Morten
Hi padavis,
the lytebox works fine, but unfortunately it disables the richtexteditor control.
Any idea?
I haven’t seen where adding lytebox to a site disables the richtexteditor control. I have many clients where I’ve implemented lytebox and have not had this reported. One thing I do know about the richtexteditor is that often it appears greyed out when you go to access it. Simply clicking on the editor enables it so that you can add your text. This is a known SharePoint issue.