CODEWITHSUNDEEP
jquerycolorbox
user2048688
user2048688

Reputation: 1

Colorbox inline not working

<script type="text/javascript" charset="utf-8">
      $(document).ready(function(){        
        $(".popup-thumb").colorbox({inline:true, width:"50%"});       
      });
</script>

<a href="#bap1" class="popup-thumb">
            <img src="projects/bachelor/thumb001.png">
            <div class="summary">
              <h5>..</h5>
              <p>...</p>
            </div>
     </a>
     <div style="display: none;">
          <div class="popup" id="bap1">
            <p>...</p>
            <img src="projects/bachelor/001.png">
            <ul>..
            </ul>
          </div>
        </div>

I don't know why it's not working. The popup div doesn't appear at all. I think it's some simple trick...

Upvotes: 0

Views: 6501

Answers (1)

Scott Sword
Scott Sword

Reputation: 4708

You're wrapping an anchor tag around a block element which isn't semantic in non HTML5 environments.

So if you fix your HTML it should work here is a fiddle http://jsfiddle.net/bNa3Z/

<a href="#bap1" class="popup-thumb">Show</a>

<div style="display: none;">
    <div class="popup" id="bap1">
        <p>Hello World</p>
    </div>
</div>

Added jQuery:

$(document).ready(function(){        
    $(".popup-thumb").colorbox({inline:true, width:"50%"});       
});

Note - This is working code as seen in the fiddle, so if this still isn't working for you be sure to make sure that jQuery is running -

$(function(){
    alert('jQuery is running.');
});

And that you ar properly including your plugin.

Upvotes: 5

Related Questions