1. 首页
  2. 问答
  3. 如何启动onLoad的弹出灯箱？

如何启动onLoad的弹出灯箱？

2012-12-03 67 views
-1

我想制作一个lightbox popup。我想让它在网页加载时弹出，并在点击Lightbox弹出窗口时将其关闭。我怎样才能做到这一点？如何启动onLoad的弹出灯箱？

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

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

来源

2012-12-03 que1326

回答

4

如果你使用jQuery你可以创建链接元素按照说明，然后使用以下命令：

如

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

UPDATE

如果你想你可以使用一个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 
    });

来源

2012-12-03 17:39:26 WebweaverD

+0

非常感谢!!!!!!!!!!!! – que1326

+1

我有一个问题，如果您的帮助表示赞赏，我已经使用您的JavaScript代码，其工作良好，谢谢，但我用这个代码为我的主页，当进入主页http://q8marketz.com其工作，但我下次单击主页按钮时不要再重新工作，我只想要一次工作这个功能，该怎么做。任何想法。？？谢谢 – mans

+0

最简单的方法可能是在用户登录时设置cookie。然后可以在运行.trigger（'click'）之前检查cookie是否已设置。如果您不熟悉cookie，请查看http://www.w3schools.com/js/js_cookies.asp，您可能还想查看此jqery cookie插件https://github.com/carhartl/jquery-cookie，这使得生活变得更容易，尤其是如果你使用了很多的饼干 – WebweaverD

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>

来源

2015-10-20 09:18:56 javafreak

+0

请问你可以为你改变什么添加一些评论，为什么？这将大大改善这个答案。 – Salo

相关问题

 相关问题