css - lightbox - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css

Bruger #17281 @ 14.08.12 22:57

Hej Udviklere.

Har valgt at benytte lightbox til at se billeder med.
Men det er lidt skidt når et billede fylder mere end ens skærm. Så er det ikke muligt at få den til at vise en max højde+bredde.

Men er billedet mindre end max, så skal den vise det som billedet er.
Men er billedet bredere og højere end max tilladt, så skal den vise det som max.

Nogen der ved hvordan?.
Det andet ser så dumt ud

lightbox.css

CSS kode

 /* line 6, ../sass/lightbox.sass */
 #lightboxOverlay {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 9999;
   background-color: black;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
   opacity: 0.85;
   display: none;
 }
 
 /* line 15, ../sass/lightbox.sass */
 #lightbox {
   position: absolute;
   left: 0;
   width: 100%;
   z-index: 10000;
   text-align: center;
   line-height: 0;
   font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
   font-weight: normal;
 }
 /* line 24, ../sass/lightbox.sass */
 #lightbox img {
   width: auto;
   height: auto;
 }
 /* line 27, ../sass/lightbox.sass */
 #lightbox a img {
   border: none;
 }
 
 /* line 30, ../sass/lightbox.sass */
 .lb-outerContainer {
   position: relative;
   background-color: white;
   *zoom: 1;
   width: 250px;
   height: 250px;
   margin: 0 auto;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
 }
 /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
 .lb-outerContainer:after {
   content: "";
   display: table;
   clear: both;
 }
 
 /* line 39, ../sass/lightbox.sass */
 .lb-container {
   padding: 10px;
 }
 
 /* line 42, ../sass/lightbox.sass */
 .lb-loader {
   position: absolute;
   top: 40%;
   left: 0%;
   height: 25%;
   width: 100%;
   text-align: center;
   line-height: 0;
 }
 
 /* line 51, ../sass/lightbox.sass */
 .lb-nav {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 10;
 }
 
 /* line 59, ../sass/lightbox.sass */
 .lb-container > .nav {
   left: 0;
 }
 
 /* line 62, ../sass/lightbox.sass */
 .lb-nav a {
   outline: none;
 }
 
 /* line 65, ../sass/lightbox.sass */
 .lb-prev, .lb-next {
   width: 49%;
   height: 100%;
   background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
   /* Trick IE into showing hover */
   display: block;
 }
 
 /* line 72, ../sass/lightbox.sass */
 .lb-prev {
   left: 0;
   float: left;
 }
 
 /* line 76, ../sass/lightbox.sass */
 .lb-next {
   right: 0;
   float: right;
 }
 
 /* line 81, ../sass/lightbox.sass */
 .lb-prev:hover {
   background: url(../images/prev.png) left 48% no-repeat;
 }
 
 /* line 85, ../sass/lightbox.sass */
 .lb-next:hover {
   background: url(../images/next.png) right 48% no-repeat;
 }
 
 /* line 88, ../sass/lightbox.sass */
 .lb-dataContainer {
   margin: 0 auto;
   padding-top: 5px;
   *zoom: 1;
   width: 100%;
   -moz-border-radius-bottomleft: 4px;
   -webkit-border-bottom-left-radius: 4px;
   -ms-border-bottom-left-radius: 4px;
   -o-border-bottom-left-radius: 4px;
   border-bottom-left-radius: 4px;
   -moz-border-radius-bottomright: 4px;
   -webkit-border-bottom-right-radius: 4px;
   -ms-border-bottom-right-radius: 4px;
   -o-border-bottom-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
 .lb-dataContainer:after {
   content: "";
   display: table;
   clear: both;
 }
 
 /* line 95, ../sass/lightbox.sass */
 .lb-data {
   padding: 0 10px;
   color: #bbbbbb;
 }
 /* line 98, ../sass/lightbox.sass */
 .lb-data .lb-details {
   width: 85%;
   float: left;
   text-align: left;
   line-height: 1.1em;
 }
 /* line 103, ../sass/lightbox.sass */
 .lb-data .lb-caption {
   font-size: 13px;
   font-weight: bold;
   line-height: 1em;
 }
 /* line 107, ../sass/lightbox.sass */
 .lb-data .lb-number {
   display: block;
   clear: left;
   padding-bottom: 1em;
   font-size: 11px;
 }
 /* line 112, ../sass/lightbox.sass */
 .lb-data .lb-close {
   width: 35px;
   float: right;
   padding-bottom: 0.7em;
   outline: none;
 }
 /* line 117, ../sass/lightbox.sass */
 .lb-data .lb-close:hover {
   cursor: pointer;
 }

screen.css

CSS kode

 /*    Lightbox v2 Project page styles    
  *    Author: Lokesh Dhakar http://www.lokeshdhakar.com
  *    Created: a long time ago (2006 I think)
  *    Table of Contents:
  *        layout
  *        typography
  *    content */
 /* line 17, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
 }
 
 /* line 20, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 body {
   line-height: 1;
 }
 
 /* line 22, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none;
 }
 
 /* line 24, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 /* line 26, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle;
 }
 
 /* line 28, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none;
 }
 /* line 101, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 q:before, q:after, blockquote:before, blockquote:after {
   content: "";
   content: none;
 }
 
 /* line 30, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none;
 }
 
 /* line 114, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
   display: block;
 }
 
 /* layout
  *----------------------------------------------- */
 /* line 18, ../sass/screen.sass */
 #sidebar {
   position: fixed;
   top: 40px;
   left: 40px;
   width: 200px;
 }
 
 /* line 24, ../sass/screen.sass */
 #content {
   margin: 0 40px 40px 280px;
 }
 
 /* line 27, ../sass/screen.sass */
 .row {
   *zoom: 1;
 }
 /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
 .row:after {
   content: "";
   display: table;
   clear: both;
 }
 
 /* Typography
  *----------------------------------------------- */
 /* line 33, ../sass/screen.sass */
 body {
   background: #222222 url(../images/bg-checker.png);
 }
 
 /* line 36, ../sass/screen.sass */
 body, input, textarea {
   color: white;
   text-shadow: 0 -1px 0 black;
   font-size: 16px;
   line-height: 1.625em;
   font-family: "Open Sans", "lucida grande", tahoma, sans-serif;
   font-weight: 600;
   -webkit-font-smoothing: antialiased;
 }
 
 /* line 45, ../sass/screen.sass */
 #lightbox {
   text-shadow: none;
 }
 
 /* line 48, ../sass/screen.sass */
 h1, h2, h3, h4, h5, h6 {
   font-family: "Fredoka One", "lucida grande", tahoma, sans-serif;
   font-weight: 400;
   letter-spacing: 0.03em;
   line-height: 1.625em;
   margin: 0;
   color: #d0eb6a;
 }
 
 /* line 56, ../sass/screen.sass */
 h1 {
   font-size: 40px;
   line-height: 1.2em;
 }
 
 /* line 60, ../sass/screen.sass */
 h2 {
   font-size: 34px;
   line-height: 1.45em;
   margin-bottom: 0.2em;
 }
 
 /* line 65, ../sass/screen.sass */
 h3 {
   font-size: 16px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: #88a616;
 }
 
 /* line 71, ../sass/screen.sass */
 h4 {
   font-size: 16px;
 }
 
 /* Text elements */
 /* line 77, ../sass/screen.sass */
 p {
   margin: 0 0 1.25em 0;
   line-height: 1.625em;
 }
 
 /* line 81, ../sass/screen.sass */
 ul, ol {
   margin: 0 0 1.25em 0;
 }
 
 /* line 84, ../sass/screen.sass */
 dt {
   font-weight: bold;
 }
 
 /* line 87, ../sass/screen.sass */
 dd {
   margin-bottom: 1.625em;
 }
 
 /* line 90, ../sass/screen.sass */
 strong {
   font-weight: bold;
 }
 
 /* line 93, ../sass/screen.sass */
 i {
   font-style: italic;
 }
 
 /* line 96, ../sass/screen.sass */
 pre {
   background: rgba(0, 0, 0, 0.4);
   color: #e7931a;
   font: 14px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
   line-height: 1.5;
   margin: 20px 0 20px 0;
   overflow: auto;
   padding: 1em;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px 2px black;
   -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px 2px black;
   box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px 2px black;
 }
 
 /* line 107, ../sass/screen.sass */
 code, kbd {
   font: 14px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
   background: rgba(0, 0, 0, 0.4);
   -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px 2px black;
   -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px 2px black;
   box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px 2px black;
   padding: 5px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   color: #e7931a;
 }
 
 /* line 115, ../sass/screen.sass */
 pre code {
   font-size: 13px;
   background: transparent;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   padding: 0;
 }
 
 /* Links */
 /* line 122, ../sass/screen.sass */
 a {
   color: #8ad459;
   text-decoration: none;
 }
 /* line 125, ../sass/screen.sass */
 a:hover {
   color: #589e29;
 }
 
 /* line 128, ../sass/screen.sass */
 ::-moz-selection,
 ::selection {
   background: #e7931a;
   color: white;
 }
 
 /* sidebar
  *----------------------------------------------- */
 /* line 137, ../sass/screen.sass */
 #sidebar {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
   opacity: 0.6;
   -webkit-transition: opacity 0.2s;
   -moz-transition: opacity 0.2s;
   -ms-transition: opacity 0.2s;
   -o-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
 /* line 140, ../sass/screen.sass */
 #sidebar:hover {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;
 }
 /* line 142, ../sass/screen.sass */
 #sidebar a {
   color: white;
 }
 /* line 144, ../sass/screen.sass */
 #sidebar .logo {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
 }
 /* line 146, ../sass/screen.sass */
 #sidebar .logo em {
   color: #8ad459;
 }
 /* line 148, ../sass/screen.sass */
 #sidebar .logo:hover {
   text-shadow: 0 0 20px #d0eb6a, 0 0 50px #d0eb6a;
 }
 /* line 150, ../sass/screen.sass */
 #sidebar .author {
   font-weight: 800;
   line-height: 1.4em;
 }
 /* line 154, ../sass/screen.sass */
 #sidebar .author a:hover {
   text-shadow: 0 0 10px white;
 }
 /* line 156, ../sass/screen.sass */
 #sidebar .author .twitter {
   font-size: 14px;
 }
 /* line 158, ../sass/screen.sass */
 #sidebar .author .twitter a {
   color: #4d9ed8;
 }
 /* line 160, ../sass/screen.sass */
 #sidebar .author .twitter em {
   color: #4d9ed8;
 }
 
 /* line 163, ../sass/screen.sass */
 #nav {
   list-style: none;
   margin: 1.5em 0 1em 0;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   font-family: "Fredoka One", "lucida grande", tahoma, sans-serif;
 }
 /* line 170, ../sass/screen.sass */
 #nav li {
   padding: 0;
   margin: 0;
 }
 /* line 173, ../sass/screen.sass */
 #nav a {
   display: block;
   height: 2em;
   padding: 0.6em 0.2em 0.3em 20px;
   background: #505050;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
   border-bottom: 1px solid rgba(0, 0, 0, 0.4);
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
 }
 /* line 181, ../sass/screen.sass */
 #nav a:hover {
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
   background-color: #88a616;
 }
 /* line 184, ../sass/screen.sass */
 #nav a.first {
   border-bottom-color: rgba(0, 0, 0, 0.5);
   -moz-border-radius-topleft: 4px;
   -webkit-border-top-left-radius: 4px;
   -ms-border-top-left-radius: 4px;
   -o-border-top-left-radius: 4px;
   border-top-left-radius: 4px;
   -moz-border-radius-topright: 4px;
   -webkit-border-top-right-radius: 4px;
   -ms-border-top-right-radius: 4px;
   -o-border-top-right-radius: 4px;
   border-top-right-radius: 4px;
   border-top-color: transparent;
 }
 /* line 188, ../sass/screen.sass */
 #nav a.last {
   border-top-color: rgba(255, 255, 255, 0.25);
   -moz-border-radius-bottomleft: 4px;
   -webkit-border-bottom-left-radius: 4px;
   -ms-border-bottom-left-radius: 4px;
   -o-border-bottom-left-radius: 4px;
   border-bottom-left-radius: 4px;
   -moz-border-radius-bottomright: 4px;
   -webkit-border-bottom-right-radius: 4px;
   -ms-border-bottom-right-radius: 4px;
   -o-border-bottom-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
 /* content
  *----------------------------------------------- */
 /* line 196, ../sass/screen.sass */
 .download {
   float: left;
   margin: 0 40px 40px 0;
   padding: 10px 20px 10px 10px;
   background-color: #333333;
   border: 5px solid #333333;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
 }
 /* line 204, ../sass/screen.sass */
 .download:hover {
   border-color: #8ad459;
   background-color: #444444;
 }
 /* line 207, ../sass/screen.sass */
 .download .box {
   float: left;
 }
 /* line 209, ../sass/screen.sass */
 .download .file {
   float: left;
   font-size: 36px;
   font-family: "Fredoka One", "lucida grande", tahoma, sans-serif;
   font-weight: 400;
   color: white;
   line-height: 1.1em;
 }
 /* line 216, ../sass/screen.sass */
 .download .file .version {
   font-size: 24px;
   color: #8ad459;
 }
 
 /* line 221, ../sass/screen.sass */
 .filelist {
   float: left;
   font-size: 12px;
   font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
   line-height: 1.5em;
 }
 /* line 226, ../sass/screen.sass */
 .filelist .header {
   text-transform: uppercase;
   font-weight: bold;
 }
 /* line 229, ../sass/screen.sass */
 .filelist .folder {
   color: #999999;
 }
 /* line 231, ../sass/screen.sass */
 .filelist .note {
   color: #999999;
 }
 
 /* line 235, ../sass/screen.sass */
 .changelog {
   margin-bottom: 0.5em;
 }
 /* line 237, ../sass/screen.sass */
 .changelog li {
   list-style: none;
   padding: 0 0 0 14px;
   background: url(../images/bullet.gif) no-repeat 0 11px;
   color: #999999;
 }
 /* line 242, ../sass/screen.sass */
 .changelog li .version {
   color: #88a616;
 }
 /* line 244, ../sass/screen.sass */
 .changelog li .date {
   color: white;
 }
 /* line 246, ../sass/screen.sass */
 .changelog .old {
   display: none;
 }
 
 /* line 249, ../sass/screen.sass */
 .showOlderChanges {
   color: #999999;
 }
 
 /* line 253, ../sass/screen.sass */
 .forums {
   float: left;
   margin: 0 40px 40px 0;
   padding: 10px;
   background-color: #333333;
   border: 5px solid #333333;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
 }
 /* line 261, ../sass/screen.sass */
 .forums:hover {
   border-color: #8ad459;
   background-color: #444444;
 }
 /* line 264, ../sass/screen.sass */
 .forums .speech {
   float: left;
   margin-right: 20px;
 }
 /* line 267, ../sass/screen.sass */
 .forums .link {
   float: left;
   font-size: 36px;
   font-family: "Fredoka One", "lucida grande", tahoma, sans-serif;
   font-weight: 400;
   color: white;
   line-height: 1.1em;
 }
 /* line 274, ../sass/screen.sass */
 .forums .link .sub {
   color: #8ad459;
 }
 
 /* line 278, ../sass/screen.sass */
 #elsewhere .button {
   font-family: "Fredoka One", "lucida grande", tahoma, sans-serif;
   font-weight: normal;
   font-size: 24px;
   display: block;
   float: left;
   margin: 20px 20px 40px 0;
   padding: 10px 10px 10px 10px;
   background-color: #333333;
   border: 5px solid #333333;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   color: white;
 }
 /* line 291, ../sass/screen.sass */
 #elsewhere .button:hover {
   background-color: #444444;
   border-color: #8ad459;
 }
 
 /* misc
  *----------------------------------------------- */
 /* line 298, ../sass/screen.sass */
 p.lead {
   font-size: 26px;
   font-weight: 600;
   line-height: 1.4em;
   margin-bottom: 0;
 }
 
 /* line 305, ../sass/screen.sass */
 hr {
   height: 6px;
   background: #3d3d33;
   border: none;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   clear: both;
 }
 
 /* line 312, ../sass/screen.sass */
 .section {
   padding: 40px 0;
 }
 /* line 314, ../sass/screen.sass */
 .section:first-child {
   border-top: none;
 }
 
 /* line 317, ../sass/screen.sass */
 .imageRow {
   *zoom: 1;
   margin: 20px 0;
 }
 /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
 .imageRow:after {
   content: "";
   display: table;
   clear: both;
 }
 /* line 320, ../sass/screen.sass */
 .imageRow .single {
   float: left;
 }
 /* line 322, ../sass/screen.sass */
 .imageRow .single a {
   float: left;
   display: block;
   background: rgba(255, 255, 255, 0.1);
   padding: 7px;
   line-height: 1em;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   margin-right: 40px;
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
 }
 /* line 332, ../sass/screen.sass */
 .imageRow .single a img {
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 /* line 335, ../sass/screen.sass */
 .imageRow .single a:hover {
   background-color: #8ad459;
 }
 /* line 337, ../sass/screen.sass */
 .imageRow .set {
   float: left;
   background: rgba(255, 255, 255, 0.1);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
 }
 /* line 343, ../sass/screen.sass */
 .imageRow .set:hover {
   background: rgba(255, 255, 255, 0.2);
 }
 /* line 346, ../sass/screen.sass */
 .imageRow .set .single a {
   background: none;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -ms-border-radius: 0;
   -o-border-radius: 0;
   border-radius: 0;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   margin-right: 0;
 }
 /* line 351, ../sass/screen.sass */
 .imageRow .set .single a:hover {
   background-color: #8ad459;
   -webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
 }
 /* line 355, ../sass/screen.sass */
 .imageRow .set .single.first a {
   -moz-border-radius-topleft: 4px;
   -webkit-border-top-left-radius: 4px;
   -ms-border-top-left-radius: 4px;
   -o-border-top-left-radius: 4px;
   border-top-left-radius: 4px;
   -moz-border-radius-bottomleft: 4px;
   -webkit-border-bottom-left-radius: 4px;
   -ms-border-bottom-left-radius: 4px;
   -o-border-bottom-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 /* line 358, ../sass/screen.sass */
 .imageRow .set .single.last a {
   -moz-border-radius-topright: 4px;
   -webkit-border-top-right-radius: 4px;
   -ms-border-top-right-radius: 4px;
   -o-border-top-right-radius: 4px;
   border-top-right-radius: 4px;
   -moz-border-radius-bottomright: 4px;
   -webkit-border-bottom-right-radius: 4px;
   -ms-border-bottom-right-radius: 4px;
   -o-border-bottom-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
 @media only screen and (max-width: 1000px) {
   /* line 364, ../sass/screen.sass */
   body, input, textarea {
     font-size: 14px;
   }
 
   /* line 367, ../sass/screen.sass */
   body {
     padding-top: 20px;
   }
 
   /* line 370, ../sass/screen.sass */
   .section {
     padding: 20px 0;
   }
 
   /* line 373, ../sass/screen.sass */
   p.lead {
     font-size: 20px;
   }
 
   /* line 376, ../sass/screen.sass */
   h1 {
     font-size: 30px;
   }
 
   /* line 379, ../sass/screen.sass */
   h2 {
     font-size: 24px;
   }
 
   /* line 382, ../sass/screen.sass */
   h3 {
     font-size: 16px;
   }
 
   /* line 385, ../sass/screen.sass */
   code, kbd {
     font-size: 13px;
   }
 
   /* line 388, ../sass/screen.sass */
   pre code {
     font-size: 12px;
   }
 
   /* line 391, ../sass/screen.sass */
   pre {
     padding: 0.75em;
   }
 
   /* line 394, ../sass/screen.sass */
   #sidebar {
     width: 160px;
     left: 20px;
   }
 
   /* line 398, ../sass/screen.sass */
   #content {
     margin-left: 200px;
   }
 }
 @media only screen and (max-width: 700px) {
   /* line 403, ../sass/screen.sass */
   body, input, textarea {
     font-size: 12px;
     padding-top: 0;
   }
 
   /* line 407, ../sass/screen.sass */
   p.lead {
     font-size: 16px;
   }
 
   /* line 410, ../sass/screen.sass */
   code, kbd {
     font-size: 12px;
   }
 
   /* line 413, ../sass/screen.sass */
   pre code {
     font-size: 11px;
   }
 
   /* line 416, ../sass/screen.sass */
   pre {
     padding: 0.5em;
   }
 
   /* line 420, ../sass/screen.sass */
   #sidebar {
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
     opacity: 1;
     position: static;
     text-align: center;
     width: auto;
     margin: 20px 20px 0 20px;
     border-bottom: 6px solid #3d3d33;
   }
   /* line 427, ../sass/screen.sass */
   #sidebar h1 {
     font-size: 24px;
   }
   /* line 429, ../sass/screen.sass */
   #sidebar .twitter {
     font-size: 14px;
   }
   /* line 431, ../sass/screen.sass */
   #sidebar #nav {
     font-size: 12px;
   }
   /* line 433, ../sass/screen.sass */
   #sidebar #nav li {
     display: inline-block;
   }
   /* line 435, ../sass/screen.sass */
   #sidebar #nav li a {
     padding: 10px;
     height: auto;
     margin: 0 5px 10px 5px;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     -ms-border-radius: 6px;
     -o-border-radius: 6px;
     border-radius: 6px;
   }
 
   /* line 441, ../sass/screen.sass */
   h2 {
     font-size: 18px;
   }
 
   /* line 444, ../sass/screen.sass */
   h3 {
     font-size: 14px;
   }
 
   /* line 447, ../sass/screen.sass */
   #content {
     margin: 10px 20px 20px 20px;
   }
 
   /* line 450, ../sass/screen.sass */
   .download {
     text-align: center;
     width: 95%;
     margin-right: 0;
     padding-right: 0;
     padding-left: 0;
   }
   /* line 456, ../sass/screen.sass */
   .download .box, .download .file {
     float: none;
   }
 
   /* line 459, ../sass/screen.sass */
   .forums {
     text-align: center;
     width: 95%;
     margin-right: 0;
     padding-right: 0;
     padding-left: 0;
   }
   /* line 465, ../sass/screen.sass */
   .forums .speech, .forums .link {
     float: none;
   }
 }

