CODEWITHSUNDEEP
javascriptjquerycolorbox
David Yell
David Yell

Reputation: 11855

jQuery Colorbox hide content on close

I am trying to display a hidden div in colorbox using an <a> link's onclick

The fiddle -> http://jsfiddle.net/hSp3m/1/

Here is my markup,

<style type="text/css">
.lightbox-content{ display: none }
</style>

<div class="panel yellow">
    <h4 class="font">Title</h4>
    <a title="View now &raquo;" class="learnmore" href="#">View now &raquo;</a>
    <div class="lightbox-content">
        <h4>The first lightbox</h4>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
</div>

<script type="text/javascript">
    $('.panel .learnmore').click(function(e){
        e.preventDefault();
        var d = $(this);
        $.colorbox({
            width: 920,
            inline: true,
            href: d.siblings('div.lightbox-content'),
            opacity: 0.5,
            open: true,
            onLoad: function(){
                d.siblings('div.lightbox-content').fadeIn()
            },
            onCleanup: function(){
                d.siblings('div.lightbox-content').hide()
            }
        })
    });
</script>

Now the lightbox will open, and load content fine. It will even fade the content in. The problem is that once the lightbox has closed, a display: block style is applied to .lightbox-content which I can't seem to get rid of.

I want to keep the content hidden, show it on click in the lightbox, and then hide it again on close.

Any ideas please?

Upvotes: 0

Views: 5218

Answers (2)

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

Here ya go. You needed to wrap it in a hidden container. The inline command takes the content and then replaces it after the color box is closed. jsfiddle

Upvotes: 1

Brooke
Brooke

Reputation: 66

http://jsfiddle.net/hSp3m/9/

$('.panel .learnmore').click(function(e){
    var d = $(this);
    $.colorbox({
        width: 600,
        inline: true,
        opacity: 0.5,
        href: d.siblings('div.lightbox-content'),
        onOpen: function(){
            d.siblings('div.lightbox-content').fadeIn()
        },
        onCleanup: function(){
            $('div.lightbox-content').hide();
        }
    }); return false;
});

Looking @ the functionality, it should have all lightbox-content hidden, so the oncleanup was changed to clear down all lightbox content divs.

Upvotes: 0

Related Questions