Forming a pop-up window for a portfolio - a lesson 28
Let's continue developing our portfolio and in this tutorial I found a nice popup script, let's try to use it. The script is called Responsive Lightbox Plugin.
To use the script, you must first connect its styles in the site header and then you can connect the script itself to the site footer. See below for more details on how this is done..
Download the script from storage github. An example of the operation of the future pop-up window can be viewed at official site of the script.
Uploading the script to a folder wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/.
Next, we need to connect the script and for its correct connection, we can use the already familiar file custom-header-script.php, it is located at wp-content/themes/my_theme_tmp/functions/custom-header-script.php.
We connect the script and styles to the existing code of the function my_scripts_method
The script is connected using the code:
|
1 2 3 |
// всплывающее окно для портфолио wp_register_script('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.js'); wp_enqueue_script( 'lightbox-portfolio' ); |
Full function listing my_scripts_method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function my_scripts_method() { $tmpDir = get_template_directory_uri(); if ( uGetPostType() == 'portfolio'){ wp_register_script( 'easing-portfolio', $tmpDir.'/js/simple-portfolio-page/js/jquery.easing.min.js'); wp_enqueue_script( 'easing-portfolio' ); wp_register_script( 'mixitup-portfolio', $tmpDir.'/js/simple-portfolio-page/js/jquery.mixitup.min.js'); wp_enqueue_script( 'mixitup-portfolio' ); wp_register_script( 'custom-portfolio', $tmpDir.'/js/simple-portfolio-page/js/custom.js'); wp_enqueue_script( 'custom-portfolio' ); // всплывающее окно для портфолио wp_register_script('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.js'); wp_enqueue_script( 'lightbox-portfolio' ); } } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); |
Include styles below in the function.
|
1 2 |
wp_register_style('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.css'); wp_enqueue_style('lightbox-portfolio'); |
Full function listing add_my_stylesheet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function add_my_stylesheet() { $tmpDir = get_template_directory_uri(); if ( uGetPostType() == 'portfolio'){ wp_register_style('normalize-portfolio', $tmpDir.'/js/simple-portfolio-page/css/normalize.css'); wp_enqueue_style('normalize-portfolio'); wp_register_style('layout-portfolio', $tmpDir.'/js/simple-portfolio-page/css/layout.css'); wp_enqueue_style('layout-portfolio'); wp_register_style('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.css'); wp_enqueue_style('lightbox-portfolio'); } } add_action('wp_print_styles', 'add_my_stylesheet'); |
After connecting the script and styles, we can look at the result. If everything was done right, it to the pages sitemame/portfolio/ the connected script will appear in the code, and also a new style file.
Style File jquery.lightbox.min.css
|
1 |
<link rel='stylesheet' id='lightbox-portfolio-css' href='https://nature.wp-admin.com.ua/wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/jquery.lightbox.min.css?ver=4.1' type='text/css' media='all' /> |
jquery.lightbox.js script file
|
1 |
<script type='text/javascript' src='https://wp-admin.com.ua/wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/jquery.lightbox.js?ver=4.1'></script> |
After a successful connection, you must add custom image sizes, fix portfolio template in file archive-my_works.php and specify when clicking on which elements the image will be displayed in large format, in a popup window.
1. Let's go to functions.php and find the code.
|
1 2 3 4 |
if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 200, 200, true ); } |
Complement the code with a new image size for the portfolio page:
|
1 2 3 4 5 |
if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 200, 200, true ); add_image_size( 'portfolio-thumbnail', 270, 203, true ); } |
2. Let's go to the template archive-my_works.php and find the code in it:
<img src=”‘.$thymbUrl.'” alt=”” />
You need to change the code to output the correct image size.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$thymbUrlThumbnail = wp_get_attachment_link($attachmentId, 'portfolio-thumbnail'); // берем URL миниатюры, которая относится к записи echo ' <div class="portfolio '.$dataCat.'" data-cat="'.$dataCat.'"> <div class="portfolio-wrapper"> '.$thymbUrlThumbnail.' <div class="label"> <div class="label-text"> <a class="text-title">'.$item->post_title.'</a> <span class="text-category">'.$dataCatComma.'</span> </div> <div class="label-bg"></div> </div> </div> </div> '; |
If done right, then in the portfolio section, when clicked, the picture will open in a new window.
Attention, there may be a problem and the output of the correct size of the thumbnail, but it's easy to solve.
If your image is not resized as expected, then most likely you need to recreate the portfolio thumbnails using one of the plugins Regenerate Thumbnails or Force Regenerate Thumbnails. After launching plugin activation, run it and be sure to wait for it to finish.
Now that everything is working, you can modify the display of images in a pop-up window. To display a pop-up window, you must correctly register the element, when you click on which the image will appear on top.
Adding code to the footer.php file, as below.
|
1 2 3 4 5 6 7 |
<?php wp_footer(); ?> <script> jQuery(document).ready(function($) { $('[rel="lightbox"]').lightbox(); }); </script> </body> |
From the above it can be seen, that images will appear in a pop-up window in cases where the tag contains the rel= attribute”lightbox”. Let's make it so that in all the pictures that link to their larger version, this attribute appears. To do this, go to the functions.php file and add the special filter code to it:
|
1 2 3 4 5 6 7 8 9 |
add_filter( 'wp_get_attachment_link', 'sant_lightboxadd', 10, 6); function sant_lightboxadd ($content, $id, $size, $permalink, $icon, $text) { if ($permalink) { return $content; } $content = preg_replace("/<a/","<a rel=\"lightbox\"",$content,1); return $content; } |
After all the manipulations, I got this gallery.
Theme files from this tutorial
- Basic web design course;
- Site layout;
- General course on CMS WordPress and continuation of the course on template development;
- Website development in PHP.
