შემოგვიერთდით FACEBOOK ზე

galery სკრიპტები - ვებ მასტერებისთვის - free program,antivirus,for ucoz, template,desing,style,css, - arwivi.net

მთავარი » »

2024-04-19 23:41:02
galery

+A შრიფტის გადიდება | -A შრიფტის დაპატარავება

Данный контент платный. Для просмотра его необходимо оплатить с помощью SMS Данный контент платный. Для просмотра его необходимо оплатить с помощью SMS

Code


<html>
  <head>
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
   

<style>

/*********************************
* Slideshow Styling
*********************************/
#slideshow {
  width: 100%;
  height: 100%;
  margin: 100px  

auto;

  position:relative;

  overflow: hidden;
}
  #slideshow.fullscreen {
  position: fixed;
  top: 0;
  left: 0;

   

  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  overflow: hidden;
  }
  .img-wrapper  

{
  min-width: 100%;
  min-height: 100%;
   
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
   

  right: 0;

  margin: auto;
  overflow: hidden;
   
  z-index:8;

  background-size: cover;
  background-position:  

center center;
  }
  #slideshow .img-wrapper.active {
  z-index:10;
  }

  #slideshow .img-

wrapper.last-active {
  z-index:9;
  }

  /*********************************
  * Thumbnail Styling
   

*********************************/
  .thumbs-container {
  width: 100%;
  height: 140px;
  position: absolute;
   

left: 0;

  z-index: 11;

  background: #222222;
  opacity: .9;
  }
  .thumbs-container.top {
   

top: 0;
  }
  .thumbs-container.bottom {
  bottom: 0;
  }
  .prev, .next {
   

width: 3%;
  min-width: 40px;
  height: 48px;
  padding: 46px 1%;

   

color: #999999;
  cursor: pointer;
  }
  .prev { float: left; }
  .next { float: right; }
   

.prev:hover, .next:hover {
  color: #555555;
  }
  ul.thumbs {
  position:  

absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 140px;
   

padding: 0;
  margin: 0 5%;
  overflow: hidden;
  white-space: nowrap;
   

text-align: center;
  }
  .thumb {
  display: inline-block;
   

width: 120px;
  height: 120px;
  margin: 10px;

  overflow: hidden;
   

  background-size: cover;
  background-position: center center;

  cursor: pointer;
   

}
  .thumb:first-of-type {
  margin-left: 0px;
  }
   

  .thumb.active {
  width: 116px;
  height: 116px;
  border: 2px solid  

#FFF;
  }

/*********************************
* Example Page Styling
*********************************/
#container {
  width: 100%;
  height: 100%;
  max-width:  

1200px;
  max-height: 700px;
  margin: 100px auto;

  position:relative;
}

</style>

  <title>galerea only123.my1.ru</title>
</head>
  <body>
  <div id="container">
  <div id="slideshow" class="fullscreen">
  <!-- Below are the images in the gallery -->
  <div id="img-1" data-img-id="1" class="img-wrapper active" style="background-image: url('/FFOutput/18.jpg')"></div>
  <div id="img-2" data-img-id="2" class="img-wrapper" style="background-image: url('/FFOutput/11.jpg')"></div>
  <div id="img-3" data-img-id="3" class="img-wrapper" style="background-image: url('/FFOutput/12.jpg')"></div>
  <div id="img-4" data-img-id="4" class="img-wrapper" style="background-image: url('/FFOutput/13.jpg')"></div>
  <div id="img-1" data-img-id="5" class="img-wrapper" style="background-image: url('/FFOutput/14.jpg')"></div>
  <div id="img-2" data-img-id="6" class="img-wrapper" style="background-image: url('/FFOutput/15.jpg')"></div>
  <div id="img-3" data-img-id="7" class="img-wrapper" style="background-image: url('/FFOutput/16.jpg')"></div>
  <div id="img-4" data-img-id="8" class="img-wrapper" style="background-image: url('/FFOutput/17.jpg')"></div>

  <!-- Below are the thumbnails of above images -->
  <div class="thumbs-container bottom">
  <div id="prev-btn" class="prev">
  <i class="fa fa-chevron-left fa-3x"></i>
  </div>

  <ul class="thumbs">
  <li data-thumb-id="1" class="thumb active" style="background-image: url('images/img1-

thumb.jpg')"></li>
  <li data-thumb-id="2" class="thumb" style="background-image: url('/FFOutput/10.jpg')"></li>
  <li data-thumb-id="3" class="thumb" style="background-image: url('/FFOutput/11.jpg')"></li>
  <li data-thumb-id="4" class="thumb" style="background-image: url('/FFOutput/12.jpg')"></li>
  <li data-thumb-id="5" class="thumb" style="background-image: url('/FFOutput/13.jpg')"></li>
  <li data-thumb-id="6" class="thumb" style="background-image: url('/FFOutput/14.jpg')"></li>
  <li data-thumb-id="7" class="thumb" style="background-image: url('/FFOutput/15.jpg')"></li>
  <li data-thumb-id="8" class="thumb" style="background-image: url('/FFOutput/16.jpg')"></li>
  </ul>

  <div id="next-btn" class="next">
  <i class="fa fa-chevron-right fa-3x"></i>
  </div>
  </div>
  </div>
  </div>

  <!-- Including Scripts -->
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
  <script src="js/gallery.js"></script>
  <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<script language="javascript" type="text/javascript">
