Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Facebox – Facebook Styled Lightbox

Facebox is really an awesome creation using jQuery. it can be used for many purposes such such as displaying images in a fancy or cool manure . we have covered many Facebook Tips and Tricks.its really an awesome creation.Facebox is a lightweight Facebook-style lightbox which can display images, divs, or entire remote pages (via Ajax) inline on the page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

Facebox consists of 2 .js files, 1 .css file and some images that make up its interface (such as round corner images). I have zipped the files together.



Click here to download the files

Download these files and upload to your server or any hosting or google account. After Downloading these files edit Facebox.css as per you blog requirement( If you don’t know how to do it, then ask me!!) and replace image sources of images(i.e. b.png, bl.png, br.png, tl.png and tr.png). Now, replace image sources in Facebox.js (i.e. closelabel.gif and loading.gif).

Are you confused?? If yes then leave a comment, i will explain you how to replace image sources.

Now, follow these steps:

  1. Go to Layout section and then open Edit html. Click on Download Full Template to take the backup of your current template(don’t miss this, else things may go haywire!!). Now, Check the box to Expand Widget Templates. Insert the following code in the Head Section. I would Suggest you to paste the code just above . 
    <script src=’‘ type=’text/javascript’/><link href=’‘ media=’screen’ rel=’stylesheet’ type=’text/css’/><script src=’‘ type=’text/javascript’/><script type=’text/javascript’> jQueryundefineddocument).readyundefinedfunctionundefined$) { $undefined’a[rel*=facebox]’).faceboxundefined) })</script><style type=’text/css’>.thickstyle{background: silver;}</style>

    Change the web address in red, if you have uploaded above files on your server or googlepage and Save the Template.

  2. Now its the time to explain how and where to use Facebox. 
    1. Display an image using Facebox: If you want to display images using facebox, use the following code: 
      <p><a href=”http://3.bp.blogspot.com/_nX0wvumD9VU/S81K21P3STI/AAAAAAAAAao/p66UQf6Qhgo/s1600/logo.png” rel=”facebox”> Best 2 know</a></p>

      Result of the above Code :

      Best 2 know

      Click on the above link for results.

      If you are using this scrip in a menu then, remove <p></p>

    2. FaceBox used to display an inline DIV: This is the most useful code. It can be used to display text notes, announcement, disclaimer, contact form and so on… In this case a link is placed on your blog and when you click on that link, the pop up (like facebook) appears. 

      <p><a href=”#mydiv” rel=”facebox”>View DIV with id=”mydiv” on the page</a></p><div id=”mydiv” style=”display:none”>This is the contents of a hidden DIV on the blog, with ID=”mydiv” and style set to “display:none” <br /><a href=”http://www.dynamicdrive.com”>Dynamic Drive</a></div>

      The Result of the above code :

      View DIV with id=”mydiv” on the page

      This is the contents of a hidden DIV on the blog, with ID=”mydiv” and style set to “display:none”

      Dynamic Drive

      Click on the above link and see the result.

    3. FaceBox used to display an external page, plus apply a CSS class to the container (to further style it): It is like previous one only, but with more styling is added to the pop up.
      <style type=”text/css”>.thickstyle{background: silver;}</style>”<p><a href=”http://www.best2know.info/2006/04/contact-us.html” rel=”facebox[.thickstyle]”>View “Contact Us page” fetched via Ajax, further styled with “.thickstyle” CSS class</a></p>

      The Result for above code :

      ”

      View “Contact Us page” fetched via Ajax, further styled with “.thickstyle” CSS class

      Click the above link for result.
      If it the pop up does not appear after following these steps.. reload the page twice and check again. Remove <p></p> and check, it should work.
      Note: Set href attribute to point to either an image, the ID of a hidden DIV, or a URL to the page on your blog only. Do not point it to any external link. It will not Work, if you do so.

so did you like it? Any doubts or questions? Leave a comment, i will surely help you…

Subscribe via Email

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to print (Opens in new window) Print
  • Click to share on WhatsApp (Opens in new window) WhatsApp
  • Click to email a link to a friend (Opens in new window) Email

Related

April 20, 2010 Ritesh Sanap Blogger Tutorials Blogger Hacks, Jquery

Comments

  1. Z says

    January 25, 2011 at 3:19 am

    dude, it didnt work at the slightest, it just redirected me to a differend page

    Reply
    • Ritesh Sanap says

      January 25, 2011 at 9:47 am

      Its because the blogservices.in host is down and the scripts are not loading for that I m sorry , you can get all those scripts and then host it.

      Reply

Leave a ReplyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: You might also like this Widget for blogger or Related post widget
Next Next post: Tool tip or hint widget for blogger

Currently Trending

  • How to download Specific parts of YouTube videos
    How to download Specific parts of YouTube videos
  • Windows Vista CD key
    Windows Vista CD key
  • How to retrieve my Demonoid username
    How to retrieve my Demonoid username
  • How to add Logo to Thesis theme
    How to add Logo to Thesis theme
  • How to Delete Feedbacks from JetPack Contact Form
    How to Delete Feedbacks from JetPack Contact Form
  • List Of All 255 Keyboard All Alt Key Codes
    List Of All 255 Keyboard All Alt Key Codes
  • h4x0r ( Hacker ) - Blogger Template
    h4x0r ( Hacker ) - Blogger Template

Get Latest post in your Inbox

Random Posts

How to add Programs to Right-Click – Customise your Right Click

July 10, 2008 By Ritesh Sanap Leave a Comment

Before Starting a Blog

March 14, 2012 By Ritesh Sanap 3 Comments

Google +1 button

June 2, 2011 By Ritesh Sanap 1 Comment

Xhilaration Blogger Template

April 14, 2011 By Ritesh Sanap Leave a Comment

How to add Slider to thesis theme

June 19, 2011 By Ritesh Sanap 6 Comments

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2025 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean