In this tutorial, we are going to install a small photo slideshow with a lightbox into the sidebar of a WordPress blog. This is a great way to add colorful images and interactivity to your site. I am going to use the Slate theme, which is available as a free download from our site. Let’s jump right in.
JavaScript files
To begin with, we are going to be using a JavaScript library called jQuery. JQuery is included in the normal installation of WordPress. In addition, we will be using a jQuery plugin called the jQuery Cycle Lite Plugin. You will need to download the min version, making sure to keep the original file name. Finally, you will need the jQuery lightBox plugin.
Upload jQuery Cycle Lite Plugin
Upload the file jquery.cycle.lite.min.js to /wp-includes/js/. . This is a good place to store any javascript files that you will be using to power features on your blog.
Configure and Upload the jQuery lightBox plugin
After unloading the zip file, upload all the .gif files in the images folder to /wp-content/themes/slate/images/. Open the file jquery.lightbox-0.5.js, in a text editor like notepad. Look for this section of code:
// Configuration related to images
imageLoading: 'images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
imageBtnPrev: 'images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
imageBtnNext: 'images/lightbox-btn-next.gif', // (string) Path and the name of the next button image
imageBtnClose: 'images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
imageBlank: 'images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)Change the paths to include our locations. As an example:
// Configuration related to images
imageLoading: '/wp-content/themes/slate/images/lightbox-ico-loading.gif', // (string) Path and the name of the loading iconSave these changes. Upload this file to /wp-includes/js/.
Our final step is to copy all the stylesheet information from the file jquery.lightbox-0.5.css and paste it onto the end of the stylesheet style.css, which you can access in the theme editor available through your WordPress dashboard. Remember to include the author’s information–it’s good form and should always be done.
Linking JavaScript files
Using the theme editor in your WordPress dashboard, open the template file header.php. Just before the </head> tag paste this code:
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-includes/js/jquery.cycle.lite.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('#slideshow').cycle();
});
</script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-includes/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('#slideshow a').lightBox({fixedNavigation:true});
});
</script>In this script we are accomplishing several things. First, we are linking our site to the three JavaScript files. Next, we are defining the container that will house our slideshow. In this instance, the container is #slideshow. Lastly, we are defining the linked images that we will be targeting with the lightbox script. Again, in this instance we are targeting linked images in the div #slideshow.
Making the image files
In order for this feature to work, you will need to create the image files that will be displayed in the slideshow and the files that will be displayed in the lightbox. In this example, the smaller slideshow images will be 200px square. The larger images can be whatever size you choose. Here is an example with just one image, one at 200px square, and the other at 320 x 427px:
HTML in the sidebar
I want my slideshow to display images at the top of the sidebar, above the search field. Open sidebar.php and add the following code just below the opening tag <div id="sidebar">:
<div id="slideshow">
<a href="<?php bloginfo('template_url'); ?>/images/your_image1.jpg" title=""><img src="<?php bloginfo('template_url'); ?>/images/your_thumb1.jpg" width="200" height="200" border="0" alt="" /></a>
<a href="<?php bloginfo('template_url'); ?>/images/your_image2.jpg" title=""><img src="<?php bloginfo('template_url'); ?>/images/your_thumb2.jpg" width="200" height="200" border="0" alt="" /></a>
<a href="<?php bloginfo('template_url'); ?>/images/your_image3.jpg" title=""><img src="<?php bloginfo('template_url'); ?>/images/your_thumb3.jpg" width="200" height="200" border="0" alt="" /></a>
<a href="<?php bloginfo('template_url'); ?>/images/your_image4.jpg" title=""><img src="<?php bloginfo('template_url'); ?>/images/your_thumb4.jpg" width="200" height="200" border="0" alt="" /></a>
</div>Where your_image and your_thumb are replaced with the file names that you used. If you look at the structure of this html, you see that we have created the div slideshow and filled it with linked images where the destination of the link is the larger image.
Add css to the Stylesheet
Our final step is to give specific dimensions to our div. Open style.css and add:
#slideshow {
height: 200px;
width: 200px;
}Save your styesheet changes and give your blog a visit. If you would like to see the demo for this, it’s currently up at the Slate theme demo site, but be forewarned that as I run other tutorials, things at the site may change and this feature may be removed.
As a final thought, consider making a donation to the individuals or groups that supply the jQuery plugins. A little bit from a lot of people will make a big difference in their ability to produce more great stuff. Enjoy!
Related Media
spread the love
Comments
05.24.09
Thanks for the tutorial. Every thing is explained well for a newbie to jQuery.
The slide show works well for me but the lightbox effect (bigger images open when clicked) that you show in your demo does not open in an iframe. It just displays in the same windows below the current content. Am I doing something wrong?
thanks
05.25.09
Hi ybkishore,
It sounds as though your calling up the jQuery library, and the cycle lite plugin, but something has gone wrong with the lightbox plugin. I would try looking over this code:
You want to be sure that the lightbox file is named the same as the one that you uploaded, and that it is in the right directory. It’s very easy to grab a
.minversion, and not title it as such. Additionally you could replace<?php bloginfo('url'); ?>, with the full url of your site.I use
<?php bloginfo('url'); ?>, because it’s flexible, but it’s a good idea to check what WordPress has for your url. To do this open the General Settings window and look for the Blog address (URL) line. Make sure this matches your blogs location. I’m going to guess it’s correct because the cycle lite plugin is running, but its worth checking.See if that does it. Be sure let me know if that’s not the issue, there could be a bug in the tutorial.
06.02.09
I have downloaded slate onto my blog.
But I’m having difficulty in setting up jquery.
Can anyone help a complete idiot?
06.02.09
jQuery comes packaged as part of the WordPress installation. It should be available at:
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-includes/js/jquery/jquery.js"></script>You could use an ftp client like FileZilla to check in that directory, but it should be there.
06.16.09
Being a novice I am missing directions.
Save these changes. Upload this file to /wp-content/themes/slate/js/.
Our final step is to copy all the stylesheet information from the file jquery.lightbox-0.5.css and paste it onto the end of the stylesheet style.css, which you can access in the theme editor available through your WordPress dashboard. Remember to include the author’s information–it’s good form and should always be done.
What would be inclusive of “all the stylesheet informtion.”
06.16.09
You will want to copy everything from the file jquery.lightbox-0.5.css onto the page style.css. This is a simple way to include the needed CSS information without linking to a new stylesheet, which would also work.
06.17.09
I have looked at your code and looked at mine. This script is not being written nor can I figure where to place the code in Word Press:
jQuery(function() {
jQuery(’#slideshow’).cycle();
});
jQuery(function() {
jQuery(’#slideshow a’).lightBox({fixedNavigation:true});
});
06.17.09
correction. I have it working, although I cannot get the next, prev and close buttons to display. Thoughts?
06.17.09
BB,
What’s the URL? It’ll help me to see your source code.
06.17.09
Thanks!
http://starrave.com/blog4/
06.20.09
Hi BB,
Sorry for the delay in my response. This week I moved from Portland OR. to Northern WA.. It was all I could do to check my email around all the madness. I took a look at your site, and I think the issue is the placement of images into the directory,
slate/images/. Or it may be the image path changes in jquery.lightbox-0.5.js. I would go back and check those steps a second time. When I set up the tutorial I made a similar mistake with the same results. Otherwise, it looks to me like your on the right track.06.26.09
hi Evan! Thanks for the tutorial, everything very clear, but I can´t make it work =).
The question is: in the step on linking to the JavaScript files, I see that you use this path /wp-includes/js/jquery.cycle.lite.min.js
But that file doesn´t exist…. weren’t we supposed to put that file in slate/js/jquery.cycle.lite.min.js ? (the same goes for the query.lightbox-0.5.js file).
Another question: I am using another theme (pixel). Should I still place the linking to the JS files in head.php? is that the same for every theme?
Sorry for my english, hope I could explained myself…
cheers and thx a loT!
06.26.09
Justina,
Thank you for pointing that out! I went ahead and made the changes necessary. It will work best to upload the
.jsfiles to/wp-includes/js/. This way the links I provide will work.You will want to link to the .js file from head section of the theme no matter what theme you are using. Hope that helps.
07.22.09
how do we link the lightbox thumbnail to open up to another page or website and not a larger image?
07.26.09
Hi Isabella,
I haven’t tried this but I think it will work:
This is the standard code for and image in the slide show.
<a href="/images/your_image3.jpg” title=”"><img src="/images/your_thumb3.jpg” width=”200″ height=”200″ border=”0″ alt=”" />
This is the section of that code that links to the larger image.
<a href="/images/your_image3.jpg” title=”">
If you strip out the link to our large image you are left with this:
<a href=”" title=”" rel=”nofollow”>
Insert your link into the first set of parenthesis. I think that will do it.
03.22.10
Hi Evan,
Great works. I am stumbled upon getting to switch from one lightbox on a page to jump to another page (when next is clicked), and yet show the other page with another lightbox overlay.
Is this possible at the first place, hope I am not asking for something weird. But being a newbie, not sure if I have framed my question currectly.
Let me know if this makes sense to you.
Thanks,
Zullu.