1
私は、特定の画像では同じ画像を数回スライドさせるという事実以外にもうまく動作するfancyBoxを持っています。ここにはweb pageがあります。fancyBoxの反復画像
私は他のjQueryスクリプトや独自のスクリプトを使用せず、fancyBoxスクリプトのみを使用します。ここで
は、私が使用していますコードです：
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
\t padding: 0;
\t margin: 0;
\t border: 0;
\t outline: none;
\t vertical-align: top;
}
.fancybox-wrap {
\t position: absolute;
\t top: 0;
\t left: 0;
\t z-index: 8020;
}
.fancybox-skin {
\t position: relative;
\t background: #f9f9f9;
\t color: #444;
\t text-shadow: none;
\t -webkit-border-radius: 4px;
\t -moz-border-radius: 4px;
\t border-radius: 4px;
}
.fancybox-opened {
\t z-index: 8030;
}
.fancybox-opened .fancybox-skin {
\t -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
\t -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
\t box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
\t position: relative;
}
.fancybox-inner {
\t overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
\t -webkit-overflow-scrolling: touch;
}
.fancybox-error {
\t color: #444;
\t font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
\t margin: 0;
\t padding: 15px;
\t white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
\t display: block;
\t width: 100%;
\t height: 100%;
}
.fancybox-image {
\t max-width: 100%;
\t max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
\t background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
\t position: fixed;
\t top: 50%;
\t left: 50%;
\t margin-top: -22px;
\t margin-left: -22px;
\t background-position: 0 -108px;
\t opacity: 0.8;
\t cursor: pointer;
\t z-index: 8060;
}
#fancybox-loading div {
\t width: 44px;
\t height: 44px;
\t background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
\t position: absolute;
\t top: -18px;
\t right: -18px;
\t width: 36px;
\t height: 36px;
\t cursor: pointer;
\t z-index: 8040;
}
.fancybox-nav {
\t position: absolute;
\t top: 0;
\t width: 40%;
\t height: 100%;
\t cursor: pointer;
\t text-decoration: none;
\t background: transparent url('blank.gif'); /* helps IE */
\t -webkit-tap-highlight-color: rgba(0,0,0,0);
\t z-index: 8040;
}
.fancybox-prev {
\t left: 0;
}
.fancybox-next {
\t right: 0;
}
.fancybox-nav span {
\t position: absolute;
\t top: 50%;
\t width: 36px;
\t height: 34px;
\t margin-top: -18px;
\t cursor: pointer;
\t z-index: 8040;
\t visibility: hidden;
}
.fancybox-prev span {
\t left: 10px;
\t background-position: 0 -36px;
}
.fancybox-next span {
\t right: 10px;
\t background-position: 0 -72px;
}
.fancybox-nav:hover span {
\t visibility: visible;
}
.fancybox-tmp {
\t position: absolute;
\t top: -99999px;
\t left: -99999px;
\t visibility: hidden;
\t max-width: 99999px;
\t max-height: 99999px;
\t overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
\t position: absolute;
\t top: 0;
\t left: 0;
\t overflow: hidden;
\t display: none;
\t z-index: 8010;
\t background: url('fancybox_overlay.png');
}
.fancybox-overlay-fixed {
\t position: fixed;
\t bottom: 0;
\t right: 0;
}
.fancybox-lock .fancybox-overlay {
\t overflow: auto;
\t overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
\t visibility: hidden;
\t font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
\t position: relative;
\t text-shadow: none;
\t z-index: 8050;
}
.fancybox-opened .fancybox-title {
\t visibility: visible;
}
.fancybox-title-float-wrap {
\t position: absolute;
\t bottom: 0;
\t right: 50%;
\t margin-bottom: -35px;
\t z-index: 8050;
\t text-align: center;
}
.fancybox-title-float-wrap .child {
\t display: inline-block;
\t margin-right: -100%;
\t padding: 2px 20px;
\t background: transparent; /* Fallback for web browsers that doesn't support RGBa */
\t background: rgba(0, 0, 0, 0.8);
\t -webkit-border-radius: 15px;
\t -moz-border-radius: 15px;
\t border-radius: 15px;
\t text-shadow: 0 1px 2px #222;
\t color: #FFF;
\t font-weight: bold;
\t line-height: 24px;
\t white-space: nowrap;
}
.fancybox-title-outside-wrap {
\t position: relative;
\t margin-top: 10px;
\t color: #fff;
}
.fancybox-title-inside-wrap {
\t padding-top: 10px;
}
.fancybox-title-over-wrap {
\t position: absolute;
\t bottom: 0;
\t left: 0;
\t color: #fff;
\t padding: 10px;
\t background: #000;
\t background: rgba(0, 0, 0, .8);
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
\t only screen and (min--moz-device-pixel-ratio: 1.5),
\t only screen and (min-device-pixel-ratio: 1.5){
\t #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
\t \t background-image: url('[email protected]');
\t \t background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
\t }
\t #fancybox-loading div {
\t \t background-image: url('[email protected]');
\t \t background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
\t }
}#albums-bar-shape {
width: 1141px;
height: 25px;
margin: 0 auto 0px auto;
position: relative;
/*background-color: #e7e7e7;*/
}
#album {
width: 1150px;
height: 850px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
top: 20px;
}
.albums-bar {
position: relative;
float: right;
left: -50%;
}
.albums-bar ul {
list-style: none;
position: relative;
left: 50%;
}
.albums-bar li {
float: left;
margin-right: 50px;
list-style-type: none;
}
.albums-bar a {
color: #8c8c8c;
font-size: 13pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
.albums-bar a:hover {
color: #222222;
padding-bottom: 1px;
border-bottom: 2px solid #222222;
text-decoration: none;
}
#selected-album {
color: #222222;
padding-bottom: 1px;
border-bottom: 2px solid #222222;
}
/*Vertical photos formatting*/
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
/*Horizontal photos formatting*/
div.img-wide {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 370px;
}
div.img-wide:hover {
border: 1px solid #777;
}
div.img-wide img {
width: 100%;
height: auto;
}
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body {
margin: 0px;
padding: 0px;
background-image: url(images/img-noise-361x370.png (1));
background-repeat: repeat;
}
#top {
width: 650px;
height: 120px;
margin: 0 auto 30px auto;
/*background-color: #e7e7e7;*/
}
#menu-bar {
position: relative;
float: right;
left: -50%;
}
#menu-bar ul {
list-style: none;
position: relative;
left: 50%;
margin-top: 10px;
}
#menu-bar li {
float: left;
position: relative;
margin-right: 55px;
}
#menu-bar a {
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
#selected {
color: #000000;
}
#selected > a {
color: #000000;
}
#menu-bar a:hover {
color: #222222;
text-decoration: none;
}
#images {
width: 533px;
height: 800px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
}
#logo {
width: 650px;
height: auto;
margin: 30px auto 30px auto;
display: block;
}
/* Dropdown Button */
.dropbtn {
cursor: pointer;
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
margin-bottom: 5px;
/*background: #dddddd;*/
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: 8c8c8c;
text-decoration: none;
display: block;
font-size: 10pt !important;
margin-bottom: 2px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color: #000000;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
color: #565656;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../../css/custom.css">
<link rel="stylesheet" type="text/css" href="../../css/dropdown.css">
<link rel="stylesheet" type="text/css" href="../../css/crossfade.css">
<link rel="stylesheet" type="text/css" href="../../css/portfolio.css">
<link rel="stylesheet" href="../../src/css/bootstrap.min.css"/>
<title>Car Photos</title>
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="../../source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../../source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<img id="logo" src="http://feanor.cz/images/logo_studio.gif">
<div id="top">
<div id="menu-bar">
<ul>
<li><a href="http://feanor.cz/">Home</a></li>
<li class="dropdown">
<a href="http://feanor.cz/portfolio/fashion-photo">Photo</a>
<div class="dropdown-content">
<a href="http://feanor.cz/portfolio/fashion-photo">Fashion portraits</a>
<a href="http://feanor.cz/portfolio/art-photo">Art portraits</a>
<a href="http://feanor.cz/portfolio/product-photo">Product photography</a>
<a href="http://feanor.cz/portfolio/interior-photo">Interior photography</a>
</div>
</li>
<li><a href="#">Paintings</a></li>
<li><a href="http://feanor.cz/contacts">Contact</a></li>
<li><a href="http://feanor.cz/about">About Us</a></li>
</ul>
</div>
</div>
<div id="albums-bar-shape">
<div class="albums-bar">
<ul>
<li><a href="http://feanor.cz/portfolio/fashion-photo">Fashion portraits</a></li>
<li><a href="http://feanor.cz/portfolio/art-photo">Art portraits</a></li>
<li><a id="selected-album" href="#">Car photography</a></li>
<li><a href="http://feanor.cz/portfolio/product-photo">Product photography</a></li>
<li><a href="http://feanor.cz/portfolio/interior-photo">Interior photography</a></li>
</ul>
</div>
</div>
<div id="album">
<div class="img-wide">
<a class="fancybox" rel="group" href="1.jpg">
<img src="1.jpg" alt="image 1" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="2.jpg">
<img src="2.jpg" alt="image 2" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="6.jpg">
<img src="6.jpg" alt="image 3" width="300" height="200">
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="4.jpg">
<img src="4.jpg" alt="image 4" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="5.jpg">
<img src="5.jpg" alt="image 5" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="3.jpg">
<img src="3.jpg" alt="image 6" width="300" height="200">
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="7.jpg">
<img src="7.jpg" alt="image 7" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="8.jpg">
<img src="8.jpg" alt="image 8" width="300" height="200">
</a>
</div>
</div>
</body>
</html>