2 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #16025 @ 15.08.12 08:25

442

JScript kode

 function resizeImage()
 {
 var maxHeight = 100;
 var maxWidth = 100;
 
 if(this.height > maxHeight)
 this.height = maxHeight;
 
 if(this.width > maxWidth)
 this.width = maxWidth;
 }

Er det ikke bare noget du kan lave i JavaScript?
ikke testet

Indlæg senest redigeret d. 15.08.2012 08:25 af Bruger #16025

Bruger #17281 @ 16.08.12 10:27

Kan ikke se hvordan jeg skulle få det sat ind.

JScript kode

 /*
 Lightbox v2.51
 by Lokesh Dhakar - http://www.lokeshdhakar.com
 
 For more information, visit:
 http://lokeshdhakar.com/projects/lightbox2/
 
 Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
 - free for use in both personal and commercial projects
 - attribution requires leaving author name, author link, and the license info intact
     
 Thanks
 - Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
 - Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.
 
 
 Table of Contents
 =================
 LightboxOptions
 
 Lightbox
 - constructor
 - init
 - enable
 - build
 - start
 - changeImage
 - sizeContainer
 - showImage
 - updateNav
 - updateDetails
 - preloadNeigbhoringImages
 - enableKeyboardNav
 - disableKeyboardNav
 - keyboardAction
 - end
 
 options = new LightboxOptions
 lightbox = new Lightbox options
 */
 (function() {
   var $, Lightbox, LightboxOptions;
 
   $ = jQuery;
 
   LightboxOptions = (function() {
 
     function LightboxOptions() {
       this.fileLoadingImage = 'grafik/loading/ajax-loader.gif';
       this.fileCloseImage = 'grafik/loading/fileclose.png';
       this.resizeDuration = 700;
       this.fadeDuration = 500;
       this.labelImage = "Billed";
       this.labelOf = "ud af";
     }
 
     return LightboxOptions;
 
   })();
 
   Lightbox = (function() {
 
     function Lightbox(options) {
       this.options = options;
       this.album = [];
       this.currentImageIndex = void 0;
       this.init();
     }
 
     Lightbox.prototype.init = function() {
       this.enable();
       return this.build();
     };
 
     Lightbox.prototype.enable = function() {
       var _this = this;
       return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {
         _this.start($(e.currentTarget));
         return false;
       });
     };
 
     Lightbox.prototype.build = function() {
       var $lightbox,
         _this = this;
       $("<div>", {
         id: 'lightboxOverlay'
       }).after($('<div/>', {
         id: 'lightbox'
       }).append($('<div/>', {
         "class": 'lb-outerContainer'
       }).append($('<div/>', {
         "class": 'lb-container'
       }).append($('<img/>', {
         "class": 'lb-image'
       }), $('<div/>', {
         "class": 'lb-nav'
       }).append($('<a/>', {
         "class": 'lb-prev'
       }), $('<a/>', {
         "class": 'lb-next'
       })), $('<div/>', {
         "class": 'lb-loader'
       }).append($('<a/>', {
         "class": 'lb-cancel'
       }).append($('<img/>', {
         src: this.options.fileLoadingImage
       }))))), $('<div/>', {
         "class": 'lb-dataContainer'
       }).append($('<div/>', {
         "class": 'lb-data'
       }).append($('<div/>', {
         "class": 'lb-details'
       }).append($('<span/>', {
         "class": 'lb-caption'
       }), $('<span/>', {
         "class": 'lb-number'
       })), $('<div/>', {
         "class": 'lb-closeContainer'
       }).append($('<a/>', {
         "class": 'lb-close'
       }).append($('<img/>', {
         src: this.options.fileCloseImage
       }))))))).appendTo($('body'));
       $('#lightboxOverlay').hide().on('click', function(e) {
         _this.end();
         return false;
       });
       $lightbox = $('#lightbox');
       $lightbox.hide().on('click', function(e) {
         if ($(e.target).attr('id') === 'lightbox') _this.end();
         return false;
       });
       $lightbox.find('.lb-outerContainer').on('click', function(e) {
         if ($(e.target).attr('id') === 'lightbox') _this.end();
         return false;
       });
       $lightbox.find('.lb-prev').on('click', function(e) {
         _this.changeImage(_this.currentImageIndex - 1);
         return false;
       });
       $lightbox.find('.lb-next').on('click', function(e) {
         _this.changeImage(_this.currentImageIndex + 1);
         return false;
       });
       $lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
         _this.end();
         return false;
       });
     };
 
     Lightbox.prototype.start = function($link) {
       var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
       $(window).on("resize", this.sizeOverlay);
       $('select, object, embed').css({
         visibility: "hidden"
       });
       $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
       this.album = [];
       imageNumber = 0;
       if ($link.attr('rel') === 'lightbox') {
         this.album.push({
           link: $link.attr('href'),
           title: $link.attr('title')
         });
       } else {
         _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
         for (i = 0, _len = _ref.length; i < _len; i++) {
           a = _ref[i];
           this.album.push({
             link: $(a).attr('href'),
             title: $(a).attr('title')
           });
           if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
         }
       }
       $window = $(window);
       top = $window.scrollTop() + $window.height() / 10;
       left = $window.scrollLeft();
       $lightbox = $('#lightbox');
       $lightbox.css({
         top: top + 'px',
         left: left + 'px'
       }).fadeIn(this.options.fadeDuration);
       this.changeImage(imageNumber);
     };
 
     Lightbox.prototype.changeImage = function(imageNumber) {
       var $image, $lightbox, preloader,
         _this = this;
       this.disableKeyboardNav();
       $lightbox = $('#lightbox');
       $image = $lightbox.find('.lb-image');
       this.sizeOverlay();
       $('#lightboxOverlay').fadeIn(this.options.fadeDuration);
       $('.loader').fadeIn('slow');
       $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
       $lightbox.find('.lb-outerContainer').addClass('animating');
       preloader = new Image;
       preloader.onload = function() {
         $image.attr('src', _this.album[imageNumber].link);
         $image.width = preloader.width;
         $image.height = preloader.height;
         return _this.sizeContainer(preloader.width, preloader.height);
       };
       preloader.src = this.album[imageNumber].link;
       this.currentImageIndex = imageNumber;
     };
 
     Lightbox.prototype.sizeOverlay = function() {
       return $('#lightboxOverlay').width($(document).width()).height($(document).height());
     };
 
     Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
       var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth,
         _this = this;
       $lightbox = $('#lightbox');
       $outerContainer = $lightbox.find('.lb-outerContainer');
       oldWidth = $outerContainer.outerWidth();
       oldHeight = $outerContainer.outerHeight();
       $container = $lightbox.find('.lb-container');
       containerTopPadding = parseInt($container.css('padding-top'), 10);
       containerRightPadding = parseInt($container.css('padding-right'), 10);
       containerBottomPadding = parseInt($container.css('padding-bottom'), 10);
       containerLeftPadding = parseInt($container.css('padding-left'), 10);
       newWidth = imageWidth + containerLeftPadding + containerRightPadding;
       newHeight = imageHeight + containerTopPadding + containerBottomPadding;
       if (newWidth !== oldWidth && newHeight !== oldHeight) {
         $outerContainer.animate({
           width: newWidth,
           height: newHeight
         }, this.options.resizeDuration, 'swing');
       } else if (newWidth !== oldWidth) {
         $outerContainer.animate({
           width: newWidth
         }, this.options.resizeDuration, 'swing');
       } else if (newHeight !== oldHeight) {
         $outerContainer.animate({
           height: newHeight
         }, this.options.resizeDuration, 'swing');
       }
       setTimeout(function() {
         $lightbox.find('.lb-dataContainer').width(newWidth);
         $lightbox.find('.lb-prevLink').height(newHeight);
         $lightbox.find('.lb-nextLink').height(newHeight);
         _this.showImage();
       }, this.options.resizeDuration);
     };
 
     Lightbox.prototype.showImage = function() {
       var $lightbox;
       $lightbox = $('#lightbox');
       $lightbox.find('.lb-loader').hide();
       $lightbox.find('.lb-image').fadeIn('slow');
       this.updateNav();
       this.updateDetails();
       this.preloadNeighboringImages();
       this.enableKeyboardNav();
     };
 
     Lightbox.prototype.updateNav = function() {
       var $lightbox;
       $lightbox = $('#lightbox');
       $lightbox.find('.lb-nav').show();
       if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
       if (this.currentImageIndex < this.album.length - 1) {
         $lightbox.find('.lb-next').show();
       }
     };
 
     Lightbox.prototype.updateDetails = function() {
       var $lightbox,
         _this = this;
       $lightbox = $('#lightbox');
       if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
         $lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
       }
       if (this.album.length > 1) {
         $lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + '  ' + this.album.length).fadeIn('fast');
       } else {
         $lightbox.find('.lb-number').hide();
       }
       $lightbox.find('.lb-outerContainer').removeClass('animating');
       $lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
         return _this.sizeOverlay();
       });
     };
 
     Lightbox.prototype.preloadNeighboringImages = function() {
       var preloadNext, preloadPrev;
       if (this.album.length > this.currentImageIndex + 1) {
         preloadNext = new Image;
         preloadNext.src = this.album[this.currentImageIndex + 1].link;
       }
       if (this.currentImageIndex > 0) {
         preloadPrev = new Image;
         preloadPrev.src = this.album[this.currentImageIndex - 1].link;
       }
     };
 
     Lightbox.prototype.enableKeyboardNav = function() {
       $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
     };
 
     Lightbox.prototype.disableKeyboardNav = function() {
       $(document).off('.keyboard');
     };
 
     Lightbox.prototype.keyboardAction = function(event) {
       var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode;
       KEYCODE_ESC = 27;
       KEYCODE_LEFTARROW = 37;
       KEYCODE_RIGHTARROW = 39;
       keycode = event.keyCode;
       key = String.fromCharCode(keycode).toLowerCase();
       if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
         this.end();
       } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
         if (this.currentImageIndex !== 0) {
           this.changeImage(this.currentImageIndex - 1);
         }
       } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
         if (this.currentImageIndex !== this.album.length - 1) {
           this.changeImage(this.currentImageIndex + 1);
         }
       }
     };
 
     Lightbox.prototype.end = function() {
       this.disableKeyboardNav();
       $(window).off("resize", this.sizeOverlay);
       $('#lightbox').fadeOut(this.options.fadeDuration);
       $('#lightboxOverlay').fadeOut(this.options.fadeDuration);
       return $('select, object, embed').css({
         visibility: "visible"
       });
     };
 
     return Lightbox;
 
   })();
 
   $(function() {
     var lightbox, options;
     options = new LightboxOptions;
     return lightbox = new Lightbox(options);
   });
 
 }).call(this);

lightbox

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler