241 lines
3.5 KiB
CSS
241 lines
3.5 KiB
CSS
#myGallery
|
|
{
|
|
margin-top: 0px;
|
|
width: 944px;
|
|
height: 410px;
|
|
z-index:5;
|
|
display: inline;
|
|
border: 8px solid #303036;
|
|
}
|
|
|
|
.jdGallery
|
|
{
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.jdGallery img
|
|
{
|
|
border: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.jdGallery .slideElement
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #000;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.jdGallery .loadingElement
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: #000;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-image: url('img/loading-bar-black.gif');
|
|
}
|
|
|
|
.jdGallery .slideInfoZone
|
|
{
|
|
position: absolute;
|
|
z-index: 10;
|
|
width: 100%;
|
|
margin: 0px;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 40px;
|
|
background: #333;
|
|
color: #fff;
|
|
text-indent: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
* html .jdGallery .slideInfoZone
|
|
{
|
|
bottom: -1px;
|
|
}
|
|
|
|
.jdGallery .slideInfoZone h2
|
|
{
|
|
border: 0;
|
|
padding: 0;
|
|
font-size: 90%;
|
|
margin: 0;
|
|
margin: 2px 5px;
|
|
font-weight: bold;
|
|
color: #FFF;
|
|
}
|
|
|
|
.jdGallery .slideInfoZone p
|
|
{
|
|
padding: 0;
|
|
font-size: 80%;
|
|
margin: 2px 5px;
|
|
color: #eee;
|
|
}
|
|
|
|
.jdGallery div.carouselContainer
|
|
{
|
|
position: absolute;
|
|
height: 135px;
|
|
width: 100%;
|
|
z-index: 10;
|
|
margin: 0px;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.jdGallery a.carouselBtn
|
|
{
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 30px;
|
|
height: 20px;
|
|
/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
|
|
text-align: center;
|
|
padding: 0 10px;
|
|
font-size: 13px;
|
|
background: #333;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.jdGallery .carousel
|
|
{
|
|
position: absolute;
|
|
width: 100%;
|
|
margin: 0px;
|
|
left: 0;
|
|
top: 0;
|
|
height: 115px;
|
|
background: #333;
|
|
color: #fff;
|
|
text-indent: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.jdGallery .carousel .carouselWrapper
|
|
{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 78px;
|
|
top: 10px;
|
|
left: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.jdGallery .carousel .carouselInner
|
|
{
|
|
position: relative;
|
|
}
|
|
|
|
.jdGallery .carousel .carouselInner .thumbnail
|
|
{
|
|
cursor: pointer;
|
|
background: #000;
|
|
background-position: center center;
|
|
float: left;
|
|
border: solid 1px #fff;
|
|
}
|
|
|
|
.jdGallery .carousel .label
|
|
{
|
|
font-size: 13px;
|
|
position: absolute;
|
|
bottom: 5px;
|
|
left: 10px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.jdGallery .carousel .label .number
|
|
{
|
|
color: #b5b5b5;
|
|
}
|
|
|
|
.jdGallery a
|
|
{
|
|
font-size: 100%;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.jdGallery a.right, .jdGallery a.left
|
|
{
|
|
position: absolute;
|
|
height: 99%;
|
|
width: 25%;
|
|
cursor: pointer;
|
|
z-index:10;
|
|
filter:alpha(opacity=20);
|
|
-moz-opacity:0.2;
|
|
-khtml-opacity: 0.2;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
* html .jdGallery a.right, * html .jdGallery a.left
|
|
{
|
|
filter:alpha(opacity=50);
|
|
}
|
|
|
|
.jdGallery a.right:hover, .jdGallery a.left:hover
|
|
{
|
|
filter:alpha(opacity=80);
|
|
-moz-opacity:0.8;
|
|
-khtml-opacity: 0.8;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.jdGallery a.left
|
|
{
|
|
left: 0;
|
|
top: 0;
|
|
background: url('img/fleche1.png') no-repeat center left;
|
|
}
|
|
|
|
* html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }
|
|
|
|
.jdGallery a.right
|
|
{
|
|
right: 0;
|
|
top: 0;
|
|
background: url('img/fleche2.png') no-repeat center right;
|
|
}
|
|
|
|
* html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }
|
|
|
|
.jdGallery a.open
|
|
{
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.withArrows a.open
|
|
{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 25%;
|
|
height: 99%;
|
|
width: 50%;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
background: none;
|
|
-moz-opacity:0.8;
|
|
-khtml-opacity: 0.8;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.withArrows a.open:hover { background: url('img/open.png') no-repeat center center; }
|
|
|
|
* html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center;
|
|
filter:alpha(opacity=80); }
|
|
|