如何启动弹出式灯箱onLoad？

时间：2012-12-03 17:09:42

标签： javascript jquery html

我想制作一个灯箱弹出窗口。我希望它在网页加载时弹出，并在他们点击灯箱弹出窗口时关闭它。我怎样才能做到这一点？

这是我到目前为止所做的，但它不起作用。

HTML文件：

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Lightbox 2</title>
<meta name="description" lang="en" content="testing" />
<meta name="author" content="Lokesh Dhakar">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" /> 
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" 
    media="screen" />
<link 
    href='http://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:400,700'
    rel='stylesheet' type='text/css'>

</head>
<body>
<a href="images/examples/image-1.jpg" rel="lightbox">
    <img src="images/examples/thumb-1.jpg" alt="" /></a>
<a href="images/examples/image-2.jpg" rel="lightbox" 
    title="Optional caption."><img src="images/examples/thumb-2.jpg" 
    alt="" /></a>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>

JS文件：

(function() {
  var $, Lightbox, LightboxOptions;

  $ = jQuery;

  LightboxOptions = (function() {

function LightboxOptions() {
  this.fileLoadingImage = 'images/loading.gif';
  this.fileCloseImage = 'images/close.png';
  this.resizeDuration = 700;
  this.fadeDuration = 500;
  this.labelImage = "Image";
  this.labelOf = "of";
}

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);

2 个答案:

答案 0 :(得分：4)

如果您使用jquery，您可以按照说明创建链接元素，然后使用以下内容：

e.g

HTML：

<a id ="ele_id" href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

JS：

$('document').ready(function(){
    $('#ele_id').trigger('click');
});

<强>更新

如果你想要，你可以使用一个cookie来检查它是否是第一次在网站上的用户，如果是这种情况，只运行灯箱。

使用jquery cookie插件：https://github.com/carhartl/jquery-cookie 

$('document').ready(function(){
     if ($.cookie('has_visited') != TRUE){
        $('#ele_id').trigger('click');
        $.cookie('has_visited', TRUE, { expires: 1 }); //this will set the cookie to expire after one day but you could make it longer
    });

答案 1 :(得分：0)

<!DOCTYPE html>
<html>
<head>
<Style>
#fade{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light{
display: none;
position: absolute;
top: 5%;
left: 45%;
width: 640px;
height: 453px;
margin-left: -250px;
margin-top: 100px;                 
background: #CCC;
z-index:1002;
overflow:visible;
}
</style>
<script>
window.document.onkeydown = function (e)
{
if (!e){
    e = event;
}
if (e.keyCode == 27){
    lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';  
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
<head>
<body onload="lightbox_open()";>
<div class="light" onClick="lightbox_close();" id="light"><img src="your_img.jpg"></div>
<div id="fade" onClick="lightbox_close();"></div>
</body>
</html>
相关问题
最新问题