以下是 LightWindow v2.0特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="JS代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为LightWindow v2.0，属于站长常用代码，更多ͼƬ��Ч代码请访问懒人图库JS代码频道�?" />
<title>LightWindow</title>
<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/lightwindow.css" />
<!-- JavaScript -->
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
</head>
<body>
<div class="page-top"></div>
<div class="page-body">
<h1 style="color: #FFFFFF;">LightWindow v2.0 <span>Demos</span></h1>
<p><small>NOTE: </small>I use some large example files here for the media, hence it is best that your browser window is larger than 800px for these demos.</p>
<h2>Media <span>Movies, Flash, PDF's... just link directly to the file!</span></h2>
<p>
<a href="gallery/spider-man3-trl3.mov" class="lightwindow page-options" params="lightwindow_width=640,lightwindow_height=320" ><strong>Quicktime Movie Example</strong> - 20MB Local File!</a>
<a href="gallery/fische01.mov" class="lightwindow page-options" params="lightwindow_width=320,lightwindow_height=260" ><strong>Quicktime Movie Example</strong> - 5MB Local File!</a>
<a href="http://images.apple.com/movies/dreamworks/transformers/transformers-tlr4_h.640.mov" class="lightwindow page-options" params="lightwindow_width=640,lightwindow_height=288" ><strong>Apple.com Trailer</strong> - Transformers, more than meets the eye!</a>
<a href="http://www.kayotix.com/av/video/wmv/canon/canon_what_a_picture.wmv" class="lightwindow page-options" params="lightwindow_width=300,lightwindow_height=288,lightwindow_loading_animation=false,lightwindow_iframe_embed=true" ><strong>WMV Example</strong> - Even Windows Media Player!</a>
<a href="gallery/header2.swf?scale=noscale&tag1=Sooth Your Mind & Body&tag2=Justice Through Integrity&tag3=Helping Injured Victims&tag4=Experience You Can Trust" class="lightwindow page-options" params="lightwindow_width=843,lightwindow_height=324" title="Preview: Doesn't your masthead look perdy?"><strong>Single SWF Example</strong> - Because I <strong>Love</strong> Flash...</a>
<a href="gallery/header.swf?scale=noscale&tag1=Sooth Your Mind & Body&tag2=Justice Through Integrity&tag3=Helping Injured Victims&tag4=Experience You Can Trust" class="lightwindow page-options" rel="Flash Gallery[Headers]" params="lightwindow_width=800,lightwindow_height=345" title="Gallery: Doesn't your masthead look perdy?" author="Einstein Industries" ><strong>SWF Gallery</strong> - Any media can now be used in a GALLERY!</a>
<a href="gallery/header2.swf?scale=noscale&tag1=Sooth Your Mind & Body&tag2=Justice Through Integrity&tag3=Helping Injured Victims&tag4=Experience You Can Trust" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=843,lightwindow_height=324" title="Gallery: The second masthead is nice too..." author="Einstein Industries" >Header #2</a>
<a href="gallery/header3.swf?scale=noscale&tag1=Sooth Your Mind & Body&tag2=Justice Through Integrity&tag3=Helping Injured Victims&tag4=Experience You Can Trust" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=769,lightwindow_height=209" title="Gallery: But I like this one more!" author="Einstein Industries" >Header #3</a>
<a href="http://www.cheathamlane.net/clients/SFCM/flash/index.html" class="lightwindow page-options" params="lightwindow_width=600,lightwindow_height=450,lightwindow_loading_animation=false" title="CheathamLane :: Interactive 360° Photography & Flash" ><strong>User Example</strong> - CheathamLane.net</a>
<a href="gallery/frontdoor_doc.swf" class="lightwindow page-options" params="lightwindow_iframe_embed=true" title="Flash Paper" ><strong>Flash Paper</strong> - The RIGHT way to embed a PDF!</a>
<a href="http://www.youtube.com/v/uhi5x7V3WXE" class="lightwindow page-options" params="lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false" title="YouTube: 300 Preview" ><strong>You Tube</strong> - 300 Preview</a>
</p>
<h2>External Sources <span>Look Ma! It's like a popup window! (Other Domains)</span></h2>
<p>
<a href="http://www.rubyonrails.com/" class="lightwindow page-options" title="Ruby on Rails" caption="One of my favorites, and really it should be one of yours."><strong>Website Example</strong> - Preview any website from yours!</a>
<a href="blank.html" class="lightwindow page-options" params="lightwindow_type=external"><strong><span style="color: red;">NEW</span> Page Treated as External</strong> - This page is local to this domain but is placed in an iframe.</a>
</p>
<h2>Frame Calls <span style="color: red;">NEW</span> <span>Call a LightWindow from a frame!</span></h2>
<p>
<iframe id="iframe_test" src="iframe.html" frameborder="1" allowtransparency="true" scrolling="no" width="100%" height="25" ></iframe>
</p>
<h2>Images <span>Singles or Gallery Sets!</span></h2>
<p>
<a href="gallery/image-5.jpg" class="lightwindow page-options" title="What is this Plant?" author="Unknown" caption="Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture."><strong>Image</strong> - Just an image, a decently large one.</a>
<a href="http://farm1.static.flickr.com/180/439443686_bc797081ea.jpg" class="lightwindow page-options" title="Bob, Donna and my son Kote" author="My Wife" caption="Three of some of the most important people in my life."><strong><span style="color: red;">NEW</span> External Image</strong> - An Image pulled from an External Source.</a>
<a href="gallery/0.jpg" class="lightwindow page-options" rel="Random[Sample Images]" title="High 5 Dood!" caption="Snow people know how to have fun..." author="Unknown"><strong>Image Gallery</strong> - Everyone needs a killer gallery!</a>
<a href="gallery/1.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Snow People Playing Football" caption="Please don't kick me!" author="Unknown">image #1</a>
<a href="gallery/header3.swf?scale=noscale&tag1=Sooth Your Mind & Body&tag2=Justice Through Integrity&tag3=Helping Injured Victims&tag4=Experience You Can Trust" class="lightwindow hidden" rel="Random[Sample Images]" params="lightwindow_width=769,lightwindow_height=209" title="Oh My! Flash and Images Mixed!" >Header #3</a>
<a href="gallery/2.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Left Behind" caption="...it didn't smell that bad..." author="Unknown">image #2</a>
<a href="gallery/3.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Where your water comes from?" caption="Tasty H20 ;)" author="Unknown">image #3</a>
<a href="gallery/4.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Beware of warewolves..." caption="They are hungry and you are food!" author="Unknown">image #4</a>
<a href="gallery/5.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Elf Behind a Tree" caption="He's there, sneaky elves..." author="Unknown">image #5</a>
<a href="gallery/0-evolution.jpg" class="lightwindow page-options" rel="Evolution?[Man]" title="The Evolution of Man is looking grim..." caption="Man starts out kinda hairy..." author="Unknown" params="lightwindow_show_images=2"><strong>Image Gallery w/Multiple Images</strong> - Side by Sides can be good for Before and After Gallery's or to show actions, etc.!</a>
<a href="gallery/1-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]">image #1</a>
<a href="gallery/2-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]" title="The Evolution of Man is looking grimmer..." caption="Later, Man seems to have learned how to sharpen stuff!" params="lightwindow_show_images=2">image #2</a>
<a href="gallery/3-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]">image #3</a>
<a href="gallery/4-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]" title="We are screwed!" caption="Finally, Man discovers how to comb his hair and order from McDonalds�?.. only one thing bigger than a Big Mac�?" params="lightwindow_show_images=2">image #4</a>
<a href="gallery/5-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]">image #5</a>
</p>
<h2>Instantiate 1 by 1 <span>when you need to add one window or re-add it or whatever</span></h2>
<p>
<input type="button" onclick="javascript: if (!$('sample-link').onclick) {myLightWindow.createWindow('sample-link'); exampleCreated = true;}" value="Instantiate the Link Below" />
or
<input type="button" onclick="javascript: myLightWindow.activateWindow({href: 'http://stickmanlabs.com/images/kevin_vegas.jpg', title: 'Waiting for the show to start in Las Vegas', author: 'Jazzmatt', caption: 'Mmmmmm Margaritas! And yes, this is me...', left: 300});" value="Launch it from this Button!" />
</p>
<p>
<a href="http://stickmanlabs.com/images/kevin_vegas.jpg" class="page-options" title="Waiting for the show to start in Las Vegas" author="Jazzmatt" caption="Mmmmmm Margaritas! And yes, this is me..." id="sample-link"><strong><span style="color: red;">NEW</span> A link with no Class</strong> - As in no Class Name! We built this one with a function call.</a>
</p>
<h2>Forms <span>yes, yes it does work...</span></h2>
<p>
<a href="form.html" params="lightwindow_width=175,lightwindow_height=60" class="lightwindow page-options"><strong>Form Example</strong> - Submit a form in a lightWindow!</a>
<a href="form.html" params="lightwindow_width=175,lightwindow_height=60,lightwindow_top=200,lightwindow_left=300" class="lightwindow page-options"><strong><span style="color: red;">NEW</span> Form Example with a custom position</strong> - Submit a form in a lightWindow!</a>
</p>
<h2>Pages <span>Fixed width and Fluid.</span></h2>
<p>
<a href="blank.html" class="lightwindow page-options"><strong>Fluid Page</strong> - This page does not have a width, the content is flexible.</a>
<a href="blank-width.html" class="lightwindow page-options"><strong>Fixed Page</strong> - This page has a defined amount of space it needs or it will cause a horizontal scroll.</a>
<a href="blank-huge.html" class="lightwindow page-options" title="Sample Title"><strong>Monster Fixed Page</strong> - This page is just plain to big for the browser window unless you maximize a 30 inch monitor.</a>
<a href="blank.html" params="lightwindow_width=800,lightwindow_height=350" class="lightwindow page-options"><strong>Set Dimensions</strong> - Set the dimensions of the window.</a>
</p>
<h2>Inline Content <span>They call this a gimme :)</span></h2>
<p>
<a href="#inline-sample" class="lightwindow page-options"><strong>Inline Content</strong> - Not a fan of AJAX? No worries, here you go.</a>
</p>
</div>
<div class="page-footer">
<p>© Copyright 2007 <a href="http://www.stickmanlabs.com/"><small>stickmanlabs</small></a></p>
<p>LightWindow is freely distributable under the terms of an MIT-style license.</p>
</div>
<!-- Hidden stuff for demos -->
<div id="inline-sample" >
<div >
<p>Oh yeah, this content was pulled from within the page!</p>
<p>In order to get the LightWindow to fit the content, you have to define the height and width of a div in the inline div or send values for lightwindow_width and lightwindow_height in the url string. Personally I prefer the inner div method, this way you can gracefully degrade the link as I did into an anchor if javascript isn't available.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis. </p>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
<p> </p>
</div>
<a href="gallery/0-nature.jpg" class="lightwindow hidden" rel="/\\:;*?<>'”|®™�?#[Nature]" title="Perdy Horsey" caption="I'm too kewl fer skewl!" author="Unknown">image #1</a>
<a href="gallery/1-nature.jpg" class="lightwindow hidden" rel="/\\:;*?<>'”|®™�?#[Nature]" title="Where do flowers come from?" caption="Other flowers of course..." author="Unknown">image #3</a>
<a href="gallery/0-sushi.jpg" class="lightwindow hidden" rel="/\\:;*?<>'”|®™�?#[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a>
<a href="gallery/1-sushi.jpg" class="lightwindow hidden" rel="/\\:;*?<>'”|®™�?#[Sushi]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown">image #2</a>
<a href="gallery/2-sushi.jpg" class="lightwindow hidden" rel="/\\:;*?<>'”|®™�?#[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3</a>
</div>
</body>
</html>
</html>
JS代码(scriptaculous.js):
// script.aculo.us scriptaculous.js v1.7.1_beta2,Sat Apr 28 15:20:12 CEST 2007// Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us,http://mir.aculo.us)//// Permission is hereby granted,free of charge,to any person obtaining// a copy of this software and associated documentation files (the// "Software"),to deal in the Software without restriction,including// without limitation the rights to use,copy,modify,merge,publish,// distribute,sublicense,and/or sell copies of the Software,and to// permit persons to whom the Software is furnished to do so,subject to// the following conditions://// The above copyright notice and this permission notice shall be// included in all copies or substantial portions of the Software.//// THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,// EXPRESS OR IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF// MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE// LIABLE FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY,WHETHER IN AN ACTION// OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,OUT OF OR IN CONNECTION// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.//// For details,see the script.aculo.us web site:http://script.aculo.us/var Scriptaculous ={
Version:'1.7.1_beta2',require:function(libraryName){
// inserting via DOM fails in Safari 2.0,so brute force approach document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
}
,REQUIRED_PROTOTYPE:'1.5.1',load:function(){
function convertVersionString(versionString){
var r = versionString.split('.');
return parseInt(r[0])*100000 + parseInt(r[1])*1000 + parseInt(r[2]);
}
if((typeof Prototype=='undefined') || (typeof Element == 'undefined') || (typeof Element.Methods=='undefined') || (convertVersionString(Prototype.Version) < convertVersionString(Scriptaculous.REQUIRED_PROTOTYPE))) throw("script.aculo.us requires the Prototype JavaScript framework >= " + Scriptaculous.REQUIRED_PROTOTYPE);
$A(document.getElementsByTagName("script")).findAll( function(s){
return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))}
).each( function(s){
var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
var includes = s.src.match(/\?.*load=([a-z,]*)/);
(includes ? includes[1]:'builder,effects,dragdrop,controls,slider,sound').split(',').each( function(include){
Scriptaculous.require(path+include+'.js')}
);
}
);
}
}
Scriptaculous.load();
CSS代码(default.css):
/*Yes this layout was inspired by lightbox v2.0's page,the reason being,the layout works really well for a doc*/
*{margin:0;padding:0;}
body{padding:0;margin:0;background-color:#171B20;font-size:12px;font-family:"Lucida Grande",Tahoma,sans-serif;}
.page-body{margin:0 auto 0 auto;width:600px;padding:30px 0 20px 0;text-align:left;}
.page-footer{margin:0 10% 0 315px;width:600px;padding:0 0 50px 0;text-align:left;}
.page-body ul,.page-body ol{color:#ffffff;margin:10px 0 30px 25px;}
.page-body ul li,.page-body ol li{padding:0;margin:0 0 5px 0;color:#cccccc;line-height:140%;font-size:100%;}
.page-footer p{margin:0;}
.page-footer{padding:20px;}
.page-title h1 span{text-align:left;font-weight:normal;font-size:100%;color:#ffffff;margin:5px 0 15px 0;}
h1{text-align:left;font-weight:normal;font-size:180%;color:#96BF55;margin:5px 0 15px 0;}
h1 span{clear:both;font-size:60%;color:#FF9;}
h2{text-align:left;font-weight:normal;font-size:150%;color:#09f;margin:5px 0 15px 0;}
h2 span{clear:both;font-size:70%;color:#FF9;}
h3{clear:both;font-size:120%;color:#FF9;font-weight:normal;margin:0 0 10px 0;}
.notice{border:3px solid #ffffbe;padding:10px;color:#ffffff;background-color:#09f;margin:0 0 20px 0;}
.notice p,.notice p a,li a{color:#ffffff;text-decoration:none;}
a.page-options{color:#000000;text-decoration:none;display:block;text-align:left;padding:5px;background:#a9d06a;margin:3px 0 0 0;border-bottom:1px solid #333333;border-bottom:1px solid #555555;}
a.page-options:hover,a.page-options:focus{color:#fff;background:#09F;}
p{margin:0 0 20px 0;color:#cccccc;line-height:140%;}
p small,li small{color:#09F;font-size:100%;}
p em,em{color:#ffffff;}
.hidden{display:none;}
CSS代码(lightwindow.css):
#lightwindow_overlay{/* REQUIRED */
display:none;visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100px;z-index:500;/* REQUIRED */
}
#lightwindow{/* REQUIRED */
/* Of Note - The height and width of this element are set to 0px */
display:none;visibility:hidden;position:absolute;z-index:999;line-height:0px;/* REQUIRED */
}
#lightwindow_container{/* REQUIRED */
display:none;visibility:hidden;position:absolute;/* REQUIRED */
padding:0 0 0 0;margin:0 0 0 0;}
/* IE6 needs this or it messes with our positioning */
* html #lightwindow_container{overflow:hidden;}
#lightwindow_contents{overflow:hidden;z-index:0;position:relative;border:10px solid #ffffff;background-color:#ffffff;}
#lightwindow_loading{/* REQUIRED */
height:100%;width:100%;top:0px;left:0px;z-index:9999;position:absolute;/* REQUIRED */
background-color:#f0f0f0;padding:10px;}
#lightwindow_loading_shim{display:none;left:0px;position:absolute;top:0px;width:100%;height:100%;}
#lightwindow_loading span{font-size:12px;line-height:32px;color:#444444;float:left;padding:0 10px 0 0;}
#lightwindow_loading span a,#lightwindow_loading span a:link,#lightwindow_loading span a:visited{color:#09F;text-decoration:none;cursor:pointer;}
#lightwindow_loading span a:hover,#lightwindow_loading span a:active{text-decoration:underline;}
#lightwindow_loading img{float:left;margin:0 10px 0 0;}
/*-----------------------------------------------------------------------------------------------I liked the Navigation so much from http://www.huddletogether.com/projects/lightbox2/I mean let's face it,it works really well and is very easy to figure out.-----------------------------------------------------------------------------------------------*/
#lightwindow_navigation{/* REQUIRED */
position:absolute;top:0px;left:0px;display:none;/* REQUIRED */
}
/* We need to shim the navigation for IE,though its more of a sub-floor */
#lightwindow_navigation_shim{/* REQUIRED */
display:none;left:0px;position:absolute;top:0px;width:100%;height:100%;/* REQUIRED */
}
#lightwindow_navigation a,#lightwindow_navigation a:link,#lightwindow_navigation a:visited,#lightwindow_navigation a:hover,#lightwindow_navigation a:active{/* REQUIRED */
outline:none;/* REQUIRED */
}
#lightwindow_previous,#lightwindow_next{width:49%;height:100%;background:transparent url(../images/blank.gif) no-repeat;/* Trick IE into showing hover */
display:block;}
#lightwindow_previous{float:left;left:0px;}
#lightwindow_next{float:right;right:0px;}
#lightwindow_previous:hover,#lightwindow_previous:active{background:url(../images/prevlabel.gif) left 15% no-repeat;}
#lightwindow_next:hover,#lightwindow_next:active{background:url(../images/nextlabel.gif) right 15% no-repeat;}
#lightwindow_previous_title,#lightwindow_next_title{display:none;}
#lightwindow_galleries{width:100%;position:absolute;z-index:50;display:none;overflow:hidden;margin:0 0 0 10px;bottom:0px;left:0px;}
#lightwindow_galleries_tab_container{width:100%;height:0px;overflow:hidden;}
a#lightwindow_galleries_tab,a:link#lightwindow_galleries_tab,a:visited#lightwindow_galleries_tab{display:block;height:20px;width:77px;float:right;line-height:22px;color:#ffffff;text-decoration:none;font-weight:bold;cursor:pointer;font-size:11px;color:#ffffbe;background:url(../images/black-70.png) repeat 0 0 transparent;}
* html a#lightwindow_galleries_tab,* html a:link#lightwindow_galleries_tab,* html a:visited#lightwindow_galleries_tab{background:none;background-color:#000000;opacity:.70;filter:alpha(opacity=70);}
a:hover#lightwindow_galleries_tab,a:active#lightwindow_galleries_tab{color:#ffffbe;}
#lightwindow_galleries_tab_span{display:block;height:20px;width:63px;padding:0 7px 0 7px;}
#lightwindow_galleries_tab .up{background:url(../images/arrow-up.gif) no-repeat 60px 5px transparent;}
#lightwindow_galleries_tab .down{background:url(../images/arrow-down.gif) no-repeat 60px 6px transparent;}
#lightwindow_galleries_list{background:url(../images/black-70.png) repeat 0 0 transparent;overflow:hidden;height:0px;}
* html #lightwindow_galleries_list{background:none;background-color:#000000;opacity:.70;filter:alpha(opacity=70);}
.lightwindow_galleries_list{width:200px;float:left;margin:0 0 10px 0;padding:10px;}
.lightwindow_galleries_list h1{color:#09F;text-decoration:none;font-weight:bold;cursor:pointer;padding:10px 0 5px 0;font-size:16px;}
.lightwindow_galleries_list li{margin:5px 0 5px 0;list-style-type:none;}
.lightwindow_galleries_list a,.lightwindow_galleries_list a:link,.lightwindow_galleries_list a:visited{display:block;line-height:22px;color:#ffffff;text-decoration:none;font-weight:bold;cursor:pointer;padding:0 0 0 10px;font-size:11px;}
.lightwindow_galleries_list a:hover,.lightwindow_galleries_list a:active{background:#000000;color:#ffffbe;border-left:3px solid #ffffbe;padding:0 0 0 7px;}
#lightwindow_data{/* REQUIRED */
position:absolute;/* REQUIRED */
}
#lightwindow_data_slide{/* REQUIRED */
position:relative;/* REQUIRED */
}
#lightwindow_data_slide_inner{background-color:#ffffff;padding:0 10px 10px 10px;}
#lightwindow_data_caption{padding:10px 0 0 0;color:#666666;line-height:25px;background-color:#ffffff;clear:both;}
#lightwindow_data_details{background-color:#f0f0f0;padding:0 10px 0 10px;height:20px;}
#lightwindow_data_author_container{width:40%;text-align:right;color:#666666;font-style:italic;font-size:10px;line-height:20px;float:right;overflow:hidden;}
#lightwindow_data_gallery_container{font-size:10px;width:40%;text-align:left;color:#666666;line-height:20px;float:left;overflow:hidden;}
#lightwindow_title_bar{height:25px;overflow:hidden;}
#lightwindow_title_bar_title{color:#ffffbe;font-size:14px;line-height:25px;text-align:left;float:left;}
a#lightwindow_title_bar_close_link,a:link#lightwindow_title_bar_close_link,a:visited#lightwindow_title_bar_close_link{float:right;text-align:right;cursor:pointer;color:#ffffbe;line-height:25px;padding:0;margin:0;}
a:hover#lightwindow_title_bar_close_link,a:active#lightwindow_title_bar_close_link{color:#ffffff;}
/*-----------------------------------------------------------------------------------------------Theme styling stuff-----------------------------------------------------------------------------------------------*/
#lightwindow p{color:#000000;padding-right:10px;}
分享到QQ
分享到微博
微信扫一扫
