0
私の例では、サムネイルをクリックすると、ファンシーボックスギャラリーが開き、前の写真と次の写真が表示されます。写真をクリックする必要があります。どのように私は左の "前と次の"リンクで同じ効果を得ることができますか？外部カスタム前の次のボタンfancybox
ここをクリックすると、何も起こりませんでしたか？ HERE
はMY LINKは
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 {
\t 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 {
\t 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>
と私はそれを見ていない@Eric – coolio83000
私は理解していないものがある、なぜ私は私のサムネイルについての警告を持っていて、私の大きなイメージについてではなく、自分のリンクのサムネイルについて1つの警告を見ることができます - > http://www.booclin.ovh/tom/254/ – coolio83000
Hey @ coolio83000。あまりにも遅くあなたに戻って申し訳ありません。投稿したリンクが機能していないようです。あなたはまだ問題を抱えているのですか、それともソートしましたか？ –