[Résolu] Adding lightbox to product "Image Gallery" in backend/admin

[Auteur]

Publications

[dannyD-3]

My client's site cletaworld.com has a marketplace where users can become vendors and submit products for sale on the frontend of the site. When they submit a product there is a custom type where they can add images. These images show up in the backend/product admin in a section titled "Image Gallery". The thumbnails are pretty small and my client would like to be able to click on the thumbnail to open the full image in a lightbox rather than have to search through the media gallery or copy and past the img url to find it. (See image for how it looks in the backend.) Is it possible to do this?

Since the image is being pulled in to the area already, I think I just need to know how it is being pulled in and/or if there is a template controlling this that I can edit to put in the correct html and css for the lightbox to work.

Thanks.

[Waqas Supporter Languages: Anglais (English ) Timezone: Asia/Karachi (GMT+05:00)]

This requires adding some custom code in your theme's functions.php file, as well as, writing some custom JavaScript. Let me explain this in some steps below.

1) I am going to use a 3rd party lightbox plugin, called Fancybox (hidden link). Download from the Fancybox site and upload somewhere in your theme's folder (after unzip). You will apparently need following files:

- jquery.fancybox-1.3.4.pack.js
- jquery.fancybox-1.3.4.css

It's good to upload all content from 'source' folder in 'fancybox' folder under your theme's folder. So you can easily follow the example how-to as mentioned at hidden link (if needed later on).

2) Open functions.php file in a text editor and add following code at the end of file:

function load_custom_wp_admin_scripts() {
        wp_register_style( 'fancybox-css', get_template_directory_uri() . '/fancybox/jquery.fancybox.css', false, '1.0.0' );
        wp_register_style( 'mycustom-css', get_template_directory_uri() . '/fancybox/my-custom.css', false, '1.0.0' );
        wp_enqueue_style( 'fancybox-css' );
        wp_enqueue_style( 'mycustom-css' );
        
        wp_enqueue_script( 'fancybox-js', get_template_directory_uri() . '/fancybox/jquery.fancybox.pack.js' );
        wp_enqueue_script( 'mycustom-js', get_template_directory_uri() . '/fancybox/my-custom.js' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_scripts' );

Please notice my-custom.css and my-custom.js in above code, you will create and add code to these files in later steps. At this point save functions.php file.

3) Create a new file 'my-custom.js' in same fancybox folder with following content:

jQuery(document).ready(function($){
	$(".wpt-file-preview img.attachment-thumbnail").on("click", function(e){
		var img = $(this).parent().parent().find("input[type=text]").val();
		
		//console.log(img);
		
		$(".wpt-file-preview img.attachment-thumbnail").fancybox({
			'href': img
		});
	});
});

This will enable the Fancybox on image thumbnails, while considering the URL in that field as a preview image (large image, uploaded by user).

4) Create a new file 'my-custom.css' to add some work around on these images, with following content:

.wpt-file-preview img.attachment-thumbnail {
	display: block!important;
	cursor: pointer!important;
}

By default when you click on an image using Fancybox, it will hide the original thumbnail. Also the image isn't an A tag, so it can visually confuse if it is clickable or not. Above CSS resolves both issues.

I created this code on my localhost and tested it thoroughly. I hope if you follow these steps carefully, you can achieve the same.

Please let me know if I can help you with anything related.

[dannyD-3]

Thank you for the reply. From my page source it looks like my admin area is already loading colorbox (actually from your views plugin). Would it be possible to build in the same functionality using that jQuery rather than pulling in a new script? Or would it be easier to just do it with fancybox as you have outlined above rather than edit/add to the colorbox files in the plugin?

The colorbox library lives in /wp-content/plugins/wp-views/embedded/res/js/lib/jquery.colorbox-min.js?ver=1.8.1

[Waqas Supporter Languages: Anglais (English ) Timezone: Asia/Karachi (GMT+05:00)]

I have just sent you a trunk (dev) version of Types to your email address. Our dev team has added this feature in the Types plugin, which will be rolled out next release.

However, meanwhile, you can just download the trunk version and replace with current installation of Types plugin. So you won't need additional code or external JS for this purpose.

[dannyD-3]

Thank you so much! I appreciate not having to add any extra scripts to the site since it is already pretty heavy and I don't want it to affect load time.

This is a great feature for sites with user submitted content and images to make the backend more user friendly and easy to use for the web site admin.

[ralphL]

Is that version released yet?