Light box style change

[Bryan Berghoef]

Hi Bill-
Wondering if there is a way to change the lightbox style on Selfie to something like the pop-up lightbox style on Photobug?

I like the popup version with the white border, and next/prev buttons at the middle of the photo. Is it possible to modify Selfie to have this option?

Thanks!

Bryan

[Bill Robbins]

Good Morning Bryan,

I believe you could do that. It’s not something that I’ve tried, but it should work. Let’s use the Elite theme as a source for some of the files that we’ll need to add.

Inside the elite theme folder there is another folder called js. Inside it there is another folder called lightbox. Copy that and paste it into the js folder inside Selfie.

Next edit the scripts.php file that’s in the includes folder inside Selfie. Delete this line:

wp_enqueue_script( 'swipebox' );

Then scroll down to the bottom of scripts.php and add this:

(Just to be on the safe side, copy this from the support site and not the notification email).

That should add the lightbox script and the default style. If you’d like to change to one of the other styles, change default in that snippet to the name of the one you’d like to use. They are all listed in that snippet above. Then save your changes.

The last file to edit is the custom-js.php file (also in the includes folder). Replace this section:

// Swipebox
	jQuery(function() {
		jQuery(".swipebox").swipebox({
			
			hideCloseButtonOnMobile : false,
			hideBarsOnMobile : false,
			
			<?php if ( of_get_option( 'delay', $single = true ) != "" ){ ?>
			
				hideBarsDelay : <?php echo of_get_option( 'delay' ); ?>
			
			<?php } else { ?>
			
				hideBarsDelay : 5000
			
			<?php } ?>
			
		});
	});
	
	
	
	

// Add lightbox class to single images with links:
	jQuery('a').each(function(){
		
		if ( this.href.toLowerCase().substr(-4).indexOf('.jpg') < 0 &&
		     this.href.toLowerCase().substr(-5).indexOf('.jpeg') < 0 &&
		     this.href.toLowerCase().substr(-4).indexOf('.png') < 0 &&
		     this.href.toLowerCase().substr(-4).indexOf('.gif') < 0 )
		return;

		var $lnk = jQuery(this); 
		
		$lnk.addClass('swipebox');
	
	});

With this:

and save your changes.

Hopefully if all goes well that should add in the lightbox in place of swipebox. It’s not tested, but I think that should be right.

Have a great trip; it looks like a tremendous adventure for your family.

Bill

[Bryan Berghoef]

Thanks, Bill-
I’ll have to give this a shot from the road.

Bryan

[Author]

Posts