Jalbum przezroczystość tła

[aga]

to jest cały index.css

Kod:

body {
    margin: 0;
    padding: 10px 0 30px 0;
    text-align: center;
    font-size: 14px;    
    font-family: georgia,serif;
}

h1,
h2 {    
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: 'helvetica neue',helvetica,sans-serif;
}

h1 {
    font-size: 1.2em;
    margin: 10px 0;
}

h2 {
    font-size: 1.1em;
    margin: 20px 0;    
}

a {
    text-decoration: none;
    outline: none;
}

a img {
    border: none;    
}

ul {
    list-style: none;    
}    

.description {
    margin: 10px auto;
}

.caption {
    display: block;
    margin: 10px auto;
    font-size: 12px;
}

#main {
    position: relative;
}

#main_image .loader {
    margin: 0 auto;
}

#main_image .loader img {
    margin: 0 auto;
    border: none;    
}

#middle_container {
    margin: 0 auto;
    position: relative;
}

#single_image {
    position: relative;    
}

#left_arrow,
#right_arrow,
#left_fast_arrow,
#right_fast_arrow {
    float:left;
    cursor: pointer;
    -ms-interpolation-mode: bicubic;
}

#scroller_container {
    margin: auto;
    position: relative;
}

#image_scroller {
    position: relative;
    margin: auto;
    float:left;
    overflow: hidden;
}

.thumbnails {
    left: 0;
    margin: 0;
    padding: 0;
    top: 0;
    position: absolute;
}

#top_container {
    padding-bottom: 6px;
    border-bottom-style: solid;
    margin: 0 0 10px 0;
}

#bottom_container {
    margin: 0;
    padding: 6px 0;
    border-top-style: solid;
    width: 100%;
    text-align: center;
    display: block;
    font-size: 0.8em;
}

#folders_container {
    border-bottom-style: solid;
    margin-bottom: 20px;
}

.folders {
    margin: 0px auto;
    padding: 0;
}

.folders li {
    float: left;
    display: inline;
}

.folders li a {
    display: block;
    position: relative;        
    overflow: hidden;
}

.folders li a span {
    position: absolute;
    left: 0;
    top: 0;    
    opacity: 0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter:alpha(opacity:70);
    padding: 4px;
    margin: 0;
    background-color: #000;
    font-size: 10px;
    font-family: 'helvetica neue',helvetica,sans-serif;
    font-weight: bold;
    color: #fff;
    text-align: left;
}

.thumbnails li span {
    display:none;    
}

.thumbnails li img,
.folders li a img {
    -ms-interpolation-mode: bicubic;
}

#extras {
    display: none;
    width: 280px;
    font-family: 'helvetica neue',helvetica,sans-serif;
    font-size: 10px;
}

#extras ul {
    margin: 0;
    padding: 0;
}

#extras ul li {
    display: inline;
    padding: 0 5px;
    border-left-width: 1px;
    border-left-style: solid;
    line-height: 16px;
}

#extras ul li.first {
    padding-left: 0px;
    border-left: none;
}

.clear {
    clear: both;
    width: 0px;
    height: 0px;
    line-height: 0px;
    font-size: 0px;    
}

.hide {
    display: none;
}

a to html

Kod:

        <title>Produkty Firmy</title>
                
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="title" content="Produkty Firmy" />
<meta name="keywords" content="Produkty Firmy, Produkty Firmy, jAlbum 9, Galleria" />
<meta name="description" content="Produkty Firmy" />
<meta property="og:title" content="Produkty Firmy" />
<meta property="og:site_name" content="Jalbum" />
<meta property="fb:app_id" content="140299612674733" />
        <link href="res/galleria/galleria.css" rel="stylesheet" type="text/css" />
        <link href="res/index.css" rel="stylesheet" type="text/css" />        
        <link href="res/common.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
    .thumbnails li {
        width: 90px;
        height: 90px;
    }

    #middle_container {
        height: 429px;
    }

    #scroller_container {
        margin-top: 20px;
        margin-bottom: 10px;
        width: 784px;    
    }

    #image_scroller {
        margin: 0 10px 0 20px;
        width: 714px;
    }
    
    #thumbnails_container {
        width: 918px;
    }
    
    #scroller_container,
    #image_scroller,
    #thumbnails_container {
        height: 102px;
    }
    
    #folders_container {
        ;
    }        
    
    .folders {
        width: 0px;
    }
    
    .folders li {
        width: 102px;
        height: 102px;
    }
    
    .caption,
    .description {
        width: 714px;
    }
