How can I add a lightbox to my WordPress
- SOLVED
Hi there,
I just have a short question regarding my website. Lately, I purchased a theme on Themeforest (http://themeforest.net/item/ares-blog-magazine-newspaper-template-/918661). I installed it without any problem, uploaded the xml file (to have some dummy contents) and started to customize it.
<strong>My website is:</strong> [[LINK href="http://amazing-world.org/"]]http://amazing-world.org/[[/LINK]]
I have managed to change the size of the featured images on my homepage and single post. Only the first image has been changed, all the others still have the old size (so don't worry about it).
However, what I would like to do now (and can't find a way to do it) is to add a "hover effect" on the featured images on my homepage. When someone clicks on one of them, it will open the post. Once the post opened, if they click again on the featured image, this image should open in a lightbox, allowing my visitors to see the "full image".
<strong>Here is an example of what I would like to do:</strong> [[LINK href="http://demos.brianmcculloh.com/continuum/"]]http://demos.brianmcculloh.com/continuum/[[/LINK]]
If you check the homepage of this demo, there is a hover effect on the image. When you click on one of them, it will open the post. The same image will be there (still with the hover effect) but when you click on it, it will open the ful image.
I have spent hours on internet to find a solution but couldn't manage to find one. Also note that I have installed the "wp-jquery-lightbox" plugin (in case it is useful).
Any ideas how I can add a hover effect on the homepage/post and a lightbox effect on the single post for all my featured images? I know how to do it for simple image, but not for featured ones :(
Thanks a lot for your help!
Best Regards and greetings from France.
Ben
Answers (1)
Arnav Joy answers:
if you have installed "WP jQuery Lightbox" then find the img tag
<img class="" alt="" src="http://amazing-world.org/wp-content/uploads/2012/07/4-KJ-Photography3-600x400.jpg">
and add rel="lightbox" to it as
<img rel="lightbox" class="" alt="" src="http://amazing-world.org/wp-content/uploads/2012/07/4-KJ-Photography3-600x400.jpg">
the above image is your first post , try it..
=====================updated==================
Please ignore my previous ans , here is the updated answer try it>-
you have to do two things :-
1. add rel="lightbox" to <a> tag
2. at href give the url of the image to be opened at light box
here is the first posts of your site
<a title="Beautiful Solar Storm Over Iceland" href="http://amazing-world.org/beautiful-solar-storm-over-iceland/">
<img class="" alt="" src="http://amazing-world.org/wp-content/uploads/2012/07/4-KJ-Photography3-600x400.jpg">
</a>
change it to
<a rel="lightbox" title="Beautiful Solar Storm Over Iceland" href="http://amazing-world.org/wp-content/uploads/2012/07/4-KJ-Photography3-600x400.jpg">
<img class="" alt="" src="http://amazing-world.org/wp-content/uploads/2012/07/4-KJ-Photography3-600x400.jpg">
</a>
see the change in the href attribute of <a>
deezign comments:
Hello and thank you for your reply,
However I can use this plugin on all my images but not with my "featured images" (post thumbnails generated by wordpress) because I don't have the links of such images. When I write a new post, I can choose a "featured image" (bottom right) and this image will be used as a thumbnail on my homepage. Because it is generate automatically, I don't have any links to add "rel="lightbox"" :(
Arnav Joy comments:
you do not have to put anything on the <img> tag , you have to put and change the <a> tag
see this
http://wordpress.org/extend/plugins/wp-jquery-lightbox/installation/
deezign comments:
Hi again,
I think there is a confusion. As I said, I can use this plugin with "standard" images because I have the links of these images. However, when I choose a "featured image", I upload it on the Gallery and then select "Use as featured image". The thing is, when I use it as a "featured image", the image doesn't appear in my text field, so I can't add any link to it. It is just automatically generated on my homepage. If I had the link of the featured image, it would be easy to add the lightbox effect. However, I can't find this link when I write a new post :(
Arnav Joy comments:
you want show lightbox when anyone clicks on the post at post single page
for example at this page : http://amazing-world.org/beautiful-solar-storm-over-iceland/
if yes then please share your's single.php code here
Arnav Joy comments:
try this
add this code to single.php at the end of the file
<script type="text/javascript">
jQuery(document).ready(function($){
$(".post_img a").attr("rel","lightbox");
});
</script>
deezign comments:
Hi again,
Sorry for being such a "pain in the ass" but I am really not a techy guy. Here is the code:
<?php
/**
* The main template file for display single post page.
*
* @package WordPress
*/
get_header();
?>
<br class="clear"/>
<!-- Begin content -->
<div id="content_wrapper">
<div class="inner">
<!-- Begin main content -->
<div class="inner_wrapper">
<div class="sidebar_content">
<h2 class="widgettitle header"><?php the_title(); ?></h2>
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<!-- Begin each blog post -->
<div class="post_wrapper">
<?php
if(has_post_thumbnail(get_the_ID(), 'blog_ft'))
{
$image_id = get_post_thumbnail_id(get_the_ID());
$image_thumb = wp_get_attachment_image_src($image_id, 'blog_ft', true);
$pp_blog_image_width = 600;
$pp_blog_image_height = 500;
}
if(!empty($image_thumb))
{
?>
<div class="post_img">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?php echo $image_thumb[0]; ?>" alt="" class=""/>
</a>
<?php
if(isset($cats[0]))
{
?>
<div class="caption_cat"><?php echo $cats[0]['name']; ?></div>
<?php
}
?>
</div>
<?php
}
?>
<div class="post_inner_wrapper">
<div class="post_header_wrapper single">
<br/>
<div class="post_detail">
<?php echo _e( 'Posted by', THEMEDOMAIN ); ?> <?php echo get_the_author(); ?> on <?php echo get_the_time('d M Y'); ?> /
<a href=""><?php comments_number('0 Comment', '1 Comment', '% Comments'); ?></a>
</div>
</div>
<?php
$pp_blog_display_social = get_option('pp_blog_display_social');
if(!empty($pp_blog_display_social)):
?>
<div class="post_social single">
<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&send=false&layout=button_count&width=200&show_faces=false&action=like&colorscheme=light&font&height=21&appId=268239076529520" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-text="<?php the_title(); ?>" data-url="<?php echo get_permalink(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<?php
endif; ?>
<br class="clear"/><br/><hr/>
<?php
the_content();
?>
</div>
</div>
<!-- End each blog post -->
<div class="post_wrapper">
<?php
$pp_blog_display_author = get_option('pp_blog_display_author');
if($pp_blog_display_author)
{
?>
<h2 class="widgettitle">Written by <?php the_author_link(); ?></h2>
<div id="about_the_author">
<div class="thumb"><?php echo get_avatar( get_the_author_meta('email'), '50' ); ?></div>
<div class="description">
<?php the_author_meta('description'); ?>
</div>
</div><br class="clear"/>
<?php
}
?>
<?php
$pp_blog_display_related = get_option('pp_blog_display_related');
if($pp_blog_display_related)
{
?>
<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'showposts'=>3,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '<h2 class="widgettitle">Related Posts</h2><br class="clear"/>';
?>
<div class="related_posts">
<?php
global $have_related;
while ($my_query->have_posts()) : $my_query->the_post();
$have_related = TRUE;
?>
<div class="each_item">
<?php
if(has_post_thumbnail($post->ID, 'related_post'))
{
$image_id = get_post_thumbnail_id($post->ID);
$image_url = wp_get_attachment_image_src($image_id, 'related_post', true);
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php echo $image_url[0]; ?>" alt="" class="frame"/>
</a><br/>
<?php
}
?>
<div class="content">
<strong class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></strong>
<br/>
<span class="post_attribute"><?php echo get_the_time('F j, Y', $post->ID); ?></span>
</div>
</div>
<?php
endwhile;
wp_reset_query();
?>
</div>
<br class="clear"/>
<?php
}
}
?>
<?php
} //end if show related
?>
<?php comments_template( '' ); ?>
<?php wp_link_pages(); endwhile; endif; ?>
</div>
</div>
<div class="sidebar_wrapper">
<?php
$twitter_id = get_option(SHORTNAME.'_twitter_username');
$fb_id = get_option('pp_feedburner_id');
if(!empty($twitter_id) OR !empty($fb_id)):
?>
<div class="social_profile">
<div class="profile">
<a href="<?php echo $fb_id; ?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/social_feeds.png" alt="" class="alignleft social"/>
</a>
<h4><?php pp_feeds_count(); ?></h4>
<span class="count">subscribers</span>
</div>
<div class="profile">
<a href="http://twitter.com/<?php echo $twitter_id; ?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/social_twitter.png" alt="" class="alignleft social"/>
</a>
<h4><?php pp_twitter_followers(); ?></h4>
<span class="count">followers</span>
</div>
<br class="clear"/>
</div>
<?php
endif;
?>
<div class="ads125_wrapper">
<?php
$pp_side_banner = get_option('pp_side_banner');
if(!empty($pp_side_banner))
{
echo stripslashes($pp_side_banner);
}
?>
</div>
<div class="sidebar">
<div class="content">
<ul class="sidebar_widget">
<?php dynamic_sidebar('Single Post Sidebar'); ?>
</ul>
</div>
</div>
<br class="clear"/>
<div class="sidebar_bottom"></div>
</div>
</div>
<!-- End main content -->
<br class="clear"/>
</div>
<div class="bottom"></div>
</div>
<!-- End content -->
<?php get_footer(); ?>
Arnav Joy comments:
try this and do not forget to activate the plugin
<?php
/**
* The main template file for display single post page.
*
* @package WordPress
*/
get_header();
?>
<br class="clear"/>
<!-- Begin content -->
<div id="content_wrapper">
<div class="inner">
<!-- Begin main content -->
<div class="inner_wrapper">
<div class="sidebar_content">
<h2 class="widgettitle header"><?php the_title(); ?></h2>
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<!-- Begin each blog post -->
<div class="post_wrapper">
<?php
if(has_post_thumbnail(get_the_ID(), 'blog_ft'))
{
$image_id = get_post_thumbnail_id(get_the_ID());
$image_thumb = wp_get_attachment_image_src($image_id, 'blog_ft', true);
$pp_blog_image_width = 600;
$pp_blog_image_height = 500;
}
if(!empty($image_thumb))
{
?>
<div class="post_img">
<a href="<?php echo $image_thumb[0]; ?>" rel="lightbox" title="<?php the_title(); ?>">
<img src="<?php echo $image_thumb[0]; ?>" alt="" class=""/>
</a>
<?php
if(isset($cats[0]))
{
?>
<div class="caption_cat"><?php echo $cats[0]['name']; ?></div>
<?php
}
?>
</div>
<?php
}
?>
<div class="post_inner_wrapper">
<div class="post_header_wrapper single">
<br/>
<div class="post_detail">
<?php echo _e( 'Posted by', THEMEDOMAIN ); ?> <?php echo get_the_author(); ?> on <?php echo get_the_time('d M Y'); ?> /
<a href=""><?php comments_number('0 Comment', '1 Comment', '% Comments'); ?></a>
</div>
</div>
<?php
$pp_blog_display_social = get_option('pp_blog_display_social');
if(!empty($pp_blog_display_social)):
?>
<div class="post_social single">
<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&send=false&layout=button_count&width=200&show_faces=false&action=like&colorscheme=light&font&height=21&appId=268239076529520" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-text="<?php the_title(); ?>" data-url="<?php echo get_permalink(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<?php
endif; ?>
<br class="clear"/><br/><hr/>
<?php
the_content();
?>
</div>
</div>
<!-- End each blog post -->
<div class="post_wrapper">
<?php
$pp_blog_display_author = get_option('pp_blog_display_author');
if($pp_blog_display_author)
{
?>
<h2 class="widgettitle">Written by <?php the_author_link(); ?></h2>
<div id="about_the_author">
<div class="thumb"><?php echo get_avatar( get_the_author_meta('email'), '50' ); ?></div>
<div class="description">
<?php the_author_meta('description'); ?>
</div>
</div><br class="clear"/>
<?php
}
?>
<?php
$pp_blog_display_related = get_option('pp_blog_display_related');
if($pp_blog_display_related)
{
?>
<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'showposts'=>3,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '<h2 class="widgettitle">Related Posts</h2><br class="clear"/>';
?>
<div class="related_posts">
<?php
global $have_related;
while ($my_query->have_posts()) : $my_query->the_post();
$have_related = TRUE;
?>
<div class="each_item">
<?php
if(has_post_thumbnail($post->ID, 'related_post'))
{
$image_id = get_post_thumbnail_id($post->ID);
$image_url = wp_get_attachment_image_src($image_id, 'related_post', true);
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php echo $image_url[0]; ?>" alt="" class="frame"/>
</a><br/>
<?php
}
?>
<div class="content">
<strong class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<br/>
<span class="post_attribute"><?php echo get_the_time('F j, Y', $post->ID); ?></span>
</div>
</div>
<?php
endwhile;
wp_reset_query();
?>
</div>
<br class="clear"/>
<?php
}
}
?>
<?php
} //end if show related
?>
<?php comments_template( '' ); ?>
<?php wp_link_pages(); endwhile; endif; ?>
</div>
</div>
<div class="sidebar_wrapper">
<?php
$twitter_id = get_option(SHORTNAME.'_twitter_username');
$fb_id = get_option('pp_feedburner_id');
if(!empty($twitter_id) OR !empty($fb_id)):
?>
<div class="social_profile">
<div class="profile">
<a href="<?php echo $fb_id; ?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/social_feeds.png" alt="" class="alignleft social"/>
</a>
<h4><?php pp_feeds_count(); ?></h4>
<span class="count">subscribers</span>
</div>
<div class="profile">
<a href="http://twitter.com/<?php echo $twitter_id; ?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/social_twitter.png" alt="" class="alignleft social"/>
</a>
<h4><?php pp_twitter_followers(); ?></h4>
<span class="count">followers</span>
</div>
<br class="clear"/>
</div>
<?php
endif;
?>
<div class="ads125_wrapper">
<?php
$pp_side_banner = get_option('pp_side_banner');
if(!empty($pp_side_banner))
{
echo stripslashes($pp_side_banner);
}
?>
</div>
<div class="sidebar">
<div class="content">
<ul class="sidebar_widget">
<?php dynamic_sidebar('Single Post Sidebar'); ?>
</ul>
</div>
</div>
<br class="clear"/>
<div class="sidebar_bottom"></div>
</div>
</div>
<!-- End main content -->
<br class="clear"/>
</div>
<div class="bottom"></div>
</div>
<!-- End content -->
<?php get_footer(); ?>
deezign comments:
Hi,
It is definitely starting to be better. Now I can open the lightbox. However, the lightbox open the thumbnail and not the full image. Do you know how we can do this?
I always upload the original photo, and then, when I used it as Featured Image, it crop it to be 600x400px. Any possibility to have the full image open when clicking on it?
Arnav Joy comments:
let me do that
Arnav Joy comments:
try this
<?php
/**
* The main template file for display single post page.
*
* @package WordPress
*/
get_header();
?>
<br class="clear"/>
<!-- Begin content -->
<div id="content_wrapper">
<div class="inner">
<!-- Begin main content -->
<div class="inner_wrapper">
<div class="sidebar_content">
<h2 class="widgettitle header"><?php the_title(); ?></h2>
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<!-- Begin each blog post -->
<div class="post_wrapper">
<?php
if(has_post_thumbnail(get_the_ID(), 'blog_ft'))
{
$image_id = get_post_thumbnail_id(get_the_ID());
$image_thumb = wp_get_attachment_image_src($image_id, 'blog_ft', true);
$image_thumb2 = wp_get_attachment_image_src($image_id, 'full', true);
$pp_blog_image_width = 600;
$pp_blog_image_height = 500;
}
if(!empty($image_thumb))
{
?>
<div class="post_img">
<a href="<?php echo $image_thumb2[0]; ?>" rel="lightbox" title="<?php the_title(); ?>">
<img src="<?php echo $image_thumb[0]; ?>" alt="" class=""/>
</a>
<?php
if(isset($cats[0]))
{
?>
<div class="caption_cat"><?php echo $cats[0]['name']; ?></div>
<?php
}
?>
</div>
<?php
}
?>
<div class="post_inner_wrapper">
<div class="post_header_wrapper single">
<br/>
<div class="post_detail">
<?php echo _e( 'Posted by', THEMEDOMAIN ); ?> <?php echo get_the_author(); ?> on <?php echo get_the_time('d M Y'); ?> /
<a href=""><?php comments_number('0 Comment', '1 Comment', '% Comments'); ?></a>
</div>
</div>
<?php
$pp_blog_display_social = get_option('pp_blog_display_social');
if(!empty($pp_blog_display_social)):
?>
<div class="post_social single">
<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&send=false&layout=button_count&width=200&show_faces=false&action=like&colorscheme=light&font&height=21&appId=268239076529520" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-text="<?php the_title(); ?>" data-url="<?php echo get_permalink(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<?php
endif; ?>
<br class="clear"/><br/><hr/>
<?php
the_content();
?>
</div>
</div>
<!-- End each blog post -->
<div class="post_wrapper">
<?php
$pp_blog_display_author = get_option('pp_blog_display_author');
if($pp_blog_display_author)
{
?>
<h2 class="widgettitle">Written by <?php the_author_link(); ?></h2>
<div id="about_the_author">
<div class="thumb"><?php echo get_avatar( get_the_author_meta('email'), '50' ); ?></div>
<div class="description">
<?php the_author_meta('description'); ?>
</div>
</div><br class="clear"/>
<?php
}
?>
<?php
$pp_blog_display_related = get_option('pp_blog_display_related');
if($pp_blog_display_related)
{
?>
<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'showposts'=>3,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '<h2 class="widgettitle">Related Posts</h2><br class="clear"/>';
?>
<div class="related_posts">
<?php
global $have_related;
while ($my_query->have_posts()) : $my_query->the_post();
$have_related = TRUE;
?>
<div class="each_item">
<?php
if(has_post_thumbnail($post->ID, 'related_post'))
{
$image_id = get_post_thumbnail_id($post->ID);
$image_url = wp_get_attachment_image_src($image_id, 'related_post', true);
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php echo $image_url[0]; ?>" alt="" class="frame"/>
</a><br/>
<?php
}
?>
<div class="content">
<strong class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<br/>
<span class="post_attribute"><?php echo get_the_time('F j, Y', $post->ID); ?></span>
</div>
</div>
<?php
endwhile;
wp_reset_query();
?>
</div>
<br class="clear"/>
<?php
}
}
?>
<?php
} //end if show related
?>
<?php comments_template( '' ); ?>
<?php wp_link_pages(); endwhile; endif; ?>
</div>
</div>
<div class="sidebar_wrapper">
<?php
$twitter_id = get_option(SHORTNAME.'_twitter_username');
$fb_id = get_option('pp_feedburner_id');
if(!empty($twitter_id) OR !empty($fb_id)):
?>
<div class="social_profile">
<div class="profile">
<a href="<?php echo $fb_id; ?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/social_feeds.png" alt="" class="alignleft social"/>
</a>
<h4><?php pp_feeds_count(); ?></h4>
<span class="count">subscribers</span>
</div>
<div class="profile">
<a href="http://twitter.com/<?php echo $twitter_id; ?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/social_twitter.png" alt="" class="alignleft social"/>
</a>
<h4><?php pp_twitter_followers(); ?></h4>
<span class="count">followers</span>
</div>
<br class="clear"/>
</div>
<?php
endif;
?>
<div class="ads125_wrapper">
<?php
$pp_side_banner = get_option('pp_side_banner');
if(!empty($pp_side_banner))
{
echo stripslashes($pp_side_banner);
}
?>
</div>
<div class="sidebar">
<div class="content">
<ul class="sidebar_widget">
<?php dynamic_sidebar('Single Post Sidebar'); ?>
</ul>
</div>
</div>
<br class="clear"/>
<div class="sidebar_bottom"></div>
</div>
</div>
<!-- End main content -->
<br class="clear"/>
</div>
<div class="bottom"></div>
</div>
<!-- End content -->
<?php get_footer(); ?>
deezign comments:
Hi,
Thanks a lot for the code, it is working great. However there is just one bug. When I open the lightbox, everything is ok, but when I close it, a "menu bar" appears. I have share a screenshot for you to see. Any idea how to fix this?
Will this also work if I install another lightbox plugin?
Thanks a lot!