$(function() {

  /******************************
  * STATIC VARIABLES
  ******************************/
  var THUMBNAIL_WIDTH = 140,
  GALLERY = $('#slideshow');

  /******************************
  * EVENT LISTENERS
  ******************************/
  GALLERY.find('.thumb').on('click', function() {
  loadClickedImage($(this).data('thumb-id'));
  });
  GALLERY.find('#prev-btn').on('click', function() {
  slidePrev();
  });
  GALLERY.find('#next-btn').on('click', function() {
  slideNext();
  });
  $(document).keydown(function(e){
  switch(e.keyCode) {
  // Left arrow press
  case 37:
  slidePrev();
  break;
  // Right arrow press
  case 39:
  slideNext();
  break;
  default:
  break;
  }
  });

  /******************************
  * GALLERY FUNCTIONS
  ******************************/
  var slideNext = function() {
   
  var active = GALLERY.find('.img-wrapper.active');

  if (active.length === 0) {  
  active = GALLERY.find('.img-wrapper:last');
  }

  // Setting next image & thumb properties
  loadNextImage(active);
  };

  var loadNextImage = function(active) {
  var next = active.next(".img-wrapper").length ? active.next(".img-wrapper") : GALLERY.find('.img-wrapper:first'),
  nextThumb = GALLERY.find('[data-thumb-id="' + next.data('img-id') + '"]');

  // Setting next image & thumb properties
  GALLERY.find('.thumb').removeClass('active');
  nextThumb.addClass('active');
  active.addClass('last-active');

  // Transitioning to next image & thumbnail
  scrollThumbnails(nextThumb);
  next.css({opacity: 0.0})
  .addClass('active')
  .animate({opacity: 1.0}, 1000, function() {
  active.removeClass('active last-active');
  });
  };

  var slidePrev = function() {
  var active = GALLERY.find('.img-wrapper.active');

  if (active.length === 0) {
  active = GALLERY.find('.img-wrapper:last');
  }

  // Setting next image & thumb properties
  loadPrevImage(active);
  };

  var loadPrevImage = function(active) {
  var prev = active.prev(".img-wrapper").length ? active.prev(".img-wrapper") : GALLERY.find('.img-wrapper:last'),
  prevThumb = GALLERY.find('[data-thumb-id="' + prev.data('img-id') + '"]');

  // Setting next image & thumb properties
  GALLERY.find('.thumb').removeClass('active');
  prevThumb.addClass('active');
  active.addClass('last-active');

  // Transitioning to next image & thumbnail
  scrollThumbnails(prevThumb);
  prev.css({opacity: 0.0})
  .addClass('active')
  .animate({opacity: 1.0}, 1000, function() {
  active.removeClass('active last-active');
  });
  };

  var loadClickedImage = function(id) {
  var image = GALLERY.find('[data-img-id="' + id + '"]'),
  imgThumb = GALLERY.find('[data-thumb-id="' + id + '"]'),
  currActive = GALLERY.find('.img-wrapper.active');

  // Setting image & thumb properties
  GALLERY.find('.thumb').removeClass('active');
  currActive.addClass('last-active').removeClass('active');
  imgThumb.addClass('active');
   
  // Transitioning to image & thumbnail
  scrollThumbnails(imgThumb);
  image.css({opacity: 0.0})
  .addClass('active')
  .animate({opacity: 1.0}, 1000, function() {
  currActive.removeClass('last-active');
  });
  };

  var scrollThumbnails = function(thumb) {
  var offset, // used for thumbnail offset
  first, // stores first thumbnail object
  x = thumb.position().left + parseInt(thumb.css('margin-left'), 10);

  // Checking current thumbnail offset
  if(x < 0) {
  first = GALLERY.find('.thumb:first');
  offset = parseInt(first.css('margin-left'), 10) - x;
  first.animate({
  marginLeft: offset
  }, 1000);
  } else {
  x = thumb.position().left;
  var currOffset = ( x + THUMBNAIL_WIDTH ) - thumb.parent().width();
  if(currOffset > 0) {
  first = GALLERY.find('.thumb:first');
  offset = parseInt(first.css('margin-left'), 10) - currOffset;
  first.animate({
  marginLeft: offset
  }, 1000);
  }
  }
  };
}());
</script>

  </body>
</html>

მასალის სახელიgalery
ნახვები1006
ID153
რეიტინგი5.0/6
ლიცენზიაუფასო

სულ კომენტარები: 0
Войдите:
avatar

ინფორმაცია

მასალა ნანახია 1006
რეიტინგი 5.0
ავტორი ADMIN
მასალის ID 153
კატეგორია სკრიპტები
გამოქვეყნდა 2014-11-15/23:41:02





Follow Me

თქვენი ბანერის ადგილი

ავტორიზაცია

რეკომენდირებულია

სტატისტიკა

ყველა
მომხმარებლები
სტუმრები
სულ ონლაინში 1
სტუმრები 1
მომხმარებლები 0

კონტაქტი

Contact Us

Правила чата
Пользователи онлайн
−Мини-чат
+Мини-чат
0
სულ ონლაინში 1
სტუმრები 1
მომხმარებლები 0

Индекс цитирования. Рейтинг@Mail.ru თავში დაბრუნება

Powered by ©w3.css