Wordpress SchmancyBox Plugin

SchmancyBox, is the implementation of the FancyBox plugin for Wordpress.

So if you're a WordPress user, you'll probably love that stylish and easy to use plugin. Start to add some fancy effects to your website now!

The original idea of that plugin came from the London designer George Wiscombe and I'm glad he proposed me to get involved.

© George Wiscombe and Jeremy Desvaux
  • Previous Resource
  • Download
  • Next Resource

Demonstration

How to setup

Once downloaded, please unzip the content of the archive into your "/wp-content/plugins/" directory. Please note that if you're uploading it make sure to upload the top-level folder. Don't just upload all the php files and put them in "/wp-content/plugins/".

Activate the plugin through the "Plugins" menu in WordPress.
You may find here a tutorial that explains how to do so.

Once the plugin installed, and activated, you'll have access to the following menu.

Thanks to that menu, you'll have access to different parameters that you can all customize.

  • Class for LightBoxing: Class used to trigger the SchmancyBox e.g. "fancy": Every link with that class will then open their target into a SchmancyBox
  • Default iFrame dimensions: Specify the width and height of the created frame.
  • Overlay Show: Tick to show the background darkening.
  • Overlay Opacity: Sets the opacity percentage of the background darkening.
  • And finally, specify if you want to hide the Schmancy box animation when a link is clicked.

Now that the plugin is configured as you wish, you just need to create a link in the body of one of your page like this one: 

  1. <a class="fancy" href="/lib/lightbox/photos/image1.jpg">
  2. 	<img src="/lib/lightbox/photos/thumb_image1.jpg" />
  3. </a>

You can also download the "How To Use Guide", which contains some extra information.

Why not share this here:

  • Tweet this
  • Buy the author a coffee
  • Bump this
  • Digg this
  • Post this on Del.icio.us
  • Post this on StumbleUpon
  • Post this on Reddit
  • Post this on Technorati
  • Post this on Google
  • Post this on Facebook
  • Email this to a friend

You may also like:

  • How to create an Ajax, validated form
  • How to turn any jQuery plugin into a WordPress one
  • My Favourite MYSQL functions
  • Cached thumbnail Script
  • Creating a simple image gallery with PHP & jQuery
  • jQuery LightBox Plugin

Posted Comments

Johannes
Definitely a plugin I'll use on a few Wordpress sites.
From Johannes at 15:53 30/03/11 { Reply }
jdmweb114352
@Blind.
En fait Blind, si vous avez spécifié la class fancy dans la case 'div for lightboxing', il faut ensuite écrire:
<div class="fancy">
<a href="/lib/lightbox/photos/image1.jpg">
<img src="/lib/lightbox/photos/thumb_image1.jpg" />
</a>
</div>
La différence c'est qu'il faut avoir ce div avec la même classe, avec vos liens (sans classe), dedans.
From jdmweb114352 at 12:17 25/07/10 { Reply }
Blind
Et bien non ça ne marche pas, j'ai bien suivi la méthode pour l'image comme celle ci en spécifiant bien mon chemin pour mes images: <a class="fancy" href="/lib/lightbox/photos/image1.jpg">
<img src="/lib/lightbox/photos/thumb_image1.jpg" />
</a>
Peut-être parce que je suis sous Wordpress 3.0 :/
From Blind at 23:19 24/07/10 { Reply }
Blind
@jdmweb114352. Merci pour votre réponse.
Pourtant c'est bien ce que j'avais compris, j'ai du me tromper dans le code pour l'image, je vais vérifié ça.

Merci beaucoup.
From Blind at 19:29 24/07/10 { Reply }
jdmweb114352
@Blind.
Bonjour Blind,
Dans ce paramètre, précisez un nom de classe que vous voulez attribuer à votre div. (par exemple 'gallery' ou SchmancyBox').
La manip sera que le plugin saura du coup que chaque lien qui se trouve dans un div doté de cette classe devra se comporter comme une SchmancyBox, et non pas comme un lien normal.
From jdmweb114352 at 19:26 24/07/10 { Reply }
Blind
Salut,

J'ai un petit problème, je ne comprend pas trop ce que je doit mettre dans les paramètres de SchmancyBox dans "Div for Lightboxing".
PS: je ne connais pas trop les manip pour ce genre de plugin :/

Merci.
From Blind at 15:21 24/07/10 { Reply }