Title: Simple Lightbox Integration
Last modified: October 4, 2020

---

# Simple Lightbox Integration

 *  Resolved [socialpays](https://wordpress.org/support/users/socialpays/)
 * (@socialpays)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/simple-lightbox-integration/)
 * Hi,
 * I hope someone can help. I am trying to integrate the Simple Lightbox into my
   posts page so that the thumbnails open up in the lightbox but have no clue where
   to input the relevant code.
 * I did find this code to use which I added to the page and even though it did 
   work it created double images on my page:
 * // Link post thumbnail to full-size image.
    if ( has_post_thumbnail() ) { $thumbnail
   = [ // URI of full-size post thumbnail image. ‘uri’ => get_the_post_thumbnail_url(
   null, ‘full’ ), // HTML to display post thumbnail. ‘img’ => get_the_post_thumbnail(),];//
   Build thumbnail link. $thumbnail[‘link’] = sprintf( ‘[%s](https://wordpress.org/support/topic/simple-lightbox-integration/%s?output_format=md)‘,
   esc_attr( $thumbnail[‘uri’] ), $thumbnail[‘img’] );
 * // Display full-size image in lightbox when clicked.
    if ( function_exists( ‘
   slb_activate’ ) ) { $thumbnail[‘link’] = slb_activate( $thumbnail[‘link’] ); }
 * // Display post thumbnail.
    echo $thumbnail[‘link’]; }
 * This is the code from my posts page. Does anyone know how I can implement this
   code above into my code below?
 * ——————————————————————————-
    <div class=”featured-thumb-video”></div> <?php }?
   >
 * <?php
    $is_gallery = count($images) > 1; $imgsrc = wp_get_attachment_image_src(
   get_post_thumbnail_id($post->ID), ‘large’);
 * if ($imgsrc[0] == ”) {
    $imgsrc[0] = get_template_directory_uri() . ‘/img/blank.
   gif’; $imgsrc[1] = get_option(‘medium_size_w’); $imgsrc[2] = get_option(‘medium_size_w’);}
   else if ($imgsrc[1] <= 1 && $imgsrc[2] <= 1){ $thumbid = get_post_thumbnail_id(
   $post->ID); $size = getimagesize($imgsrc[0]); $imgsrc[1] = $size[0]; $imgsrc[
   2] = $size[1]; }
 * //if is animated gif
    $animated_gif = false; if (substr($imgsrc[0], -4) == ‘.
   gif’ && get_post_meta(get_post_thumbnail_id($post->ID), ‘a_gif’, true) == ‘yes’){
   $animated_gif = true; $animated_gif_imgsrc_full = wp_get_attachment_image_src(
   get_post_thumbnail_id($post->ID), ‘full’); echo ‘<div class=”featured-thumb-gif”
   ></div>’;
 * }
 * //if need resize
    if ($post_video && strpos($post_video, ‘data-resize’) !== false){
   $imgsrc[1] = get_option(‘medium_size_w’); $imgsrc[2] = round(get_option(‘medium_size_w’)/
   1.77); } ?> <?php if ($is_gallery): ?> <span class=”gallery-indicator”></span
   > <?php endif;?> ” src=”<?php echo $imgsrc[0]; ?>” alt=”<?php echo mb_strimwidth(
   the_title_attribute(‘echo=0’), 0, 100, ‘ …’); ?>” style=”width:<?php echo $imgsrc[
   1]; ?>px;height:<?php echo $imgsrc[2]; ?>px” />
 * ————————————————————–
 * Thank you very much for your time.

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

 *  Plugin Author [Archetyped](https://wordpress.org/support/users/archetyped/)
 * (@archetyped)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/simple-lightbox-integration/#post-13496032)
 * Hi, the code you provided appears to be incomplete. Please post your template
   code as per [the support forum’s FAQ on posting code examples](https://wordpress.org/support/forum-user-guide/faq/#how-do-i-post-code-examples)
   to ensure it can be fully evaluated.
 * Thanks.
 *  Thread Starter [socialpays](https://wordpress.org/support/users/socialpays/)
 * (@socialpays)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/simple-lightbox-integration/#post-13497418)
 * Hi,
 * Thanks for your reply. Sorry. I am a newbie. I just need to know how to incorporate
   SLB into my website. Here is the code for the relevant page:
 *     ```
       <?php global $wp_taxonomies; ?>
       <div id="post-<?php the_ID(); ?>" <?php post_class('thumb'); ?>>
       	<div class="thumb-holder">
   
       		<a class="featured-thumb-link" href="<?php the_permalink(); ?>" <?php $bgcolor = get_post_meta($post->ID, '_Bg Color', true); if ($bgcolor) echo 'style="background-color: rgba(' . $bgcolor . ',0.5)"'; ?>>
       			<?php if (of_get_option('price_currency') != '' && pinc_get_post_price() != '') { ?>
       				<div class="pricewrapper"><div class="pricewrapper-inner"><span><?php echo pinc_get_post_price(); ?></span></div></div>
       			<?php }	?>
   
       			<?php
       			//if is video
       			$photo_source = get_post_meta($post->ID, "_Photo Source", true);
       			$post_video = pinc_get_post_video($photo_source);
   
       			if (!isset($pin_id)) {
       				$pin_id = $post->ID;
       			}
       			$images = get_attached_media('image', $pin_id);
       			$videos = get_attached_media('video', $pin_id);
   
       			if ($post_video || !empty($videos)) {
       			?>
   
       			<div class="featured-thumb-video"></div>
       			<?php } ?>
   
       			<?php
   
       			$is_gallery = count($images) > 1;
   
   
       				$imgsrc = wp_get_attachment_image_src(get_post_thumbnail_id ($post->ID), 'large');
   
   
   
       			if ($imgsrc[0] == '') {
       				$imgsrc[0] = get_template_directory_uri() . '/img/blank.gif';
       				$imgsrc[1] = get_option('medium_size_w');
       				$imgsrc[2] = get_option('medium_size_w');
       			} else if ($imgsrc[1] <= 1 && $imgsrc[2] <= 1){
       				$thumbid = get_post_thumbnail_id($post->ID);
       				$size = getimagesize($imgsrc[0]);
       				$imgsrc[1] = $size[0];
       				$imgsrc[2] = $size[1];
       			}
   
       			//if is animated gif
       			$animated_gif = false;
       			if (substr($imgsrc[0], -4) == '.gif' && get_post_meta(get_post_thumbnail_id($post->ID), 'a_gif', true) == 'yes') {
       					$animated_gif = true;
       					$animated_gif_imgsrc_full = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
       					echo '<div class="featured-thumb-gif"></div>';
   
       			}
   
       			//if need resize
       			if ($post_video && strpos($post_video, 'data-resize') !== false) {
       				$imgsrc[1] = get_option('medium_size_w');
       				$imgsrc[2] = round(get_option('medium_size_w')/1.77);
       			}
       			?>
       			<?php if ($is_gallery): ?>
       				<span class="gallery-indicator"></span>
       			<?php endif;?>
       			<img class="featured-thumb<?php if ($animated_gif) echo ' featured-thumb-gif-class" data-animated-gif-src-medium="' . $imgsrc[0] . '" data-animated-gif-src-full="' . $animated_gif_imgsrc_full[0]; ?>" src="<?php echo $imgsrc[0]; ?>" alt="<?php echo mb_strimwidth(the_title_attribute('echo=0'), 0, 100, ' ...'); ?>" style="width:<?php echo $imgsrc[1]; ?>px;height:<?php echo $imgsrc[2]; ?>px" />
       		</a>
   
       		<?php if ($post->post_status != 'pending') { ?>
       			<div class="masonry-actionbar">
       				<?php if (current_user_can('administrator') || current_user_can('editor') || current_user_can('author') || !is_user_logged_in()) { ?>
       					<button id="pinc-repin-<?php echo $post->ID; ?>" class="pinc-repin btn btn-default btn-sm" data-post_id="<?php echo $post->ID ?>" type="button"><i class="fa fa-retweet fa-lg"></i></button>
       				<?php } ?>
   
       				<?php if ($post->post_author != $user_ID) { ?>
       					<span class="undisable_buttons">
       						<button id="pinc-like-<?php echo $post->ID; ?>" class="pinc-like btn btn-default btn-sm<?php if(pinc_liked($post->ID)) { echo ' disabled'; } ?>" data-post_id="<?php echo $post->ID ?>" data-post_author="<?php echo $post->post_author; ?>" type="button"><i class="fa fa-heart fa-lg"></i></button>
       					</span>
       				<?php } else { ?>
       					<a id="pinc-edit-<?php echo $post->ID; ?>" class="pinc-edit-actionbar btn btn-default btn-sm" href="<?php echo home_url('/itm-settings/'); ?>?i=<?php the_ID(); ?>"><i class="fa fa-pencil fa-lg"></i></a>
       				<?php } ?>
   
       				<span class="undisable_buttons">
       					<button id="pinc-comment-<?php echo $post->ID; ?>" class="pinc-comment btn btn-default btn-sm" data-post_id="<?php echo $post->ID ?>" type="button"><i class="fa fa-comment fa-lg"></i></button>
       				</span>
       			</div>
       		<?php } ?>
   
       		<?php
       		$tags = '';
       		if (of_get_option('posttags') == 'enable') {
       			$the_tags = get_the_tags();
       			if ($the_tags) {
       				foreach($the_tags as $the_tag) {
       					$tags .= $the_tag->name . ', ';
       				}
       				$tags = substr($tags, 0, -2);
       			}
       		}
       		?>
   
   
   
       		<center><div class="post-actionbar">
       										<?php if ($post->post_status == 'publish' && (current_user_can('administrator') || current_user_can('editor') || current_user_can('author') || !is_user_logged_in())) { ?>
   
   
       										<span class="post-action-button">
       											<a class="pinc-repin btn btn-success" data-post_id="<?php echo $post->ID ?>" rel="tooltip" title="<?php _e('Repin', 'pinc'); ?>" data-placement="bottom"><i class="fa fa-retweet fa-fw"></i><span id="button-repins-count"><?php if ($post_repins_count > 0) echo '&nbsp; ' . $post_repins_count; ?></span></a>
       										</span>
   
       										<?php } ?>
   
   
       										<?php if (!$post_video) { ?>
   
       											<a class="btn btn-default"><?php echo do_shortcode('[epvc_views]') ?></a>
       										</span>
       										<?php } ?>
   
       										<?php if ($photo_source != '') { ?>
       											<a class="btn btn-default" href="<?php echo $photo_source; ?>" target="_blank" rel="nofollow"><img src="https://www.google.com/s2/favicons?domain=<?php echo $photo_source; ?>" alt="" /> <?php echo $photo_source_domain; ?></a>
       										</span>
       										<?php } ?>
   
       										<div class="clearfix"></div>
   
       									</div>
   
       				<div class="post-title" data-title="<?php echo esc_attr($post->post_title); ?>" data-tags="<?php echo esc_attr($tags); ?>" data-price="<?php echo esc_attr(pinc_get_post_price(false)); ?>" data-content="<?php echo esc_attr($post->post_content); ?>">
       			<?php
       			if ($post->post_status == 'pending') {
       				echo '<p><span class="label label-warning">' . __('Pending Review', 'pinc') . '</span></p>';
       			}
   
       			echo mb_strimwidth(the_title_attribute('echo=0'), 0, 51, ' ...');
   
   
   
       			if ($the_tags) {
       				echo '<div class="thetags">';
   
       				foreach($the_tags as $the_tag) {
       					echo '<a href="' . get_tag_link($the_tag->term_id). '">' . $the_tag->name . '</a> ';
       				}
   
       				echo '</div>';
       			}
   
       			?>
       		</div>
       	</div>
       	<a class="featured-thumb-link" href="<?php the_permalink(); ?>" <?php $bgcolor = get_post_meta($post->ID, '_Bg Color', true); if ($bgcolor) echo 'style="background-color: rgba(' . $bgcolor . ',0.5)"'; ?>><div class="readmore"><svg class="readmore" height="12" width="12" viewBox="0 0 24 24" aria-hidden="true" aria-label="" role="img"><path d="M12 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3M3 9c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm18 0c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"></path></svg></div></a>
   
       	<?php
       	$likes_number = get_post_meta($post->ID, '_Likes Count', true);
       	$repins_number = get_post_meta($post->ID, '_Repin Count', true);
       	$comments_number = get_comments_number();
       	?>
       	<div class="masonry-meta masonry-meta-comment-likes">
       	<?php
       		if ($repins_number == '' || $repins_number == '0') {
       			echo '<span id="repins-count-' . $post->ID . '" class="repins-count hide"></span>';'</span>';
       		} else {
       			echo '<span id="repins-count-' . $post->ID . '" class="repins-count"><i class="fa fa-retweet"></i> ' . $repins_number . '</span>';
       		}
   
       		if ($likes_number == '' || $likes_number == '0') {
       			echo '<span id="likes-count-' . $post->ID . '" class="likes-count hide"></span>';
       		} else {
       			echo '<span id="likes-count-' . $post->ID . '" class="likes-count"><i class="fa fa-heart"></i> ' . $likes_number . '</span>';
       		}
   
       		if ($comments_number == '0') {
       			echo '<span id="comments-count-' . $post->ID . '" class="comments-count hide"></span>';
       		} else {
       			echo '<span id="comments-count-' . $post->ID . '" class="comments-count"><i class="fa fa-comment"></i> ' . $comments_number . '</span>';
       		}
       	?>
       	</div>
   
       	<div class="masonry-meta">
       		<div class="masonry-meta-avatar"><a href="<?php echo home_url('/' . $wp_rewrite->author_base . '/') . get_the_author_meta('user_nicename'); ?>/"><?php echo get_avatar(get_the_author_meta('ID') , '30'); ?></a></div>
       		<div class="masonry-meta-comment">
       			<div class="masonry-meta-author"><a href="<?php echo home_url('/' . $wp_rewrite->author_base . '/') . get_the_author_meta('user_nicename'); ?>/"><?php echo get_the_author_meta('display_name'); ?></a></div>
       			<?php if (pinc_get_post_board()) { ?>
       				<div class="masonry-meta-content"><a href="<?php echo home_url('/' . $wp_taxonomies["board"]->rewrite['slug'] . '/' . sanitize_title(pinc_get_post_board()->name, '_') . '/' . pinc_get_post_board()->term_id . '/'); ?>"><?php echo pinc_get_post_board()->name; ?></a></div>
       			<?php }	?>
       		</div>
       	</div>
   
       	<?php
       	if ('0' != $frontpage_comments_number = of_get_option('frontpage_comments_number')) {
       	?>
       	<div id="masonry-meta-comment-wrapper-<?php echo $post->ID; ?>" class="masonry-post-comments">
       	<?php
       		if ($comments_number >  $frontpage_comments_number) {
       			$offset = $comments_number - $frontpage_comments_number;
       		} else {
       			$offset = 0;
       		}
   
       		$args = array(
       			'number' => $frontpage_comments_number,
       			'post_id' => $post->ID,
       			'order' => 'asc',
       			'offset' => $offset,
       			'status' => 'approve'
       		);
       		$comments = get_comments($args);
       		foreach($comments as $comment) {
       		?>
       		<div class="masonry-meta">
       			<?php $comment_author = get_user_by('id', $comment->user_id); ?>
       			<div class="masonry-meta-avatar">
       				<?php if ($comment_author) { ?>
       					<a href="<?php echo home_url('/' . $wp_rewrite->author_base . '/') . $comment_author->user_nicename; ?>/">
       				<?php } ?>
   
       				<?php echo get_avatar($comment->user_id, '30'); ?>
   
       				<?php if ($comment_author) { ?>
       					</a>
       				<?php } ?>
       			</div>
       			<div class="masonry-meta-comment" id="masonry-comment-<?php echo $comment->comment_ID;?>">
       				<?php if ($comment->user_id == get_current_user_id()) :?>
       				<div class="pull-right">
       					<a href="" class="comment-edit-link" comment-id="<?php echo $comment->comment_ID;?>"><?php echo __( 'Edit' );?></a>
       				</div>
       				<?php endif;?>
       				<span class="masonry-meta-author">
       					<?php if ($comment_author) { ?>
       						<a href="<?php echo home_url('/' . $wp_rewrite->author_base . '/') . $comment_author->user_nicename; ?>/">
       					<?php } ?>
   
       					<?php echo $comment->comment_author; ?>
   
       					<?php if ($comment_author) { ?>
       						</a>
       					<?php } ?>
       				</span>
       				<span class="masonry-meta-comment-content"><?php echo mb_strimwidth(strip_tags($comment->comment_content), 0, 95, '...'); ?></span>
       			</div>
       		</div>
       		<?php
       		}
       		?>
       		</div>
       	<?php
       	}
   
       	if (is_user_logged_in()) {
       	?>
       	<div id="masonry-meta-commentform-<?php echo $post->ID ?>" class="masonry-meta hide">
       		<div class="masonry-meta-avatar"><?php echo get_avatar($user_ID, '30'); ?></div>
       		<div class="masonry-meta-comment">
       		<?php
       		$id_form = 'commentform-' . $post->ID;
       		$id_submit = 'submit-' . $post->ID;
   
       		comment_form(array(
       			'id_form' => $id_form,
       			'id_submit' => $id_submit,
       			'title_reply' => '',
       			'cancel_reply_link' => __('X Cancel reply', 'pinc'),
       			'comment_notes_before' => '',
       			'comment_notes_after' => '',
       			'logged_in_as' => '',
       			'label_submit' => __('Post Comment', 'pinc'),
       			'comment_field' => '<textarea class="form-control" placeholder="' . __('Add a comment...', 'pinc') . '" name="comment" aria-required="true"></textarea>'
       		));
       		?>
       		</div>
       	</div>
       	<?php } ?>
       </div>
       ```
   
 *  Plugin Author [Archetyped](https://wordpress.org/support/users/archetyped/)
 * (@archetyped)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/simple-lightbox-integration/#post-13515954)
 * Hi, it looks like replacing the existing thumbnail link in your template (the
   link starting with `<a class="featured-thumb-link"`… in the `<div class="thumb-
   holder">` element) with the [Post thumbnail example from SLB’s documentation](https://github.com/archetyped/simple-lightbox/wiki/Activation#display-post-thumbnail-in-lightbox)
   will do what you want.
 * Note that you may need to add in CSS classes/ids from the template code that 
   you are replacing to match the existing styles, though its difficult to say for
   sure without seeing the full theme itself.

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

The topic ‘Simple Lightbox Integration’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/simple-lightbox.svg)
 * [Simple Lightbox](https://wordpress.org/plugins/simple-lightbox/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/simple-lightbox/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/simple-lightbox/)
 * [Active Topics](https://wordpress.org/support/plugin/simple-lightbox/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/simple-lightbox/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/simple-lightbox/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [featured](https://wordpress.org/support/topic-tag/featured/)
 * [thumbnail](https://wordpress.org/support/topic-tag/thumbnail/)

 * 3 replies
 * 2 participants
 * Last reply from: [Archetyped](https://wordpress.org/support/users/archetyped/)
 * Last activity: [5 years, 8 months ago](https://wordpress.org/support/topic/simple-lightbox-integration/#post-13515954)
 * Status: resolved