MadBoxr (MODx plugin)I wrote a MODx plugin, that is the CMS that I use for this website. It works using a widely known script (Lightbox, or better, a pair of variants), and it shows bigger images when you click on thumbnails. Its animation is very famous, its name is "fancy pants". Click on the images below in order to see it in action. Using MadBoxr on a website that makes use of MODx is very simple. Everything is manageable from the TinyMCE Rich Editor. You need to create a link around the text or the image that you want to trigger the box. In this link, in the "Link URL" field, you have to insert a string that begins with #madboxr and can be followed by a ? and a list of parameters. Currently, parameters are the following:
An example of a string used in the "Link URL" field is the following: #madboxr?w=640&h=480&url=http://www.google.com Please notice the = to separate the parameter name from its value and the & to separate more pairs parameter/value. Scripts usedLightbox is the first script that implemented the feature showed in this page, it has been developed by Lokesh Dhakar and it uses prototype and script.aculo.us JavaScript libraries. Since MODx uses, instead, the mootools JS framework, my MadBoxr plugin uses Slimbox, a Lightbox clone written by Christophe Beyls that uses mootools instead of prototype and script.aculo.us. It is also possible to use an extended version of Slimbox, written by Yukio Arita: this extended version allows iframe content in addition to images, while the original Slimbox script can display only images. Since Slimbox Extended seems to be a little bit slower, I give the choice of what script to use in the configuration tab of the plugin in MODx. If you want to show only images, choose "slimbox", otherwise choose "slimbox_ex". The extended version is the default if you follow the instructions at the bottom of this page. LicenseThis plugin is released under the GPLv3 license. Example 1: images (writing both URLs)
In this case the image has been taken from this website. While inserting the image, in the "Image URL" field we write the address of the thumbnail; we can also fill "Width", "Height" and "Title" fields. We create a link attached to the image and in its "Link URL" field we write #madboxr, followed by its options, in particular we need the parameter url, that tells to the script where to find the bigger image. The link and the image are as follows: <a href="In this specific case I have used the same image both for the thumbnail and the bigger image. In general you can use a smaller image for the thumbnail. Example 2: Flickr images
If the image has been taken from Flickr, it is possible to avoid to write both addresses (the one of the thumbnail and the one of the bigger image). In order to do this, the first thing to do is to link a Flickr image. Go to your Flickr page and choose an image. Click on the looking glass icon ("all sizes") and choose the appropriate size for the thumbnail. In the bottom of the page there is the URL of the image to be used for off-site linking. This is the URL that you will put in the "Image URL" field of the image that you put on your website. When you put a link on this image, it is sufficient to write #madboxr?flickr= in its "Link URL" field, and it can be followed by other parameters. The plugin will generate the right URL for the bigger image. Here is how the HTML should appear: <a href="#madboxr?flickr=&w=640&height=480"> On Flickr there are also other image formats (now we used the 500x375 size). In order to use another image size in the box, we have to consider that Flickr adds to the image name a character in order to show its size. For example, if the image address ends with a _t, it is a thumbnail (100x75). It is sufficient to use this character as value for the parameter flickr, for example: #madboxr?flickr=m&w=640&height=480. Esempio 3: webpage content (iframe)Using slimbox_ex, it is also possible to show content different from images, inside the box. In order to do this, it is sufficient to create the link which URL will be, as usual, #madboxr and it will contain, in the parameter url, the address of the page that we want to show. Click here to see the content of Google page in a Slimbox. The link is as follows: <a href="#madboxr?url=http://www.google.com">Click here</a> The snippet also works with MODx pages, for example, click here to see another page from this website. Remember that the url field need to be the last of the parameter string, e.g.: #madboxr?h=50&w=200&url=http://www.whateveryou.com/want/?q=45&p=34and NOT #madboxr?url=http://www.whateveryou.com/want/?q=45&p=34&h=50&w=200otherwise, the snippet cannot distinguish between parameters for it (h,w) and parameters of the url.
Plugin installation in MODxHere are the instructions to install this plugin in MODx:
Here is what you have to do to update the mootools of your MODx website:
Write a comment
Caafree
Posts: 1191 
Reply #1190 on : Fri November 21, 2008, 11:49:03
Caafree
Posts: 1191
Reply #1189 on : Fri November 21, 2008, 11:30:20
shoes
Posts: 1191
Reply #1188 on : Fri November 21, 2008, 11:11:22
shoes
Posts: 1191
Reply #1187 on : Fri November 21, 2008, 10:52:23
shoes
Posts: 1191
Reply #1186 on : Fri November 21, 2008, 10:33:42
Froshoesnds
Posts: 1191
Reply #1185 on : Fri November 21, 2008, 10:14:10
Froshoesnds
Posts: 1191
Reply #1184 on : Fri November 21, 2008, 09:54:58
Froshoesnds
Posts: 1191
Reply #1183 on : Fri November 21, 2008, 09:35:54
Caashoes
Posts: 1191
Reply #1182 on : Fri November 21, 2008, 09:16:38 |
.
|
Posts: 1191
Reply #1191 on : Fri November 21, 2008, 12:08:19