Lightbox not working

Support
#1

Hi there,

Would you please be able to tell me why my lightbox isn’t working, I can’t figure it out:

<p class="mbn">[x_image type="none" float="none" src="http://www.eurasianwhispers.com/wp-content/uploads/2017/12/Christ-Reenaction-Jerusalem.jpg" alt="Christian pilgrims re-enact the crucifixion of Jesus along the Via Dolorosa in Jerusalem during Good Friday" link="true" info="none" info_place="top" info_trigger="hover" class="lightbox mbn"]<br/> [lightbox selector=“.lightbox”]</p>

Thank you for your help,
EW

#2

Hello There,

Thanks for posting in!

Please have your code updated and use this instead:

<p class="mbn">[x_image type="none" float="none" src="http://www.eurasianwhispers.com/wp-content/uploads/2017/12/Christ-Reenaction-Jerusalem.jpg" alt="Christian pilgrims re-enact the crucifixion of Jesus along the Via Dolorosa in Jerusalem during Good Friday" link="true" info="none" info_place="top" info_trigger="hover" class="lightbox mbn"]<br/> [lightbox selector=".lightbox"]</p>

Please be very careful when copying and pasting a code. In most cases, the quotes will get converted to something else which may have cause an issue.

Please let us know how it goes.

#3

Hi Rue,

Thanks for that - the new code does indeed make the lightbox work.

The thing is, I can’t actually see what you changed from the first code to make it work! Would you be able to tell me what you did as I need to sort out the same problem with a load of other images?

Cheers,
EW

#4

Hi There,

This shortcode is incorrect:

[lightbox selector=“.lightbox”]

It should be:

[lightbox selector=".lightbox"]

Regards!

#5

@thai, I can use it into a custom post with _content-the-content.php ? The php will recognize the shortcode?

#6

Hi,

I am not sure what you are trying to do.

If you want to add it in php, you can change the code to this.


<?php echo do_shortcode('[lightbox selector=".lightbox"]'); ?>
#7

@paul.r
Actually, I have the following code:

<?php if ( get_field( 'upload_img' ) ) { ?>
<div class="upload_img">
	<a href="<?php the_field( 'upload_img' ); ?>" data-lightbox="<?php the_field( 'upload_img' ); ?>" data-title="<?php the_field( 'titulo_do_clipping' ); ?>">
		<img src="<?php the_field( 'upload_img' ); ?>" alt="<?php the_field( 'titulo_do_clipping' ); ?>" />
	</a>
</div>
<?php } ?>

PHP check if the ACF field is ok, then show media file. But I’d like to open media file with lightbox.

#8

Hi there,

Please try this,

<?php if ( get_field( 'upload_img' ) ) { ?>
<div class="upload_img">
        <?php $selector = 'upload_img_'.get_the_ID(); ?>
	<a href="<?php the_field( 'upload_img' ); ?>" data-lightbox="<?php the_field( 'upload_img' ); ?>" data-title="<?php the_field( 'titulo_do_clipping' ); ?>" class="<?php echo $selector;?>">
		<img src="<?php the_field( 'upload_img' ); ?>" alt="<?php the_field( 'titulo_do_clipping' ); ?>" />
	</a>
</div>
<?php echo do_shortcode('[lightbox selector=".'.$selector.']'); ?>
<?php } ?>

You may enhance it but we can’t provide any further customization related to this snippet :slight_smile:

Thanks!

#9

Unfortunately, doesn’t work. Two things happens:

  1. A simple link appear instead <a><img /><a>;
  2. The lightbox doesn’t work

The code I have tried to use before:

<?php if ( get_field( 'upload_img' ) ) { ?>
<div class="upload_img">
	<a href="<?php the_field( 'upload_img' ); ?>" data-lightbox="<?php the_field( 'upload_img' ); ?>" data-title="<?php the_field( 'titulo_do_clipping' ); ?>">
		<img src="<?php the_field( 'upload_img' ); ?>" alt="<?php the_field( 'titulo_do_clipping' ); ?>" />
	</a>
</div>
<?php } ?>

The code that I have tried to use, provided by you:

<?php if ( get_field( 'upload_img' ) ) { ?>
<div class="upload_img">
        <?php $selector = 'upload_img_'.get_the_ID(); ?>
	<a href="<?php the_field( 'upload_img' ); ?>" data-lightbox="<?php the_field( 'upload_img' ); ?>" data-title="<?php the_field( 'titulo_do_clipping' ); ?>" class="<?php echo $selector;?>">
		<img src="<?php the_field( 'upload_img' ); ?>" alt="<?php the_field( 'titulo_do_clipping' ); ?>" />
	</a>
</div>
<?php echo do_shortcode('[lightbox selector=".'.$selector.']'); ?>
<?php } ?>

I’m using into a custom post with ACF, described here: https://theme.co/apex/forum/t/pro-acf-post-show-meta/18308/5

The echo do_shortcode output:

<span id="x-lightbox-1" data-x-element="lightbox" data-x-params="{"selector":".x-img-link","deeplink":false,"opacity":"0.85","prevScale":"0.85","prevOpacity":"0.65","nextScale":"0.85","nextOpacity":"0.65","orientation":"horizontal","thumbnails":false}"></span>

Thank you very much.

#10

Hello There,

Could you please provide the url of the page in question? We want to check the page where your code has taken place.

Thank you in advance.

#11

@RueNel
Thank you for reply. A secure note was provided.

#12

Hi,

Sorry, there is a missing double quote in the code provided.

Please change it to this.

<?php if ( get_field( 'upload_img' ) ) { ?>
<div class="upload_img">
        <?php $selector = 'upload_img_'.get_the_ID(); ?>
    <a href="<?php the_field( 'upload_img' ); ?>" data-lightbox="<?php the_field( 'upload_img' ); ?>" data-title="<?php the_field( 'titulo_do_clipping' ); ?>" class="<?php echo $selector;?>">
        <img src="<?php the_field( 'upload_img' ); ?>" alt="<?php the_field( 'titulo_do_clipping' ); ?>" />
    </a>
</div>
<?php echo do_shortcode('[lightbox selector=".'.$selector.'"]'); ?>
<?php } ?>

Hope that helps.

1 Like
#13

Oh, yeah! Always the damn quotes terrifying our lives. #lol
Works like a charm now. Thank you very much, @paul.r

#14

You’re welcome! :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.