My name is Nicolette. Fifteeeen years young. Oddly optimistic. Cheerleader. I live life to the fullest & I love to have fun. No regrets. ... View my photography.
◊ have a question?
I would love to help you! Feel free to email me any questions you have about webdesign and/or graphic design. I will do the best I can to help you, and even offer some helpful tips. Email me at musicluver611@yahoo.com
3. Open all of the images in the folder (closelabel.gif, loading.gif) into PSP, Photoshop, Paint, etc. You can edit them here. (This step is completely optional.)
4. Upload the FaceFiles folder onto your site's FTP.
5. Open up the facebox.css file. Change all of the links to http://www.YOURSITEHERE.com/facefiles/LINKTOTHEIMAGE For example:
Old path to image:#facebox .b {
background:url(b.png);
} New path to image:#facebox .b {
background:url(http://www.candierocks.com/facefiles/b.png);
}
6. On the pages in which you want the Facebox to be on, paste this code:
<script src="http://www.YOURSITEHERE.com/facefiles/
jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="http://www.YOURSITEHERE.com/facefiles/facebox.css"
media="screen" rel="stylesheet" type="text/css" />
<script src="http://www.YOURSITEHERE.com/facefiles/facebox.js"
type="text/javascript"></script> <script type="text/javascript">
jQuery(document).ready(function($) { $('a[rel*=facebox]')
.facebox() }) </script>
*Note: Change YOURSITEHERE to your site URL.
7. Now to make an image popup using the facebox, add rel="facebox" to the url.
For example:
Old link: <a href="LINKTOGRAPHIC" target="new">Preview Graphic</a> New link: <a href="LINKTOGRAPHIC" target="new" rel="facebox">Preview Graphic</a>
And you're done! If this tutorial helped, please link back to Candie Rocks. (:
/**navigation**/
User(s) Online
