Back to the front page
Innerfade plug-in for Wordpress by Moskis
July 30th, 2008
Filed under Web design
I’ve been fiddling around with jQuery, Thickbox and Innerfade (a simple but lovely jQuery-based slideshow), and trying to get all three to work on my Wordpress blog.
JQuery and Thickbox are included in the standard Wordpress install and are activated via the wp_enqueue_script('jquery') and wp_enqueue_script('thickbox') calls. For Innerfade, I found this Wordpress plug-in. The installation instructions are in Spanish, so I’ll translate them here for anyone interested.
- 1. Download the .zip file and unarchive it
- 2. Open the
innerfade.phpfile with a text editor and remove line 13 so that the jQuery plugin is not activated twice - 3. Change your Innerfade options for timing, sequence and animation, described here
- 4. Create a new folder in the
wp-content/plugins folderdirectory calledinnerfadeand upload theinnerfade.phpandinnerfade.jsfiles - 5. Activate the plug-in
- 6. To use the Innerfade effect, simply add the attribute
class="innerfade"to aultag that containsliitems with images.
Combining Innerfade and Thickbox
Each smaller Innerfade a tags, with an href attribute that points to a larger version of the image. By using the class="thickbox" attribute on these a tags, users can then click an image in the innerfade slideshow to see it open up larger in the Thickbox window. If you also include the same rel attribute for each a, you’ll be able to cycle through the gallery while in Thickbox mode, as described in the examples here.
Tagged as: innerfade, installation, instructions, jquery, thickbox, tutorial, wordpress
Web Design Tutorials commented on September 3rd, 2008 at 11:19 pm
Thx a lot for the nice tutorial and the psd - exactly what I was looking for!
kabonfootprint commented on September 3rd, 2008 at 11:35 pm
The more time that is spent dissecting, analyzing, and critiquing a design by the wrong kinds of people the worse that design gets. The same trend applies to the number of people involved in the design process.
Thx a lot for infomation!
Rich commented on September 5th, 2008 at 11:20 pm
I tried this plugin out on a site I’m working on and it works great in FF and Safari, but in IE 7 (and I’ll assume below) it pushes the slide show way right for some reason. If you have a moment, could you have a look at what is happening via IE. Thanks. puremountainliving.com is the address.
Rich
Rich commented on September 9th, 2008 at 6:36 pm
So, I figured out the issue, after pulling all my hair out. Basically, if you open the innerfade.php file within the innerfade plugins folder, you should see a style block that was added there. This was conflicting with my css and made it all wacky (but only in IE) I commented out the styling, and everything went back to normal.
Rich
Th3 ProphetMan commented on September 20th, 2008 at 2:37 pm
Hey! Thanks for spreading the word
Sal B commented on May 1st, 2009 at 3:26 am
Thanks so much for this! I wasn’t using the plugin but was using innerfade script and it wasn’t loading for me on subpages, only home page. Now it works through the site!
Brasileirinhas Chicas Fotos commented on August 4th, 2009 at 8:07 am
I should email u about this.
nelson commented on September 1st, 2009 at 9:36 am
thank you so much its a great plugin
Robert commented on January 26th, 2010 at 1:26 pm
I do not know what i am doing wrong, but plugin isn’t working for me… WP version 2.9.1 Plugin is active. Project url: http://http://www.i-deja.eu/test2/
Dramige commented on February 8th, 2010 at 6:34 am
? ?????: ?????????.
???????????? ? ??????? ? ????????? ??? ???????????? ? ???????? ? ???????
?????????? ? ????????? ? ???????: ? ??????? ??????? ??????? ?????? ????? ?????
???? ?????: ??????? ????? ?????
???? ??? ????? ????????????? ? ?????? - ???????? ???? ???????????? ? ????????
???????????? ? ??????? ????????? ? ??????????: ????????? ???????? ????????????
????????????? ? ???????????? ?????? - ? ??????? ????????????? ? ??????
??????? ????????????? ? ???????: ? ???????? ??? ????????????? ? ??????????
???????????? ? ???????? 60 ??? ? ????????? ???????????? ? ?????? 16 ???
???????????? ? ?????? ??? ?????? ????????? ?????? ???????????? ? ?????????????
????????????? ? ??????? ? ???????: ???? ????? ? ?????? ??????
???????? ??????? ?????? ????????????? ???????? ???????? ??????? ????? ????????????? ? ??????
????????????? ? ?????? - ???????? ??????? ?????? ?????????????
???? ????? ???????? ? ????????? ????? ?? ???????????
???????????? ? ????????: ???????????? ? ???????? ??? ??????
?????????? ???? ??????? ? ??????? - ???????????? ? ?????????