/*/* * Title: jQuery Etalage plugin CSS * Author: Berend de Jong, Frique * Author URI: http://www.frique.me/ * Version: 1.3.1 (20120705.1) * * ------------------------------------ STYLE ------------------------------------ * Edit this section to style your thumbnails, zoom area, magnifier etc. * If the id of your Etalage instance is different, do a find/replace on #etalage. * ------------------------------------------------------------------------------- */ /* Etalage container (large thumb + small thumbs): */ #etalage, #etalage1, #etalage2, #etalage3, #etalage4, #etalage5, #etalage6, #etalage7, #etalage8, #etalage9, #etalage10, #etalage11, #etalage12, #etalage13, #etalage14, #etalage15, #etalage16, #etalage17, #etalage18, #etalage19, #etalage20, #etalage21, #etalage22, #etalage23, #etalage24, #etalage25, #etalage26, #etalage27, #etalage28, #etalage29, #etalage30, #etalage31, #etalage32, #etalage33, #etalage34, #etalage35{ display: none; margin-bottom: 50px; margin-left: 10px; } /* Large thumbnail: */ #etalage .etalage_thumb, #etalage1 .etalage_thumb, #etalage2 .etalage_thumb, #etalage3 .etalage_thumb, #etalage4 .etalage_thumb, #etalage5 .etalage_thumb, #etalage6 .etalage_thumb, #etalage7 .etalage_thumb, #etalage8 .etalage_thumb, #etalage9 .etalage_thumb, #etalage10 .etalage_thumb, #etalage11 .etalage_thumb, #etalage12 .etalage_thumb, #etalage13 .etalage_thumb, #etalage14 .etalage_thumb, #etalage15 .etalage_thumb, #etalage16 .etalage_thumb, #etalage17 .etalage_thumb, #etalage18 .etalage_thumb, #etalage19 .etalage_thumb, #etalage20 .etalage_thumb, #etalage21 .etalage_thumb, #etalage22 .etalage_thumb, #etalage23 .etalage_thumb, #etalage24 .etalage_thumb, #etalage25 .etalage_thumb, #etalage26 .etalage_thumb, #etalage27 .etalage_thumb, #etalage28 .etalage_thumb, #etalage29 .etalage_thumb, #etalage30 .etalage_thumb, #etalage31 .etalage_thumb, #etalage32 .etalage_thumb, #etalage33 .etalage_thumb{ background: white url(../images/loading.gif) center no-repeat; border: 1px solid #ffffff; padding: 6px; -webkit-box-shadow: 0 0 8px #eaeaea; -moz-box-shadow: 0 0 8px #eaeaea; box-shadow: 0 0 8px #eaeaea; } /* Large thumbnail - image (in case you want to add a border around the image within the frame) */ #etalage .etalage_thumb_image{ } /* Small thumbnails: */ #etalage .etalage_small_thumbs li, #etalage1 .etalage_small_thumbs li, #etalage2 .etalage_small_thumbs li, #etalage3 .etalage_small_thumbs li, #etalage4 .etalage_small_thumbs li, #etalage5 .etalage_small_thumbs li, #etalage6 .etalage_small_thumbs li, #etalage7 .etalage_small_thumbs li, #etalage8 .etalage_small_thumbs li, #etalage9 .etalage_small_thumbs li, #etalage10 .etalage_small_thumbs li, #etalage11 .etalage_small_thumbs li, #etalage12 .etalage_small_thumbs li, #etalage13 .etalage_small_thumbs li, #etalage14 .etalage_small_thumbs li, #etalage15 .etalage_small_thumbs li, #etalage16 .etalage_small_thumbs li, #etalage17 .etalage_small_thumbs li, #etalage18 .etalage_small_thumbs li, #etalage19 .etalage_small_thumbs li, #etalage20 .etalage_small_thumbs li, #etalage21 .etalage_small_thumbs li, #etalage22 .etalage_small_thumbs li, #etalage23 .etalage_small_thumbs li, #etalage24 .etalage_small_thumbs li, #etalage25 .etalage_small_thumbs li, #etalage26 .etalage_small_thumbs li, #etalage27 .etalage_small_thumbs li, #etalage28 .etalage_small_thumbs li, #etalage29 .etalage_small_thumbs li, #etalage30 .etalage_small_thumbs li, #etalage31 .etalage_small_thumbs li, #etalage32 .etalage_small_thumbs li, #etalage33 .etalage_small_thumbs li, #etalage34 .etalage_small_thumbs li, #etalage35 .etalage_small_thumbs li{ background: white; border: 1px solid #ffffff; margin: 12px; padding: 2px; } /* The one on the left that makes them slide */ #etalage ul li.etalage_smallthumb_first, #etalage1 ul li.etalage_smallthumb_first, #etalage2 ul li.etalage_smallthumb_first, #etalage3 ul li.etalage_smallthumb_first, #etalage4 ul li.etalage_smallthumb_first, #etalage5 ul li.etalage_smallthumb_first, #etalage6 ul li.etalage_smallthumb_first, #etalage7 ul li.etalage_smallthumb_first, #etalage8 ul li.etalage_smallthumb_first, #etalage9 ul li.etalage_smallthumb_first, #etalage10 ul li.etalage_smallthumb_first, #etalage11 ul li.etalage_smallthumb_first, #etalage12 ul li.etalage_smallthumb_first, #etalage13 ul li.etalage_smallthumb_first, #etalage14 ul li.etalage_smallthumb_first, #etalage15 ul li.etalage_smallthumb_first, #etalage16 ul li.etalage_smallthumb_first, #etalage17 ul li.etalage_smallthumb_first, #etalage18 ul li.etalage_smallthumb_first, #etalage19 ul li.etalage_smallthumb_first, #etalage20 ul li.etalage_smallthumb_first, #etalage21 ul li.etalage_smallthumb_first, #etalage22 ul li.etalage_smallthumb_first, #etalage23 ul li.etalage_smallthumb_first, #etalage24 ul li.etalage_smallthumb_first, #etalage25 ul li.etalage_smallthumb_first, #etalage26 ul li.etalage_smallthumb_first, #etalage27 ul li.etalage_smallthumb_first, #etalage28 ul li.etalage_smallthumb_first, #etalage29 ul li.etalage_smallthumb_first, #etalage30 ul li.etalage_smallthumb_first, #etalage31 ul li.etalage_smallthumb_first, #etalage32 ul li.etalage_smallthumb_first, #etalage33 ul li.etalage_smallthumb_first, #etalage34 ul li.etalage_smallthumb_first, #etalage35 ul li.etalage_smallthumb_first, #etalage36 ul li.etalage_smallthumb_first{ } /* The one on the right that makes them slide */ #etalage ul li.etalage_smallthumb_last{ } /* The currently active one */ #etalage ul li.etalage_smallthumb_active, #etalage1 ul li.etalage_smallthumb_active, #etalage2 ul li.etalage_smallthumb_active, #etalage3 ul li.etalage_smallthumb_active, #etalage4 ul li.etalage_smallthumb_active, #etalage5 ul li.etalage_smallthumb_active, #etalage6 ul li.etalage_smallthumb_active, #etalage7 ul li.etalage_smallthumb_active, #etalage8 ul li.etalage_smallthumb_active, #etalage9 ul li.etalage_smallthumb_active, #etalage10 ul li.etalage_smallthumb_active, #etalage11 ul li.etalage_smallthumb_active, #etalage12 ul li.etalage_smallthumb_active, #etalage13 ul li.etalage_smallthumb_active, #etalage14 ul li.etalage_smallthumb_active, #etalage15 ul li.etalage_smallthumb_active, #etalage16 ul li.etalage_smallthumb_active, #etalage17 ul li.etalage_smallthumb_active, #etalage18 ul li.etalage_smallthumb_active, #etalage19 ul li.etalage_smallthumb_active, #etalage20 ul li.etalage_smallthumb_active, #etalage21 ul li.etalage_smallthumb_active, #etalage22 ul li.etalage_smallthumb_active, #etalage23 ul li.etalage_smallthumb_active, #etalage24 ul li.etalage_smallthumb_active, #etalage25 ul li.etalage_smallthumb_active, #etalage26 ul li.etalage_smallthumb_active, #etalage27 ul li.etalage_smallthumb_active, #etalage28 ul li.etalage_smallthumb_active, #etalage29 ul li.etalage_smallthumb_active, #etalage30 ul li.etalage_smallthumb_active, #etalage31 ul li.etalage_smallthumb_active, #etalage32 ul li.etalage_smallthumb_active, #etalage33 ul li.etalage_smallthumb_active, #etalage34 ul li.etalage_smallthumb_active{ -webkit-box-shadow: 0 0 8px #ddd; -moz-box-shadow: 0 0 8px #ddd; box-shadow: 0 0 8px #ddd; } /* Zoomed image area: */ #etalage .etalage_zoom_area, #etalage1 .etalage_zoom_area, #etalage2 .etalage_zoom_area, #etalage3 .etalage_zoom_area, #etalage4 .etalage_zoom_area, #etalage5 .etalage_zoom_area, #etalage6 .etalage_zoom_area, #etalage7 .etalage_zoom_area, #etalage8 .etalage_zoom_area, #etalage9 .etalage_zoom_area, #etalage10 .etalage_zoom_area, #etalage11 .etalage_zoom_area, #etalage12 .etalage_zoom_area, #etalage13 .etalage_zoom_area, #etalage14 .etalage_zoom_area, #etalage15 .etalage_zoom_area, #etalage16 .etalage_zoom_area, #etalage17 .etalage_zoom_area, #etalage18 .etalage_zoom_area, #etalage19 .etalage_zoom_area, #etalage20 .etalage_zoom_area, #etalage21 .etalage_zoom_area, #etalage22 .etalage_zoom_area, #etalage23 .etalage_zoom_area, #etalage24 .etalage_zoom_area, #etalage25 .etalage_zoom_area, #etalage26 .etalage_zoom_area, #etalage27 .etalage_zoom_area, #etalage28 .etalage_zoom_area, #etalage29 .etalage_zoom_area, #etalage30 .etalage_zoom_area, #etalage31 .etalage_zoom_area, #etalage32 .etalage_zoom_area, #etalage33 .etalage_zoom_area, #etalage34 .etalage_zoom_area{ background: white url(../images/loading.gif) center no-repeat; border: 1px solid #eaeaea; padding: 6px; -webkit-box-shadow: 0 0 8px #eaeaea; -moz-box-shadow: 0 0 8px #eaeaea; box-shadow: 0 0 8px #eaeaea; } /* Magnifier area (thumbnail hovering rectangle): */ #etalage .etalage_magnifier, #etalage1 .etalage_magnifier, #etalage2 .etalage_magnifier, #etalage3 .etalage_magnifier, #etalage4 .etalage_magnifier, #etalage5 .etalage_magnifier, #etalage6 .etalage_magnifier, #etalage7 .etalage_magnifier, #etalage8 .etalage_magnifier, #etalage9 .etalage_magnifier, #etalage10 .etalage_magnifier, #etalage11 .etalage_magnifier, #etalage12 .etalage_magnifier, #etalage13 .etalage_magnifier, #etalage14 .etalage_magnifier, #etalage15 .etalage_magnifier, #etalage16 .etalage_magnifier, #etalage17 .etalage_magnifier, #etalage18 .etalage_magnifier, #etalage19 .etalage_magnifier, #etalage20 .etalage_magnifier, #etalage21 .etalage_magnifier, #etalage22 .etalage_magnifier, #etalage23 .etalage_magnifier, #etalage24 .etalage_magnifier, #etalage25 .etalage_magnifier, #etalage26 .etalage_magnifier, #etalage27 .etalage_magnifier, #etalage28 .etalage_magnifier, #etalage29 .etalage_magnifier, #etalage30 .etalage_magnifier, #etalage31 .etalage_magnifier, #etalage32 .etalage_magnifier, #etalage33 .etalage_magnifier, #etalage34 .etalage_magnifier, #etalage35 .etalage_magnifier{ background: white; border: 1px solid #bbb; } /* Icon that will apear at the left bottom of the large thumbnail (optional): */ #etalage .etalage_icon, #etalage1 .etalage_icon, #etalage2 .etalage_icon, #etalage3 .etalage_icon, #etalage4 .etalage_icon, #etalage5 .etalage_icon, #etalage6 .etalage_icon, #etalage7 .etalage_icon, #etalage8 .etalage_icon, #etalage9 .etalage_icon, #etalage10 .etalage_icon, #etalage11 .etalage_icon, #etalage12 .etalage_icon, #etalage13 .etalage_icon, #etalage14 .etalage_icon, #etalage15 .etalage_icon, #etalage16 .etalage_icon, #etalage17 .etalage_icon, #etalage18 .etalage_icon, #etalage19 .etalage_icon, #etalage20 .etalage_icon, #etalage21 .etalage_icon, #etalage22 .etalage_icon, #etalage23 .etalage_icon, #etalage24 .etalage_icon, #etalage25 .etalage_icon, #etalage26 .etalage_icon, #etalage27 .etalage_icon, #etalage28 .etalage_icon, #etalage29 .etalage_icon, #etalage30 .etalage_icon, #etalage31 .etalage_icon, #etalage32 .etalage_icon, #etalage33 .etalage_icon, #etalage34 .etalage_icon, #etalage35 .etalage_icon{ background: url(../images/zoom.png) no-repeat; width: 14px; height: 14px; } /* Hint that will apear at the top right of the large thumbnail (optional): */ #etalage .etalage_hint{ } /* Description area (optional) */ #etalage .etalage_description, #etalage1 .etalage_description, #etalage2 .etalage_description, #etalage3 .etalage_description, #etalage4 .etalage_description, #etalage5 .etalage_description, #etalage6 .etalage_description, #etalage7 .etalage_description, #etalage8 .etalage_description, #etalage9 .etalage_description, #etalage10 .etalage_description, #etalage11 .etalage_description, #etalage12 .etalage_description, #etalage13 .etalage_description, #etalage14 .etalage_description, #etalage15 .etalage_description, #etalage16 .etalage_description, #etalage17 .etalage_description, #etalage18 .etalage_description, #etalage19 .etalage_description, #etalage20 .etalage_description, #etalage21 .etalage_description, #etalage22 .etalage_description, #etalage23 .etalage_description, #etalage24 .etalage_description, #etalage25 .etalage_description, #etalage26 .etalage_description, #etalage27 .etalage_description, #etalage28 .etalage_description, #etalage29 .etalage_description, #etalage30 .etalage_description, #etalage31 .etalage_description, #etalage32 .etalage_description, #etalage33 .etalage_description, #etalage34 .etalage_description, #etalage35 .etalage_description{ background: white; font-style: italic; margin: 10px; padding: 6px 10px; } /* * ------------------------------------ FUNCTIONALITY -------------------------------------- * The following CSS serves to make Etalage function properly. Don't edit or edit carefully. * ----------------------------------------------------------------------------------------- */ .etalage, .etalage_thumb, .etalage_thumb_image, .etalage_source_image, .etalage_zoom_preview, .etalage_icon, .etalage_hint{ display:none } .etalage, .etalage ul, .etalage li, .etalage img, .etalage_hint, .etalage_icon, .etalage_description{ margin:0; padding:0; border:0; list-style:none } .etalage, .etalage_magnifier div, .etalage_magnifier div img, .etalage_small_thumbs ul, ul .etalage_small_thumbs li, .etalage_zoom_area div, .etalage_zoom_img{ position:relative } .etalage img, .etalage li{ -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none; -webkit-user-drag:none; -moz-user-drag:none; user-drag:none } .etalage, .etalage_small_thumbs li{ float:left } .etalage_right{ float:right } .etalage li{ position:absolute } .etalage img{ vertical-align:bottom; max-width:none } .etalage_magnifier{ cursor:default } .etalage_magnifier div, .etalage_small_thumbs{ overflow:hidden } .etalage_magnifier div img{ display:none } .etalage_icon, .etalage_hint{ cursor:default; width:0; height:0; overflow:hidden } .etalage_small_thumbs li.vertical{ float:none } .etalage_zoom_area div{ overflow:hidden; z-index:997 } .etalage_zoom_preview{ position:absolute; z-index:998 } .etalage_zoom_img, .etalage_hint{ z-index:999 } .etalage{ direction:ltr } div.etalage_description{ position:absolute; bottom:0; left:0; z-index:999 } div.etalage_description.rtl{ direction:rtl; text-align:right }