forked from eikes/jquery.fullscreen.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjquery.fullscreenslides.min.js
71 lines (71 loc) · 5.63 KB
/
jquery.fullscreenslides.min.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/*
* Copyright Eike Send: http://eike.se/nd
* License: MIT / GPLv2
*
* This is a jQuery plugin to generate full screen galleries.
*
* It assumes that your images are wrapped in links like this:
*
* <a href="image-1-large.jpg" rel="gallery-1" title="woot">
* <img src="image-1-small"/>
* </a>
* <a href="image-2-large.jpg" rel="gallery-1" title="woot">
* <img src="image-2-small"/>
* </a>
* <a href="image-3-large.jpg" rel="gallery-1" title="woot">
* <img src="image-3-small"/>
* </a>
*
* You would then call it like this:
*
* <script src="http://code.jquery.com/jquery.js"></script>
* <script src="fullscreenslides.js"></script>
* <script>
* $(function(){
* $("img").fullscreenslides();
*
* // You can then use the container:
* var $container = $('#fullscreenSlideshowContainer');
*
* // Bind to events:
* $container
* .bind("init", function() {
*
* // Do something like adding a logo and adding a UI
* $container
* .append('<div class="ui" id="fullscreen-close">×</div>')
* .append('<div class="ui" id="fullscreen-loader"></div>')
* .append('<div class="ui" id="fullscreen-prev">←</div>')
* .append('<div class="ui" id="fullscreen-next">→</div>');
*
* $('#fullscreen-prev').click(function(){
* // You can trigger events as well:
* $container.trigger("prevSlide");
* });
* $('#fullscreen-next').click(function(){
* // You can trigger events as well:
* $container.trigger("nextSlide");
* });
* $('#fullscreen-close').click(function(){
* // You can trigger events as well:
* $container.trigger("close");
* });
*
* })
* .bind("startLoading", function() {
* // show spinner
* })
* .bind("stopLoading", function() {
* // hide spinner
* })
* .bind("startOfSlide", function(event, slide) {
* // show Caption, notice the slide element
* })
* .bind("stopLoading", function(event, slide) {
* // hide caption
* })
*
* });
* </script>
*
*/(function(a){var b,c=function(){function g(a){b.data("isFullScreen")&&b.trigger("close"),b.data("isFullScreen",!0)}b.bind("updateSize",function(d){b.height(a(window).height()),c()});var c=function(c){if(c===undefined)var c=b.data("currentSlide");if(c!==undefined){var d=a(window).height(),e=a(window).width();e/d>c.$img.width()/c.$img.height()?c.$img.css({height:d+"px",width:"auto"}):c.$img.css({height:"auto",width:e+"px"}),c.$img.css({"margin-left":"-"+.5*c.$img.width()+"px","margin-top":"-"+.5*c.$img.height()+"px"})}};a(window).bind("resize",function(){b.trigger("updateSize")});var d=!1;b.bind("showSlide",function(f,g){if(!d){var h=b.data("currentSlide");"$img"in g?e(h,g):(d=!0,b.trigger("startLoading"),g.$img=a('<img class="slide">').css({position:"absolute",left:"50%",top:"50%"}).hide().load(function(){d=!1,b.trigger("stopLoading"),c(g),e(h,g)}).attr("src",g.image),b.append(g.$img))}}),b.bind("prevSlide nextSlide",function(a){var c=b.data("slides"),d=b.data("currentSlide").id,e;a.type=="nextSlide"?e=(d+1)%c.length:e=(d-1+c.length)%c.length;var f=c[e];b.trigger("showSlide",f)});var e=function(a,c){a!==undefined&&(b.trigger("endOfSlide",a),a.$img.fadeOut()),c.$img.fadeIn(function(){b.trigger("startOfSlide",c)}),b.data("currentSlide",c)},f=function(a){a.keyCode==27&&b.trigger("close"),a.keyCode==37&&b.trigger("prevSlide"),a.keyCode==39&&b.trigger("nextSlide")};b.bind("close",function(){var c=b.data("options"),d=b.data("currentSlide");d.$img.hide(),b.trigger("endOfSlide",d),a(document).unbind("keydown",f),c.useFullScreen&&(document.cancelFullScreen&&document.cancelFullScreen(),document.mozCancelFullScreen&&(a("html").css("overflow","auto"),a(document).scrollTop(b.data("mozScrollTop")),document.mozCancelFullScreen()),document.webkitCancelFullScreen&&document.webkitCancelFullScreen(),document.removeEventListener("fullscreenchange",g),document.removeEventListener("mozfullscreenchange",g),document.removeEventListener("webkitfullscreenchange",g)),b.removeData("currentSlide slides width height").hide()});var h=!0;b.bind("show",function(c,d,e){var i=b.data("options"),j=b.data("slideshows"),k=j[d];b.data("slides",k),b.trigger("updateSize"),a(document).bind("keydown",f),i.useFullScreen&&(con=b[0],con.requestFullScreen&&(con.requestFullScreen(),document.addEventListener("fullscreenchange",g)),con.mozRequestFullScreen&&(con.mozRequestFullScreen(),document.addEventListener("mozfullscreenchange",g),b.data("mozScrollTop",a(document).scrollTop()),a("html").css("overflow","hidden")),con.webkitRequestFullScreen&&(con.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT),document.addEventListener("webkitfullscreenchange",g)),b.data("isFullScreen",!1)),h&&(b.trigger("init"),h=!1),b.show(),b.trigger("showSlide",e)})};a.fn.fullscreenslides=function(d){b=a("#fullscreenSlideshowContainer"),b.length==0&&(b=a('<div id="fullscreenSlideshowContainer">').hide(),a("body").append(b),c());var d=a.extend({bgColor:"#000",useFullScreen:!0,startSlide:0},d||{});d.useFullScreen=d.useFullScreen&&!!(b[0].requestFullScreen||b[0].mozRequestFullScreen||b[0].webkitRequestFullScreen),b.data("options",d),b.css({position:"fixed",top:0,left:0,width:"100%","text-align":"center","background-color":d.bgColor});var e={};this.each(function(){var c=a(this).parents("a")[0],d={image:c.href,title:c.title,rel:c.rel};d.data=a.extend({},a(this).data(),a(c).data()),e[d.rel]=e[d.rel]||[],e[d.rel].push(d),d.id=e[d.rel].length-1,a(c).data("slide",d),a(c).click(function(c){b.trigger("show",[this.rel,a(this).data("slide")]),c.preventDefault()})}),b.data("slideshows",e)}})(jQuery)