CODEWITHSUNDEEP
jqueryfancybox
SirCumz
SirCumz

Reputation: 171

fancybox put title on top and stay there

I'm working with Fancybox 2.0 and I want the titlebox to appear above the image or on top of the image, not below.

Just above all content.

I tried to make the fancybox-inner style position:absolute, but then the height of the fancybox-wrap wont be set to absolute pixels.

Could someone help me achieve that?

Upvotes: 2

Views: 18007

Answers (9)

Kᴏɴsᴛᴀɴᴛɪɴ Sʜɪʟᴏᴠ
Kᴏɴsᴛᴀɴᴛɪɴ Sʜɪʟᴏᴠ

Reputation: 13016

This code on jsfiddle: http://jsfiddle.net/JYzqR/.

$(".fancybox").fancybox({
  helpers : {
    title: {
      type: 'inside',          
      position: 'top'
    }
  },
  nextEffect: 'fade',
  prevEffect: 'fade'
});
.fancybox-title {
  padding: 0 0 10px 0;
}
<a rel="gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet augue et magna interdum hendrerit" class="fancybox" href="https://i.sstatic.net/oZFno.jpg"><img src="https://i.sstatic.net/eZSbk.jpg" alt=""/></a>
<a rel="gallery" title="Proin imperdiet augue et magna interdum hendrerit" class="fancybox" href="https://i.sstatic.net/tv3kk.jpg"><img src="https://i.sstatic.net/IWWbG.jpg" alt=""/></a>

<!-- External Resources -->
<!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- fancybox --><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

Read "Set title at the top" there http://fancyapps.com/fancybox/#examples

Upvotes: 3

amigatra
amigatra

Reputation: 1

afterLoad   : function() {
    this.outer.prepend( '<a href="index.html"> <img src="img/logo.svg" class="logoShow"></a>' );

    }

Try put that code in your fancybox function. for example

$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox({
openEffect  : 'none',
closeEffect : 'none',
afterLoad   : function() {
    this.outer.prepend( '<a href="index.html"> <img src="img/logo.svg" class="logoShow"></a>' );
    }

});

and setting the class "logoShow" css

Upvotes: 0

virtualeyes
virtualeyes

Reputation: 11237

Override fancybox's default css by either adding the below snippet after you include fancybox.css

// set modal title above container (overriding default bottom)
.fancybox-title-float-wrap {
  bottom: auto;
  top: -35px;
}

or, if you use a build system (use GruntJS here) with LESS, then it's as easy as doing in your fancybox-custom.less.

@import "fancybox";

along with above snippet; that way you consolidate your patches in a single place vs. scattering around your app.

Upvotes: 0

Amit Kvint
Amit Kvint

Reputation: 111

Best and simplest - using the helpers:

helpers : {
            title : {
                type: 'inside',
                position : 'top'
            }
        }

Upvotes: 9

PKHunter
PKHunter

Reputation: 707

Chris Mackie's answer is the cleanest. No mucking about with afterUpload etc. The only thing you can add to push the top of the FancyBox down is the margins: 

$(document).ready(function() {

      $('.fancybox').fancybox({
                    padding      : 0,
          margin       : [60, 60, 20, 60],
          autoSize     : false, 
          autoCenter   : true,
          fitToView    : true,
          openEffect   : 'fade',
          closeEffect  : 'fade',
          openSpeed    : 100,
          closeSpeed   : 100,
          width        : 900,
          height       : 600
     });

});

Upvotes: 0

d3vkit
d3vkit

Reputation: 1982

Neokio is on the right track, but I think this is a little less destructive of the original code by just adding a new class style to the stylesheet and then referencing that.

// Put at bottom of jquery.fancybox.css, change as needed
.fancybox-title-top-wrap {
  position: absolute;
  top: -30px;
  left: 0;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  padding: 2px 20px;
  font-size: 16px;
}

Then just use:

helpers: { title: 'top' }

You don't lose any of the original styles, and you can keep adding styles as you need them.

Upvotes: 0

Zuul
Zuul

Reputation: 16269

To place the title on top, by the use of Jquery, you can manipulate the relevant CSS using the Fancybox callbacks, when the contents are loaded load, by using beforeLoad or afterLoad, and when the Fancybox gets updated, with onUpdate.

So, you have some callbacks available to best fit your needs: Link to FancyBox Docs

Lets assume that you are loading your fancybox with the code bellow, and to manipulate the title position, you can call the "onUpdate" and "afterLoad" to trigger that change:

JQUERY EXAMPLE

$(document).ready(function() {
  $("#my_popup_id").fancybox({
    "onUpdate"  : function() {
      $(".fancybox-title").css({'top':'0px', 'bottom':'auto'});
    },
    "afterLoad" : function() {
      $(".fancybox-title").css({'top':'0px', 'bottom':'auto'});
    }
  });
});

Now, the above example places the Fancybox title on top, but if you need it outside, away from the frame, you need to set a negative value to "top", but take into consideration that the frame cannot occupy the entire screen, hence the width and height parameters at this new example:

JQUERY EXAMPLE 2

$(document).ready(function() {
  $("#my_popup_id").fancybox({
    "autoSize"  : false,
    "width"     : '70%',
    "height"    : '70%',
    "onUpdate"  : function() {
      $(".fancybox-title").css({'top':'-30px', 'bottom':'auto'});
    },
    "afterLoad" : function() {
      $(".fancybox-title").css({'top':'-30px', 'bottom':'auto'});
    }
  });
});

Check the provided link for the documentation, specially the tab "callbacks".

EDITED:

And here it is, the Fiddle link!

NEW EDIT NOTES:

neokio pointed out a solution with just a simple tweak to the Fancybox style sheet, so, indeed for a simple title position control, it is the best approach.

The one present on this answer is useful for some more complex CSS manipulations.

EDITED: And a Fiddle with the solution presented by neokio!

Upvotes: 1

designosis
designosis

Reputation: 5263

From default Fancybox 2.0.6 CSS, replace the following:

.fancybox-title {
    position: absolute;
    top: -36px;
    left: 0;
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
    }

.fancybox-title-float-wrap {
    position: absolute;
    z-index: 8030;
    }

This positions the header top left, where it looks best in my opinion. Here's a screengrab:

enter image description here

Upvotes: 2

Chris Mackie
Chris Mackie

Reputation: 386

Add the following fancybox CSS for these elements...

.fancybox-title{position: absolute;top: 0;} 

.fancybox-skin{position: relative;}

That should put the title at the top.

Upvotes: 6

Related Questions