</style>
        <script src="res/jquery.js" type="text/javascript"></script>
            <script src="res/jquery.hotkeys.js" type="text/javascript"></script>
    <script src="res/galleria/jquery.galleria.js" type="text/javascript"></script>
    <script src="res/jquery.scrollimages.js" type="text/javascript"></script>    
    <script type="text/javascript"><!--//--><![CDATA[//><!--    
        $(function() {
            $("#thumbnails_container").imageScroller({
                onBeforeScroll: function() { $.galleria.stop() },
                onScroll: function() { $.galleria.start() },
                duration: 120,
                imageWidth: 102,
                size: 7,
                fastSteps: 5
            });
            
            var formattedThumbnailOpacity = 67/100;
            
            $(".thumbnails_unstyled").addClass("thumbnails");
            $("ul.thumbnails").galleria({
                history: false,
                clickNext: true,
                insert: "#main_image",
                onImage: function(image, caption, thumb) {
                    var extras = $("#extras").css("display", "none").empty();
                    image.css("display", "none").fadeIn(500);
                    caption.css("display", "none").fadeIn(500);
                    
                    if (false) {
                        var extrasList = $("<ul></ul>");
                        extrasList.addMetadata("Date", thumb.data("originalDate"));
                        extrasList.addMetadata("Camera", thumb.data("cameraModel"));
                        extrasList.addMetadata("Exposure time", thumb.data("exposureTime"));
                        extrasList.addMetadata("ISO", thumb.data("isoEquivalent"));
                        extrasList.addMetadata("Aperture", thumb.data("aperture"));
                        extrasList.addMetadata("Focus distance", thumb.data("focusDistance"));
                        extrasList.addMetadata("Focal length", thumb.data("focalLength35mm"));
                        extrasList.addMetadata("Keywords", thumb.data("keywords"));
                        if (extrasList.children().length > 0) {
                            extras.append(extrasList);                        
                            extrasList.find(":first-child").addClass("first");
                            extras.css({
                                width : (image.outerWidth() - (5 * 2) + 100) + "px"
                            }).fadeIn(500);
                        }
                    }
                    
                    var li = thumb.parents("li");
                    li.siblings().children("img.selected").fadeTo(500, formattedThumbnailOpacity);
                    thumb.fadeTo("fast", 1).addClass("selected");
                    image.attr("title", "Next image");
                    
                    var original = thumb.data("original");
                    if (original) {
                        var originalLink = $("<a></a>").attr("href", original).text("Download original");
                        caption.append(" (").append(originalLink).append(")");
                    }
                },
                onThumb: function(thumb) {
                    var li = thumb.parents("li");
                    var fadeTo = li.is(".active") ? "1" : formattedThumbnailOpacity;
                    thumb.css({display: "none", opacity: fadeTo}).fadeIn(1500);
                    thumb.hover(
                        function() {
                            thumb.fadeTo("fast", 1);        
                        },
                        function() {
                            li.not(".active").children("img").fadeTo("fast", formattedThumbnailOpacity);
                        }
                    )
                },
                preloads: 3,
                fastSteps: 5,
                onPrev: function() {
                    $.imageScroller.scrollLeft();
                },
                onNext: function() {
                    $.imageScroller.scrollRight();
                },
                onPrevFast: function() {
                    $.imageScroller.fastScrollLeft();
                },
                onNextFast: function() {
                    $.imageScroller.fastScrollRight();
                },
                enableSlideshow : false,
                autostartSlideshow : false,
                slideshowDelay : 3000,
                onSlideshowPlayed : function() {
                    $('.play').hide();
                    $('.pause').show();    
                },
                onSlideshowPaused : function() {
                    $('.play').show();
                    $('.pause').hide();
                }
            });
            
            $.galleria.loader = $("<div></div>").addClass("loader").append($(new Image()).attr("src","res/loader.gif").attr("title","Loading..."));
            
            prepareArrow = function(arrow) {
                arrow.css({display: "none", opacity: 0.5, "padding-top": "26px"}).fadeIn( 1000);            
                arrow.hover(
                    function() {
                        arrow.fadeTo("fast", 1);
                    },
                    function() {
                        arrow.fadeTo("fast", 0.5);            
                    }
                );    
            }
            
            var leftArrow = $("#left_arrow");
            prepareArrow(leftArrow);
            leftArrow.click(function() {
                $.galleria.prev();    
            });
            
            var rightArrow = $("#right_arrow");
            prepareArrow(rightArrow);
            rightArrow.click(function() {
                $.galleria.next();
            });
            
            if (false) {
                var leftFastArrow = $("#left_fast_arrow");
                prepareArrow(leftFastArrow);
                leftFastArrow.click(function() {
                    $.galleria.prevFast();
                });
                
                var rightFastArrow = $("#right_fast_arrow");
                prepareArrow(rightFastArrow);
                rightFastArrow.click(function() {
                    $.galleria.nextFast();
                });
            }
        });

        $(document).bind("keydown", "left", function() {
            if (!KeyboardNavigation.widgetHasFocus()) {
                $.galleria.prev();
            }
        });
        $(document).bind("keydown", "right", function() {
            if (!KeyboardNavigation.widgetHasFocus()) {
                $.galleria.next();
            }
        });
        $(document).bind("keydown", "space", function() {
            if (!KeyboardNavigation.widgetHasFocus()) {
                $.galleria.toggleSlideshow();
            }
        });

        var KeyboardNavigation = {
            widgetHasFocus: function() {
                if(typeof _jaWidgetFocus != 'undefined' && _jaWidgetFocus) {
                    return true;
                }
                return false;
            }
        }
    //--><!]]></script>

    <link rel="alternate" href="album.rss" type="application/rss+xml"/>
