Sometimes one wants more control over how features are added to the site. Giving the option to either use a plugin or a jQuery scripts creates better control over the site one is working with. Most of the below jQuery lightbox – popup scripts also have a WordPress plugin available.
Adding a lightbox is one of areas I choose to use jQuery probably because I can. When I find a lightbox/gallery plugin that offers a lot more features then what I show below I might instead use it to cover my needs in this area. I might also create an article for the lightbox/gallery plugin as well.
There are mulitple demos available. Go to the above link and check them out.
->> A clicked image which shows a title top left, image 1 of 8 (depends how many images are on the page), Arrows left and right. There are different styles to choose from.
1. Go to the Colorbox web site and download the colorbox master zip file.
2. Check out the various examples and find one you want to modify.
3. In the root of the child theme folder add a new folder and call it colorbox.
4. Copy the images folder along with the content and the colorbox.css from the master colorbox example into the new colorbox folder.
5. From master colorbox folder also copy over the jquery.colorbox-min.js to the child theme colorbox folder.
For additional options see: www.jacklmoore.com/colorbox/ -> Settings.
An images folder (with content), colorbox.css, jquery.colorbox-min.js and the colorbox-init.js.
I decided not to use any transition.
Rel groups images together. Adding this also adds the arrows to go left and right.
Adjusted the opacity so one can see through the black background.
Title function is there so the title is added above the opened image.
7. In the child theme folder: functions.php file. Add the following code.
I added the zoom-out icon which shows up when moving the cursor outside of the lightbox image. To make it clear that one can click outside to exit the lightbox.
If you want to check out the plugin there is a Lightbox Plus Colorbox plugin and WP colorbox at the WordPress repository.
The following is some extra info regarding wp_enqueue_script and style.
handle: unique name for script or style.
source: the url of the script/style.
dependencies: An array of assets the script/style depends on. Loaded before the enqueued script.
version: A version number which will be appended to the query. To make sure that the user receives the correct version.
in_footer: For loading scripts in the wp_footer() at the bottom of the page.
media: How the media should be displayed.
Example: screen, print. handheld etc.
There are examples on the above link to see what the lightbox – popups look like.
A magnific popup image. Stand alone images do not contain arrows. Gallery images do.
2. Unzip and go to the dist folder.
Copy the jquery.magnific-popup.min.js and the magnific-popup.css. Create a a new folder you can call magnific-popup in the root of your theme folder paste the two files there.
3. Create a new js file and call it jquery.magnific-popup-init.js. It is to initialize the lightbox.
Save the file into the newly created magnific-popup folder inside the child theme folder.
The second line says that the various images are to use magnific lightbox when clicked on.
Then a section for single images and then for galleries. There is a lot of code and I am looking into improving it and making it shorter.
5. Since I have some images that are taller then the vertical viewpoint. To be able to scroll while seeing the tall image I have to add some extra CSS to the magnific-popup.css file. Scroll to where you see the img.mfp-img css class. Add the max-height:100% !important for all the images to show their original size.
There is also a WP Magnific lightbox WordPress plugin.
The process is very similar to colorbox and Magnific.
1. Download 3.0.zip from one of the above links.
2. Unzip and open fancybox-3.0 -> dist and copy jquery.fancybox.css and jquery.fancybox.min.js.
3. Create a new folder (I called mine lightbox) in the root of the theme you are using. Paste in the css and js files.
4. Create a new js file save it as jquery.fancybox-init.js.
The above is the bare bones code to get it to work.
Titles and descriptions are not showing up. But the rest seems to work fine.
2. Copy the nivo-lightbox.css, nivo-lightbox.min.js and the themes folder.
Create a a new folder you can call nivo-lightbox in the root of your theme folder and paste the files and folder into it.
3. Create a new js file and call it nivo-lightbox-init.js. To initialize the lightbox.
Save the file into the newly created nivo-lightbox folder inside the child theme folder.
effect: 'slideUp', // Options slideUp, slideRight, slideDown, slideLeft, fall, fadescale.
Fluidbox is more limited then Colorbox and Magnific lightbox.
It does not add a specific gallery feature, or captions and limits the height of taller images to fit into the viewport.
2. Create a new folder inside the root folder of your child theme and name it fluidbox.
Copy and paste the following files to the new folder.
Go to dist -> js and copy the jquery.fluidbox.min.js.
Go to dist -> css and copy the fluidbox.min.js.
3. Create a new js file and name it fluidbox-init.js. To initialize the lightbox.
Save the file into the newly created fluidbox folder inside the child theme folder.
Add the following code into the fluidbox-init.js file.
Resources I want to take a closer look at.
Did you manage to integrate in WordPress “Lightgallery Lightbox” (https://sachinchoolur.github.io/lightGallery/index.html)?
If so, could you pass me the code or tell me how you did it?
I could implement gallery with colorbox effects without any plugins!
I am thinking that you will need to add some jQuery code to the colorbox-init.js. Do some searching on using conditionals in jQuery.
Very nice and easy to follow tutorials.
Could you also walk me through adding PhotoSwipe to WordPress?
I will look into it and update this comment on the progress.
Thank you so much! This helped me finally get my WP gallery to not redirect to a new page with Nivo Lightbox.
Can I look at a sample of this?
I have links to examples on using Colorbox, Magnific Popup and FancyBox.
The other tutorials and not fully working yet.