189 lines
4.2 KiB
CSS
189 lines
4.2 KiB
CSS
/*
|
|
|
|
GalleryView Stylesheet
|
|
|
|
Use the CSS rules below to modify the look of your gallery.
|
|
|
|
To create additional rules, use the markup below as a guide to GalleryView's architecture.
|
|
*/
|
|
|
|
/* GALLERY LIST */
|
|
/* IMPORTANT - Change '#myGallery' to the ID of your gallery list to prevent a flash of unstyled content */
|
|
#myGallery { display: none; }
|
|
|
|
.gv_galleryWrap { position: relative; background: #222; font-size: 10pt; }
|
|
|
|
/* GALLERY DIV */
|
|
.gv_gallery { overflow: hidden; position: relative;}
|
|
|
|
.gv_imageStore { visibility: hidden; position: absolute; top: -10000px; left: -10000px; }
|
|
|
|
|
|
/*************************************************/
|
|
/** PANEL STYLES **/
|
|
/*************************************************/
|
|
|
|
.gv_panelWrap { filter: inherit; position: absolute; overflow: hidden; }
|
|
|
|
.gv_panel-loading { background: url(img-loader.gif) 50% 50% no-repeat #aaa; }
|
|
.gv_frame-loading { background: url(img-loader.gif) 50% 50% no-repeat #aaa; }
|
|
|
|
/* GALLERY PANELS */
|
|
.gv_panel { filter: inherit; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 100; }
|
|
.gv_panel img { position: absolute; }
|
|
|
|
.gv_overlay { position: absolute; background: #222; color: white; z-index: 200; }
|
|
.gv_showOverlay {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url(themes/light/info.png) #222;
|
|
cursor: pointer;
|
|
z-index: 200;
|
|
}
|
|
.gv_overlay h4 { color: white; margin: 1em; font-weight: bold; }
|
|
.gv_overlay p { color: white; margin: 1em; }
|
|
|
|
.gv_infobar {
|
|
background: #222;
|
|
padding: 0 0.5em;
|
|
line-height: 1.5em;
|
|
height: 1.5em;
|
|
font-size: 10pt;
|
|
font-weight: bold;
|
|
color: white;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
display: none;
|
|
vertical-align: middle;
|
|
z-index: 2000;
|
|
|
|
}
|
|
|
|
|
|
/*************************************************/
|
|
/** FILMSTRIP STYLES **/
|
|
/*************************************************/
|
|
|
|
.gv_filmstripWrap { overflow: hidden; position: absolute; }
|
|
|
|
|
|
/* FILMSTRIP */
|
|
.gv_filmstrip { margin: 0; padding: 0; position: absolute; top: 0; left: 0; }
|
|
|
|
/* FILMSTRIP FRAMES (contains both images and captions) */
|
|
.gv_frame {
|
|
cursor: pointer;
|
|
float: left;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* WRAPPER FOR FILMSTRIP IMAGES */
|
|
.gv_frame .gv_thumbnail { position: relative;overflow: hidden !important; }
|
|
|
|
/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
|
|
.gv_frame.current .gv_thumbnail {}
|
|
|
|
/* FRAME IMAGES */
|
|
.gv_frame img { border: none; position: absolute; }
|
|
|
|
/* FRAME CAPTION */
|
|
.gv_frame .gv_caption { height: 14px; line-height: 14px; font-size: 10px; text-align: center; color:white; }
|
|
|
|
/* CURRENT FRAME CAPTION */
|
|
.gv_frame.current .gv_caption { }
|
|
|
|
/* POINTER FOR CURRENT FRAME */
|
|
.gv_pointer {
|
|
border-color: black;
|
|
}
|
|
|
|
/* NAVIGATION BUTTONS */
|
|
.gv_navWrap {
|
|
text-align: center;
|
|
position: absolute;
|
|
}
|
|
.gv_navPlay,
|
|
.gv_navPause,
|
|
.gv_navNext,
|
|
.gv_navPrev {
|
|
|
|
opacity: 0.3;
|
|
-moz-opacity: 0.3;
|
|
-khtml-opacity: 0.3;
|
|
filter:alpha(opacity=30);
|
|
display:-moz-inline-stack;
|
|
display:inline-block;
|
|
zoom:1;
|
|
*display:inline;
|
|
vertical-align: middle;
|
|
}
|
|
.gv_navPlay:hover,
|
|
.gv_navPause:hover,
|
|
.gv_navNext:hover,
|
|
.gv_navPrev:hover {
|
|
opacity: 0.8;
|
|
-moz-opacity: 0.8;
|
|
-khtml-opacity: 0.8;
|
|
filter:alpha(opacity=80);
|
|
}
|
|
|
|
.gv_panelNavPrev,
|
|
.gv_panelNavNext {
|
|
position: absolute;
|
|
display: none;
|
|
opacity: 0.50;
|
|
-moz-opacity: 0.50;
|
|
-khtml-opacity: 0.50;
|
|
filter:alpha(opacity=50);
|
|
z-index: 200;
|
|
}
|
|
|
|
.gv_panelNavPrev:hover,
|
|
.gv_panelNavNext:hover {
|
|
opacity: 0.9;
|
|
-moz-opacity: 0.9;
|
|
-khtml-opacity: 0.9;
|
|
filter:alpha(opacity=90);
|
|
}
|
|
|
|
.gv_navPlay {
|
|
height: 30px;
|
|
width: 30px;
|
|
cursor: pointer;
|
|
background: url(themes/light/play-big.png) top left no-repeat;
|
|
}
|
|
.gv_navPause {
|
|
height: 30px;
|
|
width: 30px;
|
|
cursor: pointer;
|
|
background: url(themes/light/pause-big.png) top left no-repeat;
|
|
}
|
|
.gv_navNext {
|
|
height: 20px;
|
|
width: 20px;
|
|
cursor: pointer;
|
|
background: url(themes/light/next.png) top left no-repeat;
|
|
}
|
|
.gv_navPrev {
|
|
height: 20px;
|
|
width: 20px;
|
|
cursor: pointer;
|
|
background: url(themes/light/prev.png) top right no-repeat;
|
|
}
|
|
.gv_panelNavNext {
|
|
height: 20px;
|
|
width: 20px;
|
|
cursor: pointer;
|
|
background: url(themes/light/panel-next.png) top left no-repeat;
|
|
}
|
|
.gv_panelNavPrev {
|
|
height: 20px;
|
|
width: 20px;
|
|
cursor: pointer;
|
|
background: url(themes/light/panel-prev.png) top right no-repeat;
|
|
} |