Tag Archive for 'jQuery'

The future of WP-Slimbox2

I’d like to think that since its inception WP-Slimbox2 has come a long way and that there’s not really much further to go. Having said that, I can think of a few changes that can still improve the plugins functionality over all.

One of the first things I’m looking to do is to utilize the copy of Farbtastic that’s already included with WordPress. At the time I implemented it WordPress did not include Farbtastic (I’m not sure it included any sort of color selection), and after searching I decided that Farbtastic was the best choice. Turns out the WordPress team thought so too, since they went ahead and incorporated it into a later build. Now that it’s included, I can remove my own copy and update my code to utilize it instead. Ultimately this shouldn’t really have a direct impact on anyone, but it does make the code better.

Another thing I’m looking at is to more extensively utilize the Settings API. Apparently it can be used for the entirety of your settings pages, so I’m going to see what I can do. At most, this should only affect the appearance of the settings page, but it also should improve the code.

When it comes to more substantial changes to the plugin, one of the most requested features has been the ability to resize images to fit the screen. In the past I usually avoided this request, viewing it as more a matter of having to actually change the core code of Slimbox2. Since I didn’t create, nor do I maintain Slimbox2, and the creator of Slimbox2 (Christophe Beyls) explicitely stated he would not add this feature because the intent of Slimbox 2 was simply to provide a beautiful display of the images with minimal overhead, I chose to simply reiterate his stance. In thinking about it more recently, however, I’ve decided that if I can find a way to manipulate the image sizes using an additional Javascript file, I could make this an option that you could choose to enable or disable. By enabling it, you would slightly increase your overhead, but you’d gain the benefit that the images would never be too large. I can’t say definitively that I’ll be able to do this, but I’m definitely going to take a serious look at it.

Another feature that’s been requested at least enough time for me to consider it would be the ability to replace the bottom “info bar” section, where you can display the URL and/or caption, with some sort of customizable code. Be it for social media purposes, or a special downloading script, etc. Again, I can’t say this is possible such that it could easily be utilized by everyone, but I’m definitely going to see what I can do.

There’s a good chance I’ll come up with more, and like I said, I can’t guarantee those two bigger features will ever happen, but there’s still some things to squeeze out of the plugin! If you’ve got any suggestions, chime in at the comments, or better yet, the forums. Please note, like I said above, any new features/changes need to be implemented from outside the actual Slimbox2 Javascript. I’m not going to alter that core code, however I’d be more than happy to build things around that.

WP-Slimbox v1.1.1 Release (also v1.1, v1.0.3.4, & v1.0.3.3)

This post is extremely late in coming (v1.1.1 was released several days back, and before that I released v1.1 shortly after the release of v1.0.3.4, and even further back we had the release of v1.0.3.3), but I am proud to announce the release of of WP-Slimbox2 v1.1.1.

The biggest change between versions was, obviously, from v1.1 to v1.0.3.4, but I’ll lay out everything for you. It’s about time I got around to it, anyway.

v1.1 has actually been in the works for likely over a year, unfortunately, do to medical issues as well as just a lack of time, I just kept getting started on updating it, only to find myself getting sidetracked or bogged down. Next thing I knew, I’d be going back to the code and trying to figure out what I’d just done. Meanwhile, translations were pouring in. My initial plan was to release the translations along with v1.1 of the plugin, unfortunately, as more and more time was passing I came to realize that for the most part I was just sitting on these translations instead of releasing them for the community. Sure, some people may have stumbled onto the files in our support forums, or through other means, but even more people could benefit from them if they were built into plugin by default. Eventually I got fed up with my progress on v1.1 and decided I’d switch back to the v1.0.3.3 codebase and make a much smaller modification to incorporate all of these translations. At the same time, I also chose to remove the usage of the function encodeURI because it seemed to create more problems than it solved. That small code tweak, along with the additions of Brazilian Portuguese/Português brasileiro (provided by Marcelo), Italian/Italiano (provided by Giacomo), Lithuanian/Lietuviškai (provided by Nata Strazda of Web Hub), and Japanese/日本語 (provided by ackie00h) translations culminated in the release of v1.0.3.3 of WP-Slimbox2 on Dec 18th, 2011.

Shortly after the release of v1.0.3.3 I was given yet another translation, Russian/русский язык (provided by nafanyabr). While I was briefly tempted to again wait until the release of v1.1, I looked at my code and decided it would be best to just make a small update to the v1.0.3.3 code to include the translation – thus v1.0.3.4 of WP-Slimbox2 was released on Jan 25th, 2012.

