Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting it to work with all images in a WordPress theme #342

Closed
paaljoachim opened this issue Nov 2, 2014 · 9 comments

Comments

Projects
None yet
5 participants
@paaljoachim
Copy link

commented Nov 2, 2014

Hey

I like the lightbox you have created!
I am working on using the correct code to add this to my child theme functions.php file.
It would be great to have it work with WordPress.
I will also add it to my article on using lightboxes without using a plugin:
http://easywebdesigntutorials.com/adding-a-lightbox-to-wordpress-without-using-a-plugin/
(An article still being shaped.)

What I got right now based on earlier code used with Colorbox, Nivo and Fluidbox (more or less functioning. It looks best with Colorbox. Not that the site is working with it right now though. I am creating an update that I will add onto the site).

I want to get it working with Lightbox 2. It would also help whomever else is looking for the same thing.

What is off with the following code? Could you add the code to get it working with WordPress? Btw are there some settings on can adjust to customize the lightbox further?

/\* Enqueue lightbox 2 - http://lokeshdhakar.com/projects/lightbox2/ */ add_action( 'wp_enqueue_scripts', 'enqueue_lightbox2' ); function enqueue_lightbox2() {
wp_enqueue_style( 'lightbox2-css', get_bloginfo( 'stylesheet_directory' ) . '/lightbox2/css/lightbox.css', array(), CHILD_THEME_VERSION );

wp_enqueue_script( 'lightbox2', get_bloginfo( 'stylesheet_directory' ) . '/lightbox2/js/lightbox.min.js', array( 'jquery' ), '2.7.1' );

wp_enqueue_script( 'lightbox2-init',  get_stylesheet_directory_uri() . '/lightbox2/lightbox2-init.js', array( 'lightbox2' ), '1.0.0', true );

}

I then made the init.js file:

jQuery(function( $ ){ $("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").lightbox2(); $('a.gallery').lightbox2(); });

Have a great day!

@cdeford

This comment has been minimized.

Copy link

commented Mar 6, 2015

Hi, are you still working on this? I'd like this script for my wordpress site as well, it's one of the best looking lightboxes out there.

@paaljoachim

This comment has been minimized.

Copy link
Author

commented Mar 13, 2015

I gave up. I got colorbox to work and decided to stick with that.
If you get it to work do please post here.
Have a great weekend!

@cdeford

This comment has been minimized.

Copy link

commented Mar 20, 2015

Thanks for replying. I'm using Easy Fancybox. I'd like to use this but I haven't been able to make it work. Pity.

@anvarulugov

This comment has been minimized.

Copy link

commented Apr 12, 2015

I made for my wordpress theme following:
in functions.php file:

add_action( 'wp_enqueue_scripts', 'themeslug_scripts' );
function themeslug_scripts() {
    wp_enqueue_style( 'bootstrap-min', get_template_directory_uri() . '/media/css/bootstrap.min.css', array(), '3.3.0' );
    wp_enqueue_style( 'fontawesome-min', get_template_directory_uri() . '/media/css/font-awesome.min.css', array(), '4.3.0' );
    wp_enqueue_style( 'lightbox', get_template_directory_uri() . '/media/css/lightbox.css', array(), '4.3.0' );
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_script( 'bootstrap-min', get_template_directory_uri() . '/media/js/bootstrap.min.js', array( 'jquery' ), '3.3.0', true );
    if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
    wp_enqueue_script( 'lightbox', get_template_directory_uri() . '/media/js/lightbox.min.js', array( 'jquery' ), '3.3.0', true );
    wp_enqueue_script( 'themeslug-script', get_template_directory_uri() . '/media/js/functions.js', array( 'jquery' ), '3.3.0', true );

}

add_filter('the_content', 'aus_lightbox_post_image');
function aus_lightbox_post_image ( $content ) {
    global $post;
    $pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
    $replacement = '<a$1 data-lightbox="post-image" href=$2$3.$4$5$6</a>';
    $content = preg_replace($pattern, $replacement, $content);
    //$content = str_replace("%LIGHTID%", $post->ID, $content);
    return $content;
}
@paaljoachim

This comment has been minimized.

Copy link
Author

commented Jul 4, 2015

Thank you anvarulugov!

@anvarulugov

This comment has been minimized.

Copy link

commented Jul 4, 2015

@paaljoachim welcome. But I suggest you to test excerpt. I'm not sure wether it conflicts or not.

@lokesh

This comment has been minimized.

Copy link
Owner

commented Jul 9, 2015

Thanks @anvarulugov . I haven't used Wordpress in some time so I was not able to contribute to this discussion. If more Wordpress issues arise I will invest some time looking into them.

@lokesh lokesh closed this Jul 9, 2015

@paaljoachim

This comment has been minimized.

Copy link
Author

commented Dec 26, 2015

Thanks for the info!

I updated the tutorial and included Magnific popup which I got to work pretty well with the options that existed for it.

@jmfcodes

This comment has been minimized.

Copy link

commented Jun 5, 2018

thank you all! This thread was helpful. I migrated a site to WP that was previously using Lightbox2, and I really prefer Lightbox2 to the others I've tried so I'm glad I could get it working. In case anyone else stumbles on this thread, here's what I did:

  • Download and unzip Lightbox2
  • In WP theme folder, create a lightbox folder
  • Copy CSS, JS, jQuery files to lightbox folder
  • In the lightbox folder, create an images folder, and copy the four icons from Lightbox2's images folder
  • Open lightbox.css (the one in your new WP folder) and change url(../images/prev.png) to url(images/prev.png) for each of the four images
  • In lightbox folder, create init.js and add the following:
jQuery(function( $ ){
    $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif'],a[href$='.bmp']").lightbox();
    $('a.gallery').lightbox();
});

lightbox.option({
    'wrapAround': true,
    'alwaysShowNavOnTouchDevices': true,
});

  • In WP theme folder's functions.php file, add the following:
/* Enqueue Lightbox2 */
add_action( 'wp_enqueue_scripts', 'enqueue_lightbox' );
function enqueue_lightbox() {
 wp_enqueue_style( 'lightbox-css', get_template_directory_uri(). '/lightbox/lightbox.css' );
 wp_enqueue_script( 'lightbox',get_template_directory_uri() . '/lightbox/lightbox.min.js', array( 'jquery' ), '', true );
 wp_enqueue_script( 'lightbox-init', get_template_directory_uri() . '/lightbox/init.js', array( 'lightbox' ), '', true );
}
  • data-alt and data-title still need to be added manually per picture.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.