How to let Fancybox Next and Previous button stay visible

Tags: jquery,css,hover,fancybox

Problem :

I am using fancybox to display some images. Currently when users hover the image, the next or previous button will shown. However, some users actually do not realise that and close the fancybox after view the first image.

So, I wish to let the buttons stay visible all the time. However, I got no idea how to do that. I tried to change the fancybox css

#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('blank.gif');
z-index: 1102;
display: block; // Initially it was "none"

But it is not working as well.

Any idea how to do that?

Appreciate any help...Thanks...

Solution :

You'll need to add the css on the page (after the initial css loads)-

For example, add this to the page with your fancybox, or after your fancybox css stylesheet in the head.

<style type="text/css">

#fancybox-left-ico {
left: 20px;

#fancybox-right-ico {
right: 20px;
left: auto;


And that's it.

    CSS Howto..

    How can I generate a random color with Stylus CSS?

    How to make elliptical inner shadow with CSS?

    How to set width correctly in CSS - Need to fix bug with Safari on Mac and on iPad

    how is Zurb's Foundation Menu button coded?

    How to display contents of several div tags in a same line

    How to modify output buffer?

    How to center items inside isotope container?

    How to change an image on mouseover of wrapper div

    How to Validate HTML, CSS and JS in Eclipse IDE

    How to close CSS3 Lightbox by clicking outside of the current image?

    How to make text appear when input box is active

    CSS display table - How to have 2 fixed and one flexible column

    how to auto adjust table td width from the content

    How to add bold text with CSS? [duplicate]

    Panel in Horizontal List item showing behind Button

    In CSS how do I affect links of only 1 class

    How to have css hover effect affect child elements differently?

    Show/Hide H4's isn't working

    How to store a global variable in JQuery?

    How to apply css class to an html element using jquery in ASP .NET MVC?

    How to style span radio buttons with CSS without images

    In firebug, how do I find out all of the css styles being applied to a particular element?

    Showing different in Internet Explorer and Google Chrome

    How to deploy a jekyll site locally with css, js and background images included?

    How to handle right-to-left text-input fields the right way?

    How to make centered fixed width body responsive?

    How to apply gradient to element with correctly display in IE9?

    JQuery JQGrid - how to CSS right/left align without touching the grid lines?

    How to hide text behind image

    How to set css via jquery for preventing some action