Getting it to work with all images in a WordPress theme

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!

[anvarulugov]

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;
}

[ghost]

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.