CODEWITHSUNDEEP
jqueryfancybox
iH8WorkingWith.NetGraphics
iH8WorkingWith.NetGraphics

Reputation: 528

fancybox button helper move buttons below image

I want the buttons from the fancybox buttons helper to show below the image instead on top. I tried using position: 'bottom' but the buttons are still on top of the image. I don't know what position is supposed to do.

This is my code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>fancybox attempt 1</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css" />

<script type="text/javascript">
    $(document).ready(function(){
        $(".single_image").fancybox({
            openEffect : 'elastic'
        });

        $(".fancybox_button").fancybox({
            arrows : true,
            loop : false,
            openEffect : 'elastic',
            closeEffect : 'elastic',

            helpers     : {
                title   : { type : 'inside' },
                buttons : {},
                position: 'bottom',
            }
        });
    });
</script>

<style type="text/css">
.fancybox-nav span {
 visibility: visible;
}
</style>

</head>
<body>
    <h1>Single Image</h1>
    <a class="single_image" title="skyscraper" href="http://farm9.staticflickr.com/8254/8856281122_1a0c678825_b.jpg"><img src="http://farm9.staticflickr.com/8254/8856281122_1a0c678825.jpg" width="100px" height="100px"/></a><br />
    <h1>Button Helper</h1>
    <a class="fancybox_button" rel="gallery 1" title="airplanes" href="http://farm9.staticflickr.com/8398/8856153523_b992192905_b.jpg"><img src="http://farm9.staticflickr.com/8398/8856153523_b992192905_z.jpg" alt="" width="100" height="100" /></a>
<a class="fancybox_button" rel="gallery 1" href="http://farm8.staticflickr.com/7395/8855348484_bdb84435bf_b.jpg" title="raspberry"><img src="http://farm8.staticflickr.com/7395/8855348484_bdb84435bf.jpg" alt="" width="100" height="100" /></a>
</body>
</html>

Upvotes: 1

Views: 4088

Answers (1)

Lewis E.
Lewis E.

Reputation: 337

helpers     : {
   title   : { type : 'inside' },
   buttons : {position:'bottom'},
   position: 'bottom',
 }

add the buttons position. and regulate in the css file. locate #fancybox-buttons.bottom to customize 

#fancybox-buttons.bottom {
 bottom: 0;
}

Upvotes: 1

Related Questions