Docs

[king88sley]

Hi Guys,

I was going through your forum which i was trying to solve this issue myself of viewing a single post lightbox. I have come across having the below code in my function.php

What i have done so far:

1. I have downloaded and uploaded the child theme to my site and activated. 2. I have added the code below to my child theme : function.php

Am i missing out something?

// Featured Image – Open Index Posts Image in a lightbox // =============================================================================

if ( ! function_exists( ‘x_featured_image’ ) ) : function x_featured_image( $cropped = ’’ ) { endif;

$stack = x_get_stack();
$fullwidth = ( in_array( ‘x-full-width-active’, get_body_class() ) ) ? true : false;
if ( has_post_thumbnail() ) {
if ( $cropped == ‘cropped’ ) {
if ( $fullwidth ) {
$thumb = get_the_post_thumbnail( NULL, ‘entry-‘ . $stack . ‘-cropped-fullwidth’, NULL );
} else {
$thumb = get_the_post_thumbnail( NULL, ‘entry-‘ . $stack . ‘-cropped’, NULL );
}
} else {
if ( $fullwidth ) {
$thumb = get_the_post_thumbnail( NULL, ‘entry-‘ . $stack . ‘-fullwidth’, NULL );
} else {
$thumb = get_the_post_thumbnail( NULL, ‘entry-‘ . $stack, NULL );
}
}
switch ( is_singular() ) {
case true:
printf( ‘ %s ‘, $thumb );
break;
case false:
printf( ‘%3$s’,
esc_url( wp_get_attachment_url( get_post_thumbnail_id($post->ID) ) ),
esc_attr( sprintf( ( ‘Permalink to: “%s”‘, ‘__x’ ), the_title_attribute( ‘echo=0’ ) ) ),
$thumb
);
break;
}
}
}
// Adding Lightbox jQuery code.

add_action(‘wp_footer’, ‘enqueue_lightbox_script’);

function enqueue_lightbox_script() { }

echo ‘
<script type=”text/javascript” src=”‘ . home_url() . ‘/wp-content/plugins/x-shortcodes/js/dist/site/vendor-ilightbox.min.js”></script>
<script>
jQuery(document).ready(function(){jQuery(“.entry-featured .entry-thumb”).iLightBox({skin: “light”,linkId: “gallery-image”,overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: “horizontal”,controls: {thumbnail: false}});});
</script>
‘;

[Rue Nel]

Hello There,

Thanks for writing in! Please update the line in your code and use this instead:

<script type="text/javascript" src="' . home_url() . '/wp-content/plugins/cornerstone/assets/dist/js/site/vendor-ilightbox.min.js"></script>

And to assist you better with this issue, would you mind providing us the url of your site with login credentials, if necessary, so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password (only if necessary)

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[king88sley]

This reply has been marked as private.

[Rad]

Hi there,

1. Your login redirects to http://127.0.0.1/ which is from your local machine and not accessible from our end.

2. Please provide your FTP login credentials as well.

3. Your site is responsive but you added fixed padding. You should’ve use section’s row column container. It will add space on both side but responsive. Column container is the same as visual composer’s inner container. You can find that option by inspecting section’s row. As for the logo, you should use an image with the size of 767px. It’s currently 300px, and the image will only respond if its container is pushing it. Since mobile start at 767px then it will stay 300px since there is no need to the container to push it. You can force 100% width for 300px, but that will be blurry.

Thanks!

[king88sley]

This reply has been marked as private.

[king88sley]

This reply has been marked as private.

[king88sley]

This reply has been marked as private.

[Lely]

Hello Kingsley,

I am able to login and check several of those post randomly. But then you don’t have featured image for those post. For the above code to work, we need to set featured image. See attached screenshot.

Regarding responsiveness, are you referring to the text being squish. That is because of the 80px left and right padding. That’s to much on mobile view. Please try to add mobile-padding on the column class field. Then add the following on Appearance > Customize > Custom > Edit Global CSS:

@media (max-width: 767px){
.mobile-padding {
    padding: 40px 20px !important;
}
}

That CSS will override the default 80px padding on desktop view to just 20px.

Hope this helps.

[king88sley]

Hi,

Please check on Page 9 of the Post page and there are some post which has feature image and still not working properly.

[Paul R]

Hi,

It looks like it is in conflict with Global Gallery Plugin.

Can you try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks

[king88sley]

Still not helping the Solution. I have deactivated Global Gallery and step by step other plugins, but issue still persist.

[Lely]

Hello There,

Upon checking, I can’t find any post with featured image. I found image on this post:http://www.akpoborie.com/chelsea-vs-west-ham-51-betting-odds-on-blues/ but then the image is under content not as featured image. So, I made this draft post:http://www.akpoborie.com/?p=955&preview=true to check. The code is not added there. I tried to login via FTP but then I can’t connect to see your current code. I just made a testing on my test site and the following code should work:

add_action('wp_footer', 'enqueue_lightbox_script', -99999);

function enqueue_lightbox_script() {

if ( is_single() ) :
?>

    <script type="text/javascript" src="<?php echo home_url(); ?>/wp-content/plugins/cornerstone/assets/dist/js/site/vendor-ilightbox.min.js"></script>
    <script type="text/javascript">
      jQuery(function( $ ){ 

        $( '.entry-featured  img' ).each( function(){

                $( this ).parent().attr('href', $(this).attr('src') ).iLightBox({skin: "light",linkId: "gallery-image",overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: "horizontal",controls: {thumbnail: false}});

        } )

      });
    </script>

<?php
endif;
}

Please do make sure that you have added a featured image. That code will not work on images inside main content. You may test that code on the draft post that I have added.

Hope this helps.

[king88sley]

This reply has been marked as private.

[king88sley]

I think we have misunderstand each other. What i actually wants to accomplish is that, the whole single page of a post would pop out as lightbox, not just the feature image on the post.

[Joao]

Hi There,

If you want to show a post in a light box you can use the followuing code to launch it from a button.

Please paste the code on a RAW Content Element on Cornerstone.

[button href="http://173.193.60.90/~xthemetest/2016/06/08/demo-5-reasons-you-need-the-x-theme/" class="btn-lightbox" type="flat" shape="square" size="small" title="Example"]Pop Me![/button]
[lightbox selector=".btn-lightbox"]

Just adapt the code to your wishes.

I personally believe you will have a better effect if you emulate your post as a page without a header and footer, but this is a personal opinion that maybe not be what you are looking for.

Hope it helps

Joao

[Author]

Posts