How do I use colorbox to show hidden divs on my page without hardcoding?

后端 未结 4 2018
走了就别回头了
走了就别回头了 2021-02-13 03:31

I\'m using Colorbox to show the html content of hidden divs on my page. I can get this to work perfectly with the following:

$(\"a.colorbox\").colorbox({width:\         


        
相关标签:
4条回答
  • 2021-02-13 04:09

    This is the way I got it to work

    HTML: (taken from the example in one of the answers)

    <a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
    <div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
         <p>Lightbox content goes here</p>
    </div>
    

    Javascript:

    $('a.lightboxTrigger').click(function(){ 
        var ref = $(this).attr("href");
        $.colorbox({ html: $(ref).html() });
        $.colorbox.resize();
     });
    
    0 讨论(0)
  • 2021-02-13 04:13

    I'm facing the same issue. What does your html look like? meaning, how did you structure your "divs"

    Mine looks like this: Javascript:

    <script>
        $(document).ready(function () {
        $("a.colorbox").colorbox({ width: "50%", inline: true, href: function () {
              var elementID = $(this).attr('id');
              return "#" + elementID;
           } 
          }); 
        });
    </script>
    

    And the html looks like (I tried changing the display:none):

    <a class='colorbox' href="#">Inline HTML</a>
       <div style="display:none">
           <div id="pop">
              This data is to be displayed in colorbox
           </div>
       </div>
    
    0 讨论(0)
  • 2021-02-13 04:22
    return "#" + elementID; 
    

    will have the desired effect as David says.

    0 讨论(0)
  • 2021-02-13 04:22

    I didn't really like any of the answers given above. This is how I did it (similar but not quite the same). I also fully commented it for people a bit new to Javascript and the colorbox plug in.

    $(document).ready(function() { //waits until the DOM has finished loading
        if ($('a.lightboxTrigger').length){ //checks to see if there is a lightbox trigger on the page
            $('a.lightboxTrigger').each(function(){ //for every lightbox trigger on the page...
                var url = $(this).attr("href"); // sets the link url as the target div of the lightbox
                $(url).hide(); //hides the lightbox content div
                $(this).colorbox({
                     inline:true, // so it knows that it's looking for an internal href
                     href:url, // tells it which content to show
                     width:"70%",
                     onOpen:function(){ //triggers a callback when the lightbox opens
                        $(url).show(); //when the lightbox opens, show the content div
                     },
                     onCleanup:function(){
                        $(url).hide(); //hides the content div when the lightbox closes
                     }
                }).attr("href","javascript:void(0)"); //swaps the href out with a javascript:void(0) after it's saved the href to the url variable to stop the browser doing anything with the link other than launching the lightbox when clicked
                  //you could also use "return false" for the same effect but I proffered that way
            })
         }
    });
    

    And this is the html:

    <a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
    <div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
         <p>Lightbox content goes here</p>
    </div>
    

    I think it would work with multiple lightboxes on the one page but I haven't tested it with that.

    0 讨论(0)
提交回复
热议问题