Install Lightbox Plus
To install Lightbox Plus, in the dashboard select…
- Pluins > Add new.
- Search for Lightbox plus.
- Follow the on screen instructions.
Important update!
After you activate the plugin, click Appearance > Lightbox Plus > (then click…) Save All Settings.
Don’t change any settings just click the save all settings button.
Make a new web page or post
- Click to place the cursor in the page where you want to include your image thumbnail.
- Select a file from the media library or upload a new image.
- In the insert media dialogue, look for “Attachment Display Settings”. In the “Link to” drop down choose “Media File”. Select your thumbnail size and click “Insert into post”.
- Click the “Publish” button.
When someone clicks the image in your website it will automatically open in a Lightbox.
Choosing a style for your Lightbox plus images.
Lightbox plus comes with many preconfigured styles.
- In Dashboard go to…
- Appearence >
- Lightbox plus.
- Lightbox Plus – Base Settings.
- Styles.
- Choose a style from the drop down list.
Make a text link open an image in a Light box
- Open the media library.
- Media > Library. Open the image you want to open when the text is clicked.
- In the top right of the screen look for File URL. (In the save box.)
- Copy the file URL.
- Type text in to your post or page.
- Highlight the text you want to use as a click-able link.
- Click the insert link button.
- Paste the URL in the link URL box.
- Click the blue Add Link button and then publish or update your post.
If you haven’t changed any of the settings in Lightbox plus, the image will automatically open in a Lightbox.
Opening wp gallery images in Lightbox plus
First change some settings in the Lightbox Plus plugin. In the Dashboard…
- Appearence > Lightbox plus.
- Find Lightbox plus – Primary Lightbox Settings.
- Click the “Other” tab.
- Find “Use For WP Gallery:” and tick the check-box.
- Click save settings.
- Lightbox plus will now open WordPress gallery images in a Lightbox.
How to add a gallery to your post or page
- Click to insert cursor in your page.
- Click “Add media” button.
- A new dialogue box opens, in the top left corner click “Create Gallery”.
- Upload new images or select images already in your media library.
- Click the “Create New Gallery” button (bottom right).
- In the “Edit Gallery” dialogue that opens, make sure “Gallery settings ” “Link to” drop down is set to “Media file” for each image you just uploaded or selected. (Top right of your screen.)
- Then click the “Insert gallery” button, bottom left.
- Click the update button in your post or page.
View your page.
Only open selected images in Lightbox plus
If you only want to open a small number of images in a Lightbox, but want most of the images on your site to open without a Lightbox effect, here’s how to do it.
- In Dashboard go to…
Appearance > Lightbox Plus. - Find…
Lightbox Plus – Primary Lightbox settings. - Click the “Other” tab.
- Select the “Do Not Auto-Lightbox Images:” tick box.
- And select the “Use Class Method:” tick box.
- Add images to your web page in the normal way.
- Then to make some of the images open in a Lightbox…
- Select an image and click the “Edit” icon.
- When the image edit dialogue opens, click the Advanced Settings tab.
- You can now see “Advanced Image Settings” and “Advanced Link Settings”.
- In “Advanced Link Settings” look for the “CSS Class” input box and type “cboxModal”.
- Click “Update”.
Then save your post and view the post in a browser.
Using Lightbox Plus to add links that open a YouTube video.
This is a long tutorial. If you’re a WordPress power user this is easy.
First in…
- Lightboox Plus – Base Settings.
- Tick the box that says…
- Use secondary Lightbox:
Then…
- Add a link to your page (text or image). You only need the http part of the YouTube Embed code e.g.
IMPORTANT! do not use the “Share this video” code. Click the Embed link and cut the URL from there.
- Add a class to your link.
Here is the full version…
First we need to change a setting in Lightbox Plus.
- In the WordPress Dashboard go to…
- Appearance > Lightbox Plus.
- Scroll down to…
- Lightboox Plus – Base Settings.
- Tick the box that says…
- Use secondary Lightbox:
Now we need to go to YouTube, find and save the code we need for the video we are going to link to.
How to get your YouTube link code…
- In YouTube, watch the video you want to link to.
- Underneath the video click the Share option.
- Now click the Embed option, (you only see this option after clicking share).
IMPORTANT! do not use the “Share this video” code. Click the Embed link and cut the URL from there. - Copy and paste the embed code in to Notepad or a plain text editor. NOT a word-processor!
- We only need the http:// part of the code e.g…
http://www.youtube.com/embed/0biRBEmBiZ8 - Cut the http:// part of the code from the YouTube embed code and save this code to use later. Use Notepad or a plain text editor to save the code, not a word-processor.
Add text or an image to your blog post or web page, this will trigger the video to open when clicked.
- Type in text or click the Add Media button, this will become the text or image you click to open the YouTube video in a Lightbox.
Making a text link open a YouTube video in a Lightbox. (Part one)
- Copy the YouTube link we got in an earlier part of the tutorial. (You only need the http:// part.)
- Highlight the text to use as the link.
- Click the link button. (In your WordPress toolbar).
- In the pop-up box that opens, paste your YouTube link in the URL box.
- Click the blue “Add Link” button.
Adding a text link (part two).
- Now you have a text link that opens a YouTube video but not in a Lightbox.
- Above the buttons in your WordPress edit screen click the Text tab. It’s on the top right.
- Find the link you just added. It will look like this Between the a and href type class=”lbpModal” see image below…
- The code starts with a lower case l and has a capital M.
- Save your page and check to see if it works.
Linking an image on your page to a YouTube video that opens in a Lightbox.
- Place an image on your page in the usual way, using the Add Media button.
- In your WordPress editor screen, click the image you want to use for the link.
- Click the Edit Image icon, this appears top left of your image after selecting the image.
- In the Edit Image dialogue that pops up, find the Link URL box. Remove the text that is already there and paste in your YouTube link that we got in an earlier part of this tutorial.
- Click Update to save your changes!
- At the top of the dialogue click Advanced Settings.
- Scroll to the bottom of the dialogue box and find Advanced Link Settings.
- In the box that says CSS Class type lbpModal (you don’t need the class=”” this time).
- Click the Update button.
Update (save) your page or post and test it in a browser.
Reset all Lightbox Plus settings.
Beware! This removes all of the settings you have made to Lightbox Plus.
If you’ve made many changes to Lightbox Plus settings and don’t know how to fix things, resetting Lightbox plus allows you to start again form scratch.
All your previous settings will be lost!
- Appearence > Lightbox plus
- Scroll to bottom of the setting spage.
- Click Reset/Re-initialize Lightbox plus.
You can now start from the beginning setting up your Lightbox plus settings.
Wow! if you’ve got this far you must be a WordPress ninja 🙂
I hope you found the videos and tutorials useful.
Philip.