wtorek, 1 października 2013

lightbox jQuery

lightbox jQuery jak wykonać

Dzisiaj pokażę zasadę budowania lightbox jQuery.Stworzymy pliki potrzebne do funkcjonowania  Lightbox.
aczynamy od index.html gdzie umieścimy dołączone arkusze stylów strony index oraz tej w tym przypadku najważniejszej czyli wyskakującego okna lightbox jQuery.Po nad to dołaczymy skrypty jQery potrzebne do uruchomienia całości
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dokument bez tytułu</title>
<link href="css/h.css" rel="stylesheet" type="text/css">
<!--dodaje stylizacje okna lightbox -->
<link href="css/lightbox.css" rel="stylesheet" type="text/css"><br>
<!--dodaje skrypy javascript obsługa lightbox -->
<script type="text/javascript" src="lightbox.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
  jQuery(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });
      $('.showOlderChanges').on('click', function(e){
        $('.changelog .old').slideDown('slow');
        $(this).fadeOut();
        e.preventDefault();
      })
  });
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2196019-1']);
  _gaq.push(['_trackPageview']);
</script>
</head>
<body>
<div class="container">
  <div class="header"><!-- end .header -->Projektowanie stron internetowych tutoriale Lighbox</div>
  <div class="content">
    <h1>Lightbox</h1>
    <p align="center">
        <!--linkuje zdjęcia do wywołania ligtbox ,najpierw duże, potem miniatury,Proszę zwrócić uwagę na [plants] to spossób na przesuwanie zdjęć w ligtbox-->
        <a href="images/1max.jpg" rel="lightbox[plants]"> <img src="images/1min.jpg" alt="" /></a>
        <a href="images/2max.jpg" rel="lightbox[plants]"> <img src="images/2min.jpg" alt="" /></a>
        <a href="images/3max.jpg" rel="lightbox[plants]"> <img src="images/3min.jpg" alt="" /></a>
        <a href="images/4max.jpg" rel="lightbox[plants]"> <img src="images/4min.jpg" alt="" /></a>
        <a href="images/5max.jpg" rel="lightbox[plants]"> <img src="images/5min.jpg" alt="" /></a>
        <a href="images/6max.jpg" rel="lightbox[plants]"> <img src="images/6min.jpg" alt="" /></a>
        <a href="images/7max.jpg" rel="lightbox[plants]"> <img src="images/7min.jpg" alt="" /></a>
    </p>
    <!-- end .content --></div>
  <div class="footer">
    <p>WEB-kleszewski.Projektowanie stron internetowych</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>
Pliku stylizacji css. strony index nie bendę omawiał gdyż jest to sprawa prosta do zrobienia i rzecz gustu.
Omówię natomiast plik lightbox.css:
 jest on istotny o tyle gdyz dzięki tej stylizacji wyskakujące okno wygląda tak jak wygląda
/*stylizacja okna ligtbox*/
/* 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;
}

Brak komentarzy:

Prześlij komentarz

lubię to

Popularne posty