Support » Plugin: WordPress Colorbox Lightbox » Set size of lightbox for inline content

  • Resolved ad3r0wb0tham

    (@ad3r0wb0tham)


    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

    Saad Amin

    (@saadamin)

    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;
    });

    @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)
  • You must be logged in to reply to this topic.