After v1.0.3.4 was released, I was determined to chug ahead and get v1.1 out, and so I focused on that. This release was massive, at least in regards to how much was changed. An extensive re-write was done that included several minor fixes to eliminate PHP warnings and errors. In most WP environments, errors and warnings are suppressed. It wasn’t until someone mentioned them to me that I realized they were there, and when I enabled their output, it was ugly. Luckily, it’s pretty easy to debug them once you’ve got them outputting. I also removed a few WordPress functions that had been deprecated, to avoid breaking the plugin at a later date. That was actually a challenge, since the deprecated function wasn’t actually been called directly from my code. Unfortunately, I’ve already forgotten what it was, or I’d share it so that others could benefit. Also added was the ability to use rel="nolightbox" to exclude an image. This served little purpose if you manually set rel="lightbox" on your images, but if you were using autoload, occasionally had an image you didn’t want the lightbox effect on this would allow you to exclude it. Another new feature that had been requested was the ability to link to a URL different than the image. I couldn’t really think of a good way to do this, but I managed to write some parsing code that would let you place a URL in front of your caption variable as so /*DESIRED URL*/. It would essentially split your URL and your caption into two pieces, and replace the images direct URL with the one you provided. Also as part of the rewrite, I took my increased understanding of Javascript, jQuery, and the Slimbox2 script to allow you to group Flickr, Picasa, and other images into the same group. Before you had to have them in distinct groups per their origin. Now, if you were autoloading your images, you could group a Picasa, a Flickr, and a locally hosted image all in the same group by choosing the correct selector. If you specified them using rel="lightbox-group" you could manually group them by using the same group name. As if this wasn’t enough, I finally got around to ditching the usage of WPlize. At the time I integrated WPlize with my code either WordPress didn’t support option arrays, or I incorrectly thought it didn’t. Either way, WPlize allowed me to group my options into an array and store them as a singular option. Conveniently, it stored the options array the same way that WordPress did (after WordPress added this ability…whenever that was). I just needed to replace the WPlize functions I’d been using with their WordPress counterparts. Unfortunately, when I did this I created a problem that would need to be fixed in v1.1.1, but I’ll get to that in a bit. Since I was already dealing with the options again I decided to make several other changes to how they were handled. In WordPress 2.7 they modified the get_option function to support a default option value. Also added was something called the “Settings API.” In short, the settings API “allows admin pages containing settings forms to be managed semi-automatically.” This actually makes for much cleaner code that is easier to later modify/add to. At the time I’m not sure I was aware of exactly how robust the entire API was, since all I wound up using was the register_setting() & settings_fields() functions, but in research since then I’m tempted to utilize more of it in an upcoming release. Anyway, settings_fields is used on the options page to link the form fields to the settings specified by register_setting. register_setting takes 3 parameters – $option_group, $option_name, and $sanitize_callback. settings_fields only accepts 1 parameter, the $option_group. I believe this is pretty straightforward, but the addition of the $sanitize_callback allows you to create a function that will review and process the settings such that they actually match what they’re supposed to, so no one feeds in invalid data. Invalid or missing data was then set to the default value. While unnecessary, since I now had a validation function, I decided I’d use it when I load the options variable as well, so I placed a call to it around my get_option call. Now, like I said above, get_option supports to new $default value. For v1.1 I chose to actually just use my initialization function call. These functions helped a great deal in ensuring that the WP-Slimbox2 settings would be valid and available even if something went wrong. I also decided it was time to remove the localization tracking I’d added shortly after I started to get translations. Not only did I not particularly care about the data anymore, I found out it may have even been in violation of the WordPress ToS…oops. I did forget to remove the actual file, but nothing was calling it anymore. Lastly, as I wrapped up my code changes I received yet another translation, this time it was Tradition Chinese/繁體中文 provided by shachi. And so, v1.1 of WP-Slimbox2 was released on Jan 31st, 2012.

Unfortunately, shortly after the release a larger number of users reported having major problems. For some reason their settings weren’t loading, and even when they tried to update them they wouldn’t save. Luckily it would function after they downgraded. Seeing as how it was running beautifully on my system, I was at a bit of a loss. For nearly a month I was wracking my brain for a reason, and then it hit me while I was in the shower. I’d actually encountered this problem once before, in a much earlier release of the plugin. The problem was that when I removed WPlize in v1.1 I also consolidated my get_option calls into one singular call at the top of index.php. My thinking was that, rather than calling it within each function I needed to use it, I’d just set it once and then access it through use of global $options whenever a function needed it. As I said, in my test and production environments, this worked like a charm. Unfortunately, for some reason that I still can’t figure out (after much searching), certain environments do not like this. As a result, when the function attempted to load the $options array, it was pulling up a non-existent variable. Obviously that would keep things from working. I quickly modified the code so that each function that needed it would populate the $options array on it’s own. In the end, I only needed this in two locations – once on the admin page, and once on the actual site page, so it should never really need to be called more than once at a time anyway. Finally, on Feb 22nd, 2012, I was able to release a fix, v1.1.1, that resolved the issues being experienced by people using v1.1. If anyone happens to know the reasons behind why I needed to do this to fix certain WP installs, please drop a comment!

