[Resolved] Trying to add a lightbox effect to a RFG view

[Author]

Posts

[chrisC-25]

I am close to making this work, but it still is not loading the images correctly or allowing me to use the nav arrows to scroll.

If you click on the first image it shows nothing, if you click on the last it shows up then go back and click on first it shows, no scrolling.

See here:
hidden link

Images are below the video.

I followed the instructions here:
hidden link

What am I missing?
Here is the view:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
<div class="tz-gallery">
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-sm-6 col-md-4">[wpv-post-body view_template="loop-item-in-gallery-view"]</div>
		[wpv-item index=other]
			<div class="col-sm-6 col-md-4">[wpv-post-body view_template="loop-item-in-gallery-view"]</div>
		[wpv-item index=3]
			<div class="col-sm-6 col-md-4">[wpv-post-body view_template="loop-item-in-gallery-view"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-6 col-md-4"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-6 col-md-4"></div>
      </div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Here is the loop:

<div class="thumbnail"><a class="lightbox" href="[types field="gallery-image" output='raw'][/types]">
                        <img src="[types field="gallery-image" output='raw'][/types]" alt="[types field="image-name"][/types]">
                    </a></div>
<div class="caption">[types field="image-name"][/types]</div>
<div class="caption">[types field="image-description"][/types]</div>

<script src="<em><u>hidden link</u></em>"></script>
<script>
    baguetteBox.run('.tz-gallery');
</script>

[Christian Cox]

It's best to enqueue javascript in your theme if you're going to use it in your site. I would enqueue the baguettebox.js file in the theme using wp_enqueue_scripts instead of including it in the loop like this. https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

Then move the baguetteBox.run command into the JavaScript editor below the Loop editor. That way it will run only once to initialize the system.

[chrisC-25]

Okay, I must have done something wrong, first time doing this.

I put the baguetteBox.js on the ftp in the child theme folder.

Following instructions related to my child theme I put this in functions.php:

function x_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/example.css' );
    wp_enqueue_script( 'baguetteBox', get_template_directory_uri() . '/js/baguetteBox.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'x_theme_name_scripts' );

Then moved

baguetteBox.run('.tz-gallery');

to js editor.

Now not working at all.

[Christian Cox]

Okay it looks like you enqueued the script correctly, I can see it show up now on your site. However, I'm still seeing the script tags in the loop like I saw before. May I log in and take a look?

[Christian Cox]

Okay I updated your functions.php file to enqueue the JavaScript file like this:

wp_enqueue_script( 'baguetteBox', get_stylesheet_directory_uri() . '/js/baguetteBox.js', array('jquery'), '1.0.0', true );

Now it looks like it's behaving more like expected. Can you confirm?

[chrisC-25]

Okay, so it was looking in the wrong place apparently. My issue is resolved now. Thank you!