CODEWITHSUNDEEP
jquerycsscolorbox
Nuri Akman
Nuri Akman

Reputation: 820

Moving colorbox's captions to top of box?

I'm using colorbox to open modal windows on my project.

There is 5 style to use colorbox. I'm using Example 5 on this url: http://www.jacklmoore.com/colorbox/example5/

I am trying to move colorbox.js's caption row (title attribute text, background and close icon) to the top of the box - it defaults to the bottom. How can I do it?

This is normal view of Colorbox window on Example 5:

This is normal view of Colorbox window on Example 5

This is what I REALLY WANT:

This is what I really want

Upvotes: 2

Views: 10922

Answers (5)

user5296864
user5296864

Reputation:

Replace this

       $content = $tag(div, "Content").append(
            $title = $tag(div, "Title"),
            $current = $tag(div, "Current"),
            $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}),
            $next = $('<button type="button"/>').attr({id:prefix+'Next'}),
            $slideshow = $('<button type="button"/>').attr({id:prefix+'Slideshow'}),
            $loadingOverlay
        );

        $close = $('<button type="button"/>').attr({id:prefix+'Close'});

With

$content = $tag(div, "Content").append(
        //$title = $tag(div, "Title"),   // comment this line
        $current = $tag(div, "Current"),
        $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}),
        $next = $('<button type="button"/>').attr({id:prefix+'Next'}),
        $slideshow = $('<button type="button"/>').attr({id:prefix+'Slideshow'}),
        $loadingOverlay
    );

    $close = $('<button type="button"/>').attr({id:prefix+'Close'});
    // add this new code
    $wrap  = $tag(div, "Wrapper").append(
            $title = $tag(div, "Title")
    );

Upvotes: 0

Tofeeq
Tofeeq

Reputation: 2693

Edit colorbox.css Make following changes


1. Replace 
#cboxLoadedContent{margin-bottom:28px;}
with 
#cboxLoadedContent{margin-top:28px;}

2. Replace
#cboxClose{position:absolute; bottom:0;
with
#cboxClose{position:absolute; top:0;

Upvotes: 1

Digital Khurana
Digital Khurana

Reputation: 51

Simply copy the below mentioned code in the bottom of your colorbox.css

#colorbox #cboxClose { top: 0; right: 0; } #cboxLoadedContent{ margin-top:28px; margin-bottom:0; }

Upvotes: 5

gerry durocher
gerry durocher

Reputation: 1

Found an easier way to change the close to an image, change word "close" to your image in jquery.colorbox.js

current: "image {current} of {total}", previous: "previous", next: "next", close: "", //was "close" xhrError: "This content failed to load.", imgError: "This image failed to load.",

Upvotes: 0

CSSian
CSSian

Reputation: 1661

You have to do two things: The first is easy; you'll have to edit the CSS file (colorbox.css) and change the position rule for the following elements:

#cboxTitle, #cboxCurrent, #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow

so that their absolute positioning is based on the 'top' property not the 'bottom' property. Here is an example, before and after an edit (the before version is commented out):

/*#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} */
  #cboxCurrent{position:absolute; top: 0; left:58px; font-weight:bold; color:#7C7C7C;}

You'll have to experiment to get the proper values for the 'top' property.

The second thing to do may be more difficult. The plugin uses an image 'sprite' (a composite of many images) called controls.png. Looking at it, it does not have the images necessary to do what you want.

If you are competent with an image editor, you could modify this image and add the necessary images, then determine the X-Y co-ordinates necessary to use the new image content according to typical sprite use in CSS. Don't know if you are up for this.

Ah, but you thought it was a simple change, eh? Best of luck!

Upvotes: 10

Related Questions