I’ll be following up shortly with a post about the future of WP-Slimbox2, since I do have some plans!

WP-Slimbox2 Upcoming Release

I’ve been rather sick during the past year, which has put a damper on WP-Slimbox2 development, but I’m pleased to say that I have been working on it, and will hopefully have an updated release soon.

In addition to officially indicating support for the latest versions of WordPress (as you can see on this site, it still works just fine) there are a number of minor fixes to eliminate various PHP notices and some other small bugs and security issues. It will also add the ability to remove lightbox from specific images if you so desire, and also enter custom URLs in image captions. And, as the last post indicated, this release will officially incorporate the Brazilian Portuguese (Português Brasileiro) translation provided by Marcelo!

WP-Slimbox2 v1.0.3.2 (and v1.0.3.1) Released

So I had to release extremely two minor bug fixes (seems like that’s what usually happens).

Apparently I’d never committed the changes I’d made to handle the updated RTL localization support in the index.php file, so release v1.0.3.1 remedied that.

Then, after I had reports from two people who apparently had some minor issues with the plugin (one of them thankfully providing clarity to the issue) not loading the defaults. As it turns out, the code I’d implemented to help me see the localizations people running the plugin were using involved changes that I believe were initializing the plugin storage variable in such a way that bypassed the actual default initialization process. If you’d already been using the plugin, you didn’t notice a problem, but if you were a new installer you’d get a solid black screen when you tried to use the slimbox effect. Needless to say, that just wouldn’t do, so I tweaked the initialization code, and it should all be fixed now.

While you’re here, why don’t you check out our store and buy a T-Shirt!

WP-Slimbox2 v1.0.3 Released!

I’ve been sitting on a number of localizations that have been coming in ever since the previous release. I’d been holding off on an update since I’d hoped to get all the current localizations updated, rather than having several minor releases in a short period of time that only updated localizations. Unfortunately, nv1962, who graciously manages the Spanish and Dutch localizations, had a major computer failure just around the time of the last release. He wasn’t able to get things back in order until just a few weeks ago, which was a bit longer than I’d realized! Laws was also able to provide me with an update to the German/Deutsch localization.

In that time, however, I was also contacted by Marcis G. who provided me with a Belarusian/Беларускі localization, and later by easespot with a Chinese (Simplified)/中文 localization (and before I had a chance to release it FunDo provided a second Chinese (Simplified) localization).

Once all of the localizations were in and up to date I had to do some tweaking, plus my curiosity had been piqued by the number of localizations I was getting in, and I wanted to do something that would help me track just how many people are using WP-Slimbox2 in a language other than English, so I threw together a little tracking script, statTrack.php that would transmit that information to me upon activation of the plugin. The only information that’s transmitted is the locale, and it’s only ever done once. Since I know some people are a bit touchy about anything that “phones home” I implemented it in such a way that it can easily be deactivated by deleting the statTrack.php file, without effecting the functionality of the plugin.

