外部自定义prev prev按钮fancybox

时间:2016-10-15 21:48:05

标签: javascript jquery html fancybox fancybox-2

在我的例子中,当我点击缩略图时,我打开了一个fancybox画廊,看看我需要点击照片的上一张和下一张照片。我怎样才能与我的" prev和next"在左边链接?

此时我点击它们什么都没发生?

这是我的链接

http://www.booclin.ovh/tom/254/



$("img").error(function() { $(this).parent().remove(); });
$("a.fancyboxgallery").fancybox();
     
$("#launcherbook2").on("click", function(){
$("a.fancyboxgallery").eq(0).trigger("click");
});
    
$(".fancybox-lock").bind("mousewheel", function() { return false; });

$( function( ){ 
$( "#closegallery" ).on( "click", function(){
$.fancybox.close(); return false; });
});
    

*, *:after, *:before { padding: 0; margin: 0; -webkit-touch-callout: none;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; outline:0; box-sizing: border-box }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

html, body { height: 100%; padding: 0; margin: 0; background-color: #fff;}

body, p, span, a, .links, .linkscredit { margin: 0 auto; font-size: 11px; line-height: 20px;  text-decoration:none; font-family: "open_sansregular", sans-serif; letter-spacing: 1px; text-align:left; color: #282828; background-color: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index:9999; }

.spanbold { font-family: "open_sansbold"; }

.boldlinks, .menustyle2 { font-family: "open_sansbold"; cursor:pointer;}

a:hover { color: #d2c6af; }

img, object, embed { border: 0px; }








/* Second page */
.rightpart  { position: fixed; left:0px; width: 100%; height: 100%; padding-left:200px; z-index: 0;  overflow: auto;}

.leftpart { text-align:left; position: absolute; left:0; top:0;  height:100%; padding: 80px 40px 10px 40px; overflow: hidden; z-index: 8021; }

.partmenu { z-index: 8021; }  

.bottominfo { padding-left:0px; position:absolute; bottom:10px; 
right:20px; z-index: 0;  }


.secondleftpart { position:absolute; top:30px; left:10px; }  

/* Second page */




@media only screen and (max-height: 500px) {

.bottominfo { display: none; }
    
.leftpart { height:auto; } 
}







#page-tablegalerie { overflow:hidden; height: 100%; width: 100%; border-collapse: collapse; text-align: left; }

#page-tdgalerie { height: 100%; padding-left:0px; vertical-align: middle; }

div#globalgalerie { max-width: 100%; text-align: left; }







.fancyboxgallery, .socialopacity {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
z-index:1; 
transition: opacity .1s ease-in-out;
-moz-transition: opacity .1s ease-in-out;
-webkit-transition: opacity .1s ease-in-out; 
font-size: 0px;
}

.fancyboxgallery:hover, .socialopacity:hover {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
z-index:1; 
}


.fancyboxthumbnailsgallery { margin: 12px 5px -10px 5px; }


div#juicebox-container{ height:900px; width:100%; overflow: hidden; }

.imglist { overflow: hidden; }

.imglist a { float: left; margin: 0px; }

.imglist a img {
vertical-align:bottom;
padding: 0px;
border: 0px solid #ccc;
max-width: 200px;
max-height: 133px;
float: left;
}





#page_holder {height: 100%;width: 100%;}








/* Slide */

#fancybox-loading,
#fancybox-lock,
.fancybox-wrap,
.fancybox-skin,
.fancybox-inner,
.fancybox-error,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-wrap embed,
a.fancybox-close,
a.fancybox-expand,
a.fancybox-nav,
a.fancybox-nav span,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: none;
    text-shadow: none;
}

#fancybox-lock { 
    background:#fff;       
    position: fixed;
    top: 0;
    left: 0px;
    right: 0;
    bottom: 0;
    z-index: 8020;
    overflow: hidden!important;
    -webkit-transition : -webkit-transform 0.5s;
    -webkit-transform  : translateX(0px);
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
    -webkit-transform: translate3d(0,0,0);
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-skin {
	border:0px;
    background: #fff;
}

.fancybox-inner {
    position: relative;
    overflow: hidden!important;
    -webkit-overflow-scrolling: touch;
    width: auto!important;
    height: auto!important;
    padding: 0px 30px -10px 0px !important;
}

.fancybox-spacer {
    position: absolute;
    top: 100%;
    left: 0;
    width: 1px;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
    zoom: 1;
}

a.fancybox-close {     
    position: fixed !important;
    top: 80px;
    left: 40px;
    z-index: 99999 !important;
    cursor: pointer;
    background-position: 0 0; 
}

a.fancybox-close:hover {  color:#d2c6af; text-shadow: 0px 0px 0px #282828;}


a.fancybox-nav {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 8040;
    overflow: hidden;
}

.fancybox-type-iframe a.fancybox-nav,
.fancybox-type-inline a.fancybox-nav,
.fancybox-type-html a.fancybox-nav
 {
    width: 70px;
}

a.fancybox-prev {
    left: 0px;
}

a.fancybox-next {
    right: 0px;
}

a.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    cursor: pointer;
    z-index: 8040;
}

a.fancybox-prev span {
    left: 0;
    background-position: 0 -50px;
}

a.fancybox-next span {
    right: 0;
    background-position: 0 -100px;
}

.fancybox-mobile  a.fancybox-nav {
    max-width: 80px;
}

.fancybox-desktop  a.fancybox-nav {
    opacity: 1; filter: alpha(opacity=100);
}

.fancybox-desktop a.fancybox-nav:hover {
    opacity: 1; filter: alpha(opacity=100);
}

a.fancybox-expand {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 46px;
    height: 46px;
    z-index: 8050;
    opacity: 0;  filter: alpha(opacity=0);
    background-position: 0 -150px;
    zoom: 1;
    -webkit-transition: opacity .1s ease;
       -moz-transition: opacity .1s ease;
         -o-transition: opacity .1s ease;
            transition: opacity .1s ease;
}

.fancybox-wrap:hover a.fancybox-expand {
    opacity: 1;  filter: alpha(opacity=100);
}

.fancybox-wrap a.fancybox-expand:hover {
    opacity: 1;  filter: alpha(opacity=100);
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -85px;
    margin-left: -35px;
    width: 169px;
    height: 71px;
    padding:427px 348px;
    background-color: #fff;
    background-image: url(../images/loaderwhitescreen.gif);
    background-position: center center;
    opacity: 1; filter: alpha(opacity=100);
    cursor: pointer;
    z-index: 8060;
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;
}

.fancybox-tmp {
    position: absolute !important;
    top: -99999px;
    left: -99999px;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

.fancybox-title {
	text-align:left;
    line-height: 15px;
    position: relative;
    text-shadow: none;
    z-index: 8050;
    display: block;
    visibility: hidden;
}

.fancybox-title-float-wrap {
    position: relative;
    margin-top: 10px;
    text-align: left;
    zoom: 1;
    left: -9999px;
}

.fancybox-title-float-wrap > div {
    display: inline-block;
    padding: 7px 20px;
    font-weight: bold;
    text-shadow: 0 1px 2px #222;
    background: transparent; background: rgba(255, 255, 255, 1);
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    text-shadow: 0 1px rgba(255, 255, 255, 1);
}

.fancybox-title-inside-wrap {
    padding-top: 10px;
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff; background: rgba(255, 255, 255, 1);
    max-height: 50%;
    overflow: auto;
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 8010;
}

.fancybox-overlay-fixed {
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Default theme */
.fancybox-default-skin {
    border-color: #fff;
    background: #fff;
}

.fancybox-default-skin-open {
    box-shadow: 0 10px 25px rgba(255, 255, 255, 1);
}

.fancybox-default-overlay {
    background: #fff;
    opacity: 1; filter: alpha(opacity=100);
}


}






.fancybox-dark-skin {
    background: #fff;
    border-color: #fff;
    border-radius: 0px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 1) inset !important;
}

.fancybox-dark-overlay {
    background: #fff;
    opacity: 1; filter: alpha(opacity=100);
}


.fancybox-light-skin-open {
    box-shadow: 0 10px 25px rgba(255, 255, 255, 1);
}

.fancybox-light-overlay {
    opacity: 1; filter: alpha(opacity=100);
    background: #fff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #999999 0%, #555555 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#999999), color-stop(100%,#555555)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #999999 0%,#555555 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #999999 0%,#555555 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #999999 0%,#555555 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  #999999 0%,#555555 100%); /* W3C */
}

 


  
  
<script src="http://www.booclin.ovh/tom/2/index/js/modernizr.custom.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/254/index/normal/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/254/index/normal/fancybox.js"></script>

  
<div class="leftpart">


  
<div  class="secondleftpart">    
    
<a title="Prev" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:;">PREV</a>
    
<a style="font-size: 7px;" href="javascript:;"> | </a>
    
<a title="Next" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:;">NEXT</a>

<br/> 
    
<a style="font-size: 7px;" title="Thumbnails" id="closegallery" class="showthumbnails" href="javascript:;">
THUMBNAILS
</a>
    
</div>
</div>  

    





    
    

    
    
    

<div class="rightpart"><div id="globalgalerie">
    
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/3.jpg" class="highlightit" title="">
<img style="margin:12px 5px 5px 5px;" alt="" src="http://www.booclin.ovh/tom/254/index/projets/03.jpg"/>
</a>
    
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/2.jpg" class="highlightit" title="">
<img alt="" style="margin:12px 5px 5px 5px;"  src="http://www.booclin.ovh/tom/254/index/projets/02.jpg" />
</a>
    
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/1.jpg" class="highlightit" title="">
<img alt="" style="margin:12px 5px 5px 5px;"  src="http://www.booclin.ovh/tom/254/index/projets/01.jpg"/>
</a>

</div></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

目前,您的“PREV”和“NEXT”链接没有做任何事情(由于您设置了对href="javascript:;"的引用)。您需要将其更改为:

<a title="Prev" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
    
<a title="Next" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>