</head>
    <body>
        <div id="header">
    <div id="top_container">
            <h1>Produkty Firmy</h1>
                
    </div>    
    
</div>
        <div id="main">
                <div id="scroller_container">
                    <img class="hide" id="left_arrow" src="res/left.png" alt="Scroll left" title="Scroll left" />                    
                    <div id="image_scroller">
                        <ul id="thumbnails_container" class="thumbnails_unstyled">
                                <li class="active">
                                                

                                    <a href="slides/phoca_thumb_l_malowanie_lakierowanie_proszkowe_inne_26.JPG" title="">
                                                
                                        <img src="thumbs/phoca_thumb_l_malowanie_lakierowanie_proszkowe_inne_26.JPG" alt="" title="" style="width: 90px; height: 90px;" />
                                    </a>
                                    <span>width:533;;height:399</span>
                                </li>
                                
                                <li class="">
                                                

                                    <a href="slides/malowanie-i-lakierowanie-tworzyw-sztucznych-oraz-metali-malarnia-klasyczna.jpg" title="">
                                                
                                        <img src="thumbs/malowanie-i-lakierowanie-tworzyw-sztucznych-oraz-metali-malarnia-klasyczna.jpg" alt="" title="" style="width: 90px; height: 90px;" />
                                    </a>
                                    <span>width:285;;height:214</span>
                                </li>
                                
                                <li class="">
                                                

                                    <a href="slides/malowanie-na-mokro.jpg" title="">
                                                
                                        <img src="thumbs/malowanie-na-mokro.jpg" alt="" title="" style="width: 90px; height: 90px;" />
                                    </a>
                                    <span>width:250;;height:179</span>
                                </li>
                                
                                <li class="">
                                                

                                    <a href="slides/phoca_thumb_l_malowanie_lakierowanie_proszkowe_felgi_5.JPG" title="">
                                                
                                        <img src="thumbs/phoca_thumb_l_malowanie_lakierowanie_proszkowe_felgi_5.JPG" alt="" title="" style="width: 90px; height: 90px;" />
                                    </a>
                                    <span>width:533;;height:399</span>
                                </li>
                                
                                <li class="">
                                                

                                    <a href="slides/phoca_thumb_l_malowanie_lakierowanie_proszkowe_felgi_6.JPG" title="">
                                                
                                        <img src="thumbs/phoca_thumb_l_malowanie_lakierowanie_proszkowe_felgi_6.JPG" alt="" title="" style="width: 90px; height: 90px;" />
                                    </a>
                                    <span>width:533;;height:399</span>
                                </li>
                                
                                <li class="">
                                                

                                    <a href="slides/phoca_thumb_l_malowanie_lakierowanie_proszkowe_felgi_18.JPG" title="">
                                                
                                        <img src="thumbs/phoca_thumb_l_malowanie_lakierowanie_proszkowe_felgi_18.JPG" alt="" title="" style="width: 90px; height: 90px;" />
                                    </a>
                                    <span>width:533;;height:399</span>
                                </li>
                                
                                <li class="">
                                                

                                    <a href="slides/phoca_thumb_l_malowanie_lakierowanie_proszkowe_felgi_22.JPG" title="">
                                                
                                        <img src="thumbs/phoca_thumb_l_malowanie_lakierowanie_proszkowe_felgi_22.JPG" alt="" title="" style="width: 90px; height: 90px;" />
                                    </a>
                                    <span>width:533;;height:399</span>
                                </li>
                                
                                <li class="">
                                                

                                    <a href="slides/phoca_thumb_l_malowanie_lakierowanie_proszkowe_inne_7.JPG" title="">
                                                
                                        <img src="thumbs/phoca_thumb_l_malowanie_lakierowanie_proszkowe_inne_7.JPG" alt="" title="" style="width: 90px; height: 90px;" />
                                    </a>
                                    <span>width:533;;height:399</span>
                                </li>
                                
                                <li class="">
                                                

                                    <a href="slides/phoca_thumb_l_malowanie_lakierowanie_proszkowe_inne_19.JPG" title="">
                                                
                                        <img src="thumbs/phoca_thumb_l_malowanie_lakierowanie_proszkowe_inne_19.JPG" alt="" title="" style="width: 90px; height: 90px;" />
                                    </a>
                                    <span>width:533;;height:399</span>
                                </li>
                                
                        </ul>
                        <div class="clear"></div>
                    </div>                    
                    <img class="hide" id="right_arrow" src="res/right.png" alt="Scroll right" title="Scroll right" />
                    
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
                <div id="middle_container">
                    <div id="main_image"></div>
                    <div id="extras"></div>
                </div>
            <div class="clear"></div>    
        </div>
        <div class="clear"></div>
        <div id="footer">
        <p id="bottom_container">
            Photo album created with <a href="http://jalbum.net" target="_blank" rel="nofollow" title="jAlbum 9">jAlbum 9</a> and <a href="http://jalbum.net/skins/skin/Galleria" title="Galleria">Galleria</a>.<br />Create <a href="http://jalbum.net">online photo albums</a> with jAlbum
        </p>
    
</div>
        
    <div id="jalbumwidgetcontainer"></div>
<script type="text/javascript" charset="utf-8"><!--//--><![CDATA[//><!--
_jaSkin = "Galleria";
_jaStyle = "Gray.css";
_jaVersion = "9.5";
_jaGeneratorType = "desktop";
_jaLanguage = "pl";
_jaPageType = "index";
_jaRootPath = ".";
_jaUserName = "scythe3";
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://jalbum.net/widgetapi/load.js";
document.getElementById("jalbumwidgetcontainer").appendChild(script);
//--><!]]></script>

</body>
</html>