Now, just as I was about to wrap all of that up, Christophe Beyls, the creator of Slimbox, posted a comment on the last release letting me know that he’d just released version 2.0.4 of Slimbox, so of course I had to tack that on to the list of things to implement! The main thing he’d implemented that would effect the WordPress community was increased support for RTL languages, though I still don’t have any RTL localizations. He also fixed a few issues with jQuery 1.4 and Flash (currently WordPress only uses 1.3.2, but some users may implement 1.4, and eventually WordPress will likely upgrade. He also trimmed the script down a bit by removing some compatibility code, which was no longer needed after he switched the jQuery requirement to 1.3.

Ok, so I finally got all of that taken care of, but there was still one more thing to do! My brother and I have been hoping to start marketing some custom art type projects, and he’d finally gotten around to getting some of them off the ground, so we’ve added a store! Currently we’re just selling some silk-screen shirt designs, but it’s still cool. Check it out and support Transient Monkey!

WP-Slimbox2 v1.0.2 Released!

I’m a bit late writing this post, but it seems like every time I make major changes to my plugin, I get hammered with a bunch of little glitches that effect a bunch of people other than me. I suppose that’s the downside of not having a group of people to do beta testing for you. On the plus side, I’ve been doing my best to stay apprised of problems as they arise in the support forums (and even those from people who….irritatingly…fail to read about posting problems in the support forums and post them in comments or on the WP site).

I think, and hope, that I’ve finally ironed out all the little glitches. The only problem I’m still aware of is actually not a problem with the plugin so much as it is a problem with other plugins and themes that fail to properly load jQuery by using wp_enqueue_script(). It always bugs me when people have problems with my plugin because of someone else’s poor coding practice. It bugs me when people have problems with my own poor coding, but at least I have only myself to blame for that!

For those of you curious as to what was done in the 1.0.2 release, I patched a rather glaring error related to Internet Explorer, a potential XSS vulnerability, and an obscure updating issue. I also added a Turkish/Türkçe Translation, graciously provided by Serhat Yolaçan and an updated French/Français Translation again provided by Jandry.

For those of you who are curious, the XSS vulnerability was due to an issue discussed here, by Mark Jaquith. While I understand how one could trigger the exploits, I don’t fully understand how those exploits do any damage, but whatever the case, it’s been resolved. I don’t actually think this was a real security issue for most people, since you have to be logged into the admin options to access it, but in WordPress MU installs it could have been an issue. Either way, upgrade! Fixing this issue also had the added bonus of fixing an issue where one user was unable to update their Slimbox settings because somehow the form was submitting the server directory path, and not the url path. I don’t really know what caused that in the first place, nor do I know why it wasn’t a problem in previous versions of the plugin, but it’s fixed, so I won’t complain.

The issue with Internet Explorer likely effected more people, given the prevalence of IE users out there, and unfortunately was tied into my transition from dynamic JS files to static JS files. Essentially I was trying to convert a string array of numbers into an integer array of numbers, so I used a function I’d found, .map(Number). Unfortunately, I failed to then test the script in IE, since I would have discovered that apparently that function isn’t supported by IE. There’s likely a much better way to do it, but ultimately I wound up manually writing a loop to create the integer array and allow the script to work correctly in IE.

I’m hoping to have version 1.0.3 out later this week, but this update should only interest people who use the Spanish/Español, Dutch/Nederlandse, and German/Deutsch translations, or would like to use the plugin in Simplified Chinese! That’s right, the next release will include Simplified Chinese thanks to easespot.

Hopefully I’m done with major updates to the plugin, and future releases will be limited to simply adding translations, but if you have good ideas feel free to post them to our support forums and I’ll see what I can do.

WP-Slimbox2 v1.0.1 Released!

That’s right, another update already! Unfortunately, this one was to fix an issue some users were reporting regarding an error after installing the plugin that sadly made their sites unusable. I hope everyone who was experiencing that issue has since upgraded and can get back to enjoying the benefits of the plugin.

Several users reported errors similar to the following:

Fatal error: Call to a member function get_option() on a non-object in /var/wordpress/wp-content/plugins/wp-slimbox2

In each case, it appeared that for some reason the $options variable, which was declared as a global variable, was not being properly recognized as an object. I don’t know why this is, though I suspect it’s tied into either the version or the settings of PHP being used on the host. This would explain why several users had no problems, and several others did. In one case someone had no problems on one site, but on another site they did.

If anybody can explain to me why this is, I’d appreciate it. Either way, I was able to resolve the issue by just recreating the variable in each function. This seems to me like it would be less than ideal, but someone else informed me that WP already caches options after fetching them, to minimize calls to the database, and so by recreating the object, I’m just pulling from the cache, or something like that. It works, that’s the important thing!

While attempting to diagnose the problem I also discovered a tiny glitch resulting from one of the new features I’d added. The grouping of autoloaded images wasn’t correctly grouping my images by post anymore. The original code was written as follows:

slimbox2_options.selector = "div.entry-content, div.gallery, div.entry, div.post, div#page, body";
return (this==el) || ($(this).parents(slimbox2_options.selector)[0] && ($(this).parents(slimbox2_options.selector)[0]==$(el).parents(slimbox2_options.selector)[0]))

I misunderstood this to mean that it would search through the parent elements for each image, and progressively search for an element that matched the selector. In this case it would look for a div of class entry-content, gallery, entry, or post, as well as a div with an id of “page” and if that all failed the body element. In actuality, while this would do that, it would also sort the results, which screwed them up. I revised the code as follows:

slimbox2_options.selector = "div.entry-content, div.gallery, div.entry, div.post, div#page, body";
return (this==el) || ($(this).closest(slimbox2_options.selector)[0] && ($(this).closest(slimbox2_options.selector)[0]==$(el).closest(slimbox2_options.selector)[0]))

I could even drop the [0] as closest only returns a single element anyway. This function actually searches for the first parent element that matches the selector, not all of them. If it finds a gallery first, that’s what it returns, if it finds entry-content, that’s what it returns, etc. This would allow a bit more granularity in the selection, and also better enable out-of-the-box support for more users and themes.

The downside to this change is that closest was introduced in version 1.3 of jQuery, which WordPress didn’t include until version 2.8. I’d hope most people aren’t hanging around updating their plugins and not their WordPress install, but you never know. If someone actually did want to do that, they could change closest back to parents, and just be more specific with the selector.

As translations are updated, or added I plan to make a few more minor releases, but hopefully I’ve got all the main things in now.

WP-Slimbox2 v1.0 Released!

It’s been practically a year since the last release, but I finally got up the motivation to mess with the code some more and add even more features to the already numerous possibilities within the plugin.

Release 1.0 includes several new options such as:

The ability to enable the effect on mobile phones (originally there was no option, but now it’s disabled by default).
The ability to control where the caption text comes from.
The ability to control what parent element to group images by.
The ability to render the caption as a URL to the original image.

Large portions of the backend of been rewritten as well and now the JavaScript files are entirely static, no more dynamic generation from php. This was accomplished by utilizing the wp_localize_script function of WordPress that let’s the options be loaded up in the main page, which is dynamic anyway.

If you localized the plugin in the past (or would like to now), please help bring your translations up to date!

WP-Slimbox2 v0.9.7 Released!

The latest version of WP-Slimbox2, v0.9.7, has been released.

Major changes on the user side include the addition of the wonderful jQuery Farbtastic colorpicker Javascript, created by Steven Wittens and a new key code detection script (written by me) that allows you to simply type the keys you’d like to use instead of looking up their key code.

Major changes on the backend include a rewrite of the core to utilize the WPlize class to clean up the code and minimize database calls by utilizing a single database entry and utilizing an array to store all the variables.

Major changes for people who don’t speak English, or would just prefer to use their native tongue, we’ve added Dutch/Nederlandse and French/Français to the list of supported languages. Thank you nv1962 and Jandry for your efforts, and to all the translators for bringing their translations up to speed.

That means WP-Slimbox2 is now available in Dutch/Nederlandse, English (of course), French/Français, German/Deutsch, and Spanish/Español.

Hopefully the list of supported languages will continue to grow. If you’d like to contribute a translation, or have suggestions please post a comment and check out the support forums.

Gallery Integration and jQuery Slimbox WordPress Plugin

I added two plugins today regarding images galleries. One of them was to more directly integrate the gallery I already use, Gallery2, with WordPress. It’s called WPG2 and supposedly makes it easier to insert images into posts and so forth, though I’m still trying to figure out how it all works. Another nice feature is that it supposedly supports lightbox and slimbox display effects, I was unable to get these to work, but since it supported those effects with separate plugins I tried the numerous ones available for WordPress and was able to get the effect. Unfortunately most of these effects used JavaScript frameworks that weren’t already loaded on my page (MooTools, prototype). Since my page uses the jQuery framework already (thanks to the K2 theme and my work on the Multi-Level Navigation plugin) I really wanted one that would use it so I could cut down on load times.

As it turns out, there was one option, jQuery Lightbox Balupton Edition which worked ok and obviously did use jQuery, but it had a few really annoying aspects to it, like the big advertisement in the upper right corner when you used the effect, plus the name was ridiculously pretentious. For some reason several of the plugins I tested also had issues where the dropdown menu wouldn’t properly situate itself into the background either (though I could resolve this by changing my menu’s z-index).

What to do? Well, I searched around the WordPress plugin repository, that’s how I found the various plugins that I did test, and then I tried a few internet searches. That’s how I stumbled onto Slimbox 2, the ultimate lightweight Lightbox clone for jQuery. Unfortunately I couldn’t find a WordPress plugin for it, fortunately the javascript itself really just needed to be loaded up, the gallery plugin already added in the lightbox cues (though the JS also will add them in for images that don’t have them). Ultimately I could’ve just hacked it into the code, or probably plugged it in with a K2 hook, but I figured it be better to just write a new plugin to do it, so I did. Currently it’s basically just a tiny php file that tells it to enqueue the javascript, points to a CSS file, and has a few image files, but I’ll see if I can maybe flesh it out, after I look over what capabilities Slimbox 2 provides. I’ll also likely want to figure out how to properly credit the author of the script, but assuming I can figure it all out I’ll likely release it for others to use too.

Let me know what you think.




Bear