Getting it to work with all images in a WordPress theme

paaljoachim commented 10 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

Thank you anvarulugov!

anvarulugov commented 9 years ago

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

lokesh commented 9 years ago

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.

paaljoachim commented 8 years ago

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.

ghost commented 6 years ago

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.

paaljoachim commented 3 years ago

Hey @jmfcodes is the above still working for you? For whatever reason I am just not getting it to work.

How would I add the following into the js init code?

data-alt and data-title still need to be added manually per picture.

paaljoachim commented 3 years ago

The code from @anvarulugov works nicely.

I added the code to my tutorial here: https://www.easywebdesigntutorials.com/adding-a-lightbox-to-wordpress-without-using-a-plugin/

marbaque commented 2 years ago

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

A couple questions here,

I am using this code with GLightbox, but I am getting this result on every link: <a class="glightbox" href="path-to-img" <="" a=""></a>
if an image is linked to a page, the page also opens using glightbox. So, every image with a link is getting the text substitution, not only those linked to media files.

Have you had this problem, I am not so experienced with php, so I haven't found a solution

paaljoachim commented 2 years ago

Hey @marbaque

Hopefully someone with some PHP and knowledge about lightboxes will be able to help out.

marbaque commented 2 years ago

thenk you @paaljoachim

I managed to resolve the first part by impoving the $replacement, so the code is cleaner now:

add_filter('the_content', 'glightbox_class');
function glightbox_class($content)
{
    global $post;
    $pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
    $replacement = '<a$1 class="lightbox" href=$2$3.$4$5$6>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

Still trying to resolve the second part...

stefanofattori commented 1 year ago

thenk you @paaljoachim

I managed to resolve the first part by impoving the $replacement, so the code is cleaner now:
add_filter('the_content', 'glightbox_class');
function glightbox_class($content)
{
  global $post;
  $pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
  $replacement = '<a$1 class="lightbox" href=$2$3.$4$5$6>';
  $content = preg_replace($pattern, $replacement, $content);
  return $content;
}
Still trying to resolve the second part...

Using class "lightbox" it doesn't work instead using data-lightbox="post-image" it works fine. Did you find a way to include title attribute or image caption on the lightbox?

Thank you

lokesh / lightbox2

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