Adding Lightbox to custom theme NO PLUGINS

  • Resolved Khadesa

    (@khadesa)


    9 years, 1 month ago

    Hey everyone,
    I am having some trouble implementing slimbox 2.0 on my custom theme site.

    I have linked the three required files in the header.php like so:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/slimbox2.js"></script>
<link rel="stylesheet" href="/js/slimbox2.css" type="text/css" media="screen" />

    Next, i transfer these files to the appropriate places along with images, via filezilla,

    Then i use the rel=”lightbox” like this:

    <p>
		<a href="<?php the_field('p1logo'); ?>" rel="lightbox" title="Beautiful, isn't it?">Click here</a> if you love star trek.
	</p>

    However, the image constantly shows in it’s own url, nothing lightboxy about at all.

    Check it out (in our work section, look for click here sentence at the top) https://www.entirecreative.com/stone

    Thanks for any suggestion guys!

Viewing 3 replies - 1 through 3 (of 3 total)

  • You’re getting 404 errors for slimbox2.js and slimbox2.css. If those files are located in your theme’s folder, you should call get_template_directory_uri() to build the path:

    <script type="text/javascript" src="<?php echo get_template_directory_uri() . '/js/slimbox2.js'; ?>"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/js/slimbox2.css'; ?>" type="text/css" media="screen" />

    Or, if you go the enqueue route:

    function load_slimbox() {
  wp_enqueue_script( 'slimbox-js', get_template_directory_uri() . '/js/slimbox2.js', array( 'jquery' ), null, false );
  wp_enqueue_style( 'slimbox-css', get_template_directory_uri(). '/js/slimbox2.css' );
}
add_action( 'wp_enqueue_scripts', 'load_slimbox' );
    Thread Starter Khadesa

    (@khadesa)

    Once again, Stephen Cottontail comes to the aid of a lost and forsaken noob, and delivers salvation.

    You are the king of kings, Sir Cottontail.

    I have literally been working on that all day, left with a sense of unworthiness, as i never would have solved that. You smashed it harder than thor’s hammer.

    I ask though, how can i apply the same principle to a repeater field?

    For example, just underneath ‘click if you love startrek’, you’ll see the gallery, i was hoping to implement the lightbox with the following code, but alas, to no avail.

    <?php
	if( have_rows('p3projects') ):
		while ( have_rows('p3projects') ) : the_row(); ?>
			 <div class="s3block">
				<a href="<?php the_sub_field('p3projectpreview'); ?>" rel="lightbox" title="Beautiful, isn't it?">

					<div class="s3blockblurb">
						<div class="scribe7">
							<?php the_sub_field('p3projectblurb'); ?>
						</div>

						<div class="s3blockfaded"></div>

					</div>
					<img src="<?php the_sub_field('p3projectpreview'); ?>" />
				</a>
			</div>
		<?php  endwhile;
	else : endif;
?>

    (it’s so complicated because of the faded rollover box, and roller blurb.)

    Thanks for any help Stephen.

    Thread Starter Khadesa

    (@khadesa)

    HOLD the phone!

    I just needed to wrap <p>’s around it :]

    thanks so much stephen!

    Also, remember when you helped me with that menu toggle problem? It turns out the problem was because i removed the code php’getfooter’, i just put it back in, and hid the display…

    wordpress is so weird sometimes, we are extremely lucky to have deciphers as yourself.

    Have a wonderful night dude, can’t express how much you’ve helped.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding Lightbox to custom theme NO PLUGINS’ is closed to new replies.

Tags