Set size of lightbox for inline content

  • Resolved ad3r0wb0tham

    (@ad3r0wb0tham)


    5 years, 9 months ago

    How do I set the width for the lightbox when I use inline content? The height seems to detect my content height but the width is fixed at about 640px.

    Also is there any documentation for overriding its CSS generally? I see it uses inline styles so CSS in my style.css will not override this.

    In this example my content is 800px wide and is wider than the lightbox.

    <style type="text/css">
.colorbox-panel
{
  width: 800px;
  height: 400px;
  background-color: silver;
  padding: 25px;
}

</style>

[wp_colorbox_media url="#thumb_1" type="inline" class="my-custom-class" hyperlink="/wp-content/uploads/path/to/my-thumbnail-300x300.jpg"]

<div style="display: none;">

  <div id="thumb_1" class="colorbox-panel">
    <h2 class="lb-heading">This is a heading/h2>
    <p>Duis pulvinar ornare congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus nec tempor felis.</p>
  </div>

</div>
Viewing 8 replies - 1 through 8 (of 8 total)

  • Also I would like to know this.

    Plugin Author Noor Alam

    (@naa986)

    This needs to be customized in the code.

    Plugin Author Noor Alam

    (@naa986)

    This needs to be customized in the code

    use this codes in your theme , it will automatically resize full size the lightbox.

    jQuery(document).ready(function($) {
    function viewport() {
    var e = window, a = ‘inner’;
    if (!(‘innerWidth’ in window )) {
    a = ‘client’;
    e = document.documentElement || document.body;
    }
    return { width : e[ a+’Width’ ] , height : e[ a+’Height’ ] };
    }

    function onresize (){
    h = viewport().height; w= viewport().width;
    $(“.wp-colorbox-image”).colorbox({maxWidth:”99%”, maxHeight: “99%”});
    $(“.wp-colorbox-youtube”).colorbox({iframe:true, scrolling:false, width:”90%”, height:”90%”, maxWidth:w, maxHeight: h});
    $(“.wp-colorbox-vimeo”).colorbox({iframe:true, scrolling:false, width:”90%”, height:”90%”, maxWidth:w, maxHeight: h});
    $(“.wp-colorbox-iframe”).colorbox({iframe:true, width:”80%”, height:”80%”});
    $(“.wp-colorbox-inline”).colorbox({inline:true, width:”90%”, maxWidth:w});
    console.log(“Resolution : “+w+”px X “+h+”px”);
    }
    jQuery(window).resize(onresize );
    onresize ();// first time;
    });

    • This reply was modified 5 years, 6 months ago by Saad Amin.

    @saadamin this is giving me Uncaught SyntaxError: Invalid or unexpected token

    @stevenseagal Please check jQuery has been loaded successfully. If you can see like this jquery is working https://photos.app.goo.gl/Ai8HrSotu9EkQst76

    yes, installed correctly…. 1.12.4

    @stevenseagal let me have your page url please.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Set size of lightbox for inline content’ is